AngularJS自带了很多验证，什么必填，最大长度，最小长度.这里记录几个有用的正则式验证

1.使用angularjs的表单验证

正则式验证

只需要配置一个正则式，很方便的完成验证，理论上所有的验证都可以用正则式完成

//JavaScript $作用域。mobileregx='^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\d{8}$'；$ scope。电子邮件注册表='^[a-z]([a-z0-9]*[-_)？[a-z0-9] )*@([a-z0-9]*[-_]？[a-z0-9] ) [ .][a-z]{2，3}([ .][a-z]{2})？$';$ scope。pwdregx='[a-Za-Z0-9]*；div class=' form-group ' input class=' form-control ' name=' mobile ' type=' text ' ng-model=' account。“mobile”要求ng-pattern=“mobileRegx”/span class=“error”ng-show=“register form .$提交登记表。移动电话。$错误。必需' *手机号不能为空/span span class=' error ' ng-show='寄存器形式.$提交登记表。移动电话。$错误。模式' *手机号地址不合法/span/divinput type=' text ' ng-pattern='/[a-Za-Z]/'/数字

设置投入的类型=数字即可

div class='form-group col-md-6 '标签为='密码'预估时间/label div class=' input-group '需要输入类型=' number ' class=' form-control ' ng-model=' task。估计时间' name=' time '/span class=' input-group-addon '分钟/span/div span class=' error ' ng-show='新任务表单.$已提交新任务表单。时间。$错误。必需' *请预估时间/span /div邮箱

输入类型='电子邮件'名称=' email ' ng-model=' user。电子邮件'/网址

输入类型=' URL '名称='主页' ng-model='用户。脸书_网址'/效果

效果是实时的，很带感

2.使用n消息验证表单

相对于上面的每个验证都要自己写代码判断，n消息提供了一种更为简洁的方式

https://docs.angularjs.org/api/ngMessages/directive/ngMessages

棱角分明。模块(' ngmessagesample '，[' ngMessages '])；表单名称='myForm '标签输入您的姓名：输入类型=' text ' name=' my name ' ng-model=' name ' ng-min length=' 5 ' ng-max length=' 20 '必填//labelpremrymform。我的名字。$ error={ {我的表单。我的名字。$ error | JSON } }/pre！-需要配合ng-if使用，否则一开始就显示出来了，你摸了就会触发验证-div ng-messages='我的表单。我的名字。$ error ' style=' color : maron '角色=' alert ' ng-if='我的表单。我的名字。$ touch“div-message=”必填'您没有输入字段/div-消息=“最小长度”您的字段太短/div-message=' maxlength '您的字段太长/div/div/表单简直是第二次解放啊。

2.动态生成的表单的验证

如果你有一部分形式的内容是动态生成的，数量和名字都不确定的时候，该如何验证这些生成的元素呢？其实维护一个动态的形式本来就是个问题。但是在有角的中，只需要记住一点：准备好你的数据，其他的交给棱角分明。像下面这个例子，你只需要维护好一个数组，然后利用尼日利亚重复就可以快速的呈现到页面上。

其实动态的形式和一般的形式验证都是一致的，只是动态的形式需要使用myForm[inout_name].$错误的形式访问

！-动态显示状态的负责人-div class=' form-group col-MD-6 ' ng-repeat=' task。status _ table |由： sta订购。“sequence _ order”标签{ { sta。status _ name } }负责人/label selection required class=' form-control ' ng-model=' sta。user _ id ' ng-options=' QA。id为QA。姓氏' ' QA。taskserversist ' name=' { { sta }中QA的last _ name。status _ name } } '/selectdiv ng-messages='新任务表单[sta。status _ name].$ error ' ng-if=' NewTaskorm .$ submit | | NewTaskorm[sta。status _ name].$ touch ' p class=' error ' ng-message='必需' *请选择负责人/p/div/div3必填项加亮显

有些表单我们不希望粗暴的在下面添加文字信息提示验证，而是希望更简洁的方式，如：加亮边框，突出显示

需要做的只是在需要验证没通过的时候添加同学们，改变元素的样式即可

表单名称=' loginForm ' novalidate ng-submit=' loginPost()' class=' nav bar-form nav bar-right ' ng-hide=' log in ' fake-autocomplete/fake-autocompleted iv class=' form-group '输入名称=' user _ name '必需maxlength=' 50 ' type=' text ' class=' form-control ' placeholder='手机号或邮箱ng-model=' account。user _ name ' ng-class=' { warn : log InFORMAT .$提交的loginForm.user_name .$错误。必需的} '/div class=' form-group '输入名称=' password '必需的类型=' password ' maxlength=' 50 '占位符='密码ng-model=' account。密码' ng-class=' { ' form-control ' :1，警告：登录信息.$提交登录信息。密码。$错误。必选} '/div按钮类型=' submit ' class=' BTN BTN-默认' span class=' glyphicon glyphicon-lock '/span登录/按钮/表单。warn { border-color : # f78d！重要；outline: 0！重要；-web套件-box-shadow :插图0 1px 1px rgba(0，0，0。075)，0 0 8px rgb(239，154，154)！重要；盒子阴影：插图0 1px 1px rgba(0，0，0，075)，0 0 8px rgba(239，154，154)！重要；}以上所述是小编给大家介绍的详解AngularJS中的表单验证，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！