您的位置：首页 > Web前端 > AngularJS

angularJS表单验证

2016-09-08 19:40 423 查看

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script src="bower_components/angular/angular.js"></script>

</head>
<body>

<form action="" method="get" novalidate name="myform">
<fieldset>
<legend>个人信息登陆:</legend>
手机号:
<input type="text" name="telnum" ng-model="telnum" ng-pattern='/^(1[^012][0-9]{9})$/' required>
密码:
<input type="password" name="password" ng-model="password" ng-minlength="6" ng-maxlength="14" required>
</fieldset>
</form>
<div style="color: red" ng-show="myform.telnum.$dirty && myform.telnum.$error.required">手机号必填</div>
<div style="color: red" ng-show="myform.password.$dirty && myform.password.$error.required">密码必填</div>

<div style="color: red" ng-show="myform.password.$dirty && myform.password.$error.minlength">密码必须大于6</div>
<div style="color: red" ng-show="myform.password.$dirty && myform.password.$error.maxlength">密码必须小于14</div>

<div style="color: red" ng-show="myform.telnum.$dirty && myform.telnum.$error.pattern">必须是11位手机号</div>
</body>
</html>

语法:

表单里的name和ng-model必须保持一致,两者都不可缺少

required表示此项必填不能为空

ng-minlength最小字符长度

ng-maxlength最大字符长度

ng-pattren后跟正则表达式

修改过的输入框:

myform.username.$dirty

未修改过的输入框:

myform.username.$pristine

验证不通过的输入框:

myform.username.$invalid 当error为空集合时,说明验证通过,$invalid值为false

验证通过的输入框:

myform.username.$valid

验证某个条件是否通过:

myform.username.$error.XXX

这里的$error是错误集合

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs 表单表单验证

相关文章推荐

新的分享

章节导航