AngularJS作为下一代的Web应用开发的框架，表单验证的方式与JQuery/JS截然不同，总之，更加简洁更加简单。
基本结构
HTML代码
<form action="#">
<input id="txt_submit" type="text" name="test" placeholder="请输入6~10个字符的中文"><span id="msg"></span>
<button id="btn_submit" type="submit">提交</button>
</form>
AngularJS基本结构
<body ng-app>
<script src="js/angular.js"></script>
</body>
实现方式
-
form添加属性name。最好同时加上novalidate属性(用于禁用H5默认自带的验证)。
<form action="#" name="testForm" novalidate>
...
</form>
-
input添加ng-model，绑定的变量test，用于后面的验证。
<input name="test" ng-model="test" type="text" placeholder="请输入6~10个字符的中文">
-
input添加验证属性required和验证指令ng-minlength、ng-maxlength以及ng-pattern。同时，对应添加相关的提示信息。
<input name="test" ng-model="test" type="text" placeholder="请输入6~10个字符的中文" required ng-minlength="6" ng-maxlength="10" ng-pattern="/^[\u4e00-\u9fa5]+$/">
<div ng-show="testForm.test.$dirty && testForm.test.$invalid">
<div ng-if="testForm.test.$error.required">该输入项不能为空</div>
<div ng-if="testForm.test.$error.minlength">输入长度不能小于6</div>
<div ng-if="testForm.test.$error.maxlength">输入长度不能大于10</div>
<div ng-if="testForm.test.$error.pattern">必须输入汉字</div>
</div>
- 为了防止用户未输入就提交，在按钮添加禁用指令，当表单完全验证通过才能提交。
<button ng-disabled="testForm.$invalid" type="submit">提交</button>
代码说明：
| 代码 | 说明 |
|---|---|
testForm |
表单名 |
test |
输入框绑定的变量 |
$dirty |
表单变量是否修改 |
$invalid |
表单变量验证是否未通过 |
$error.required |
表单变量是否没填写 |
$error.minlength |
表单变量是否少于最小长度 |
$error.maxlength |
表单变量是否超出最大长度 |
$error.pattern |
表单变量是否不满足正则表达式 |
如有任何疑问，欢迎下面留言
