angularJS表单验证

来源：互联网发布：二个字网络语言大全编辑：程序博客网时间：2024/06/06 00:32

<!DOCTYPE html><html lang="en" ng-app><head><meta charset="UTF-8"><title>表单验证</title><script src="bower_components/angular/angular.js"></script></head><body><!-- novalidate 去掉浏览器自带的验证功能--><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是错误集合

0 0