angularjs表单验证

来源:互联网 发布:网络网络维护 编辑:程序博客网 时间:2024/05/21 16:23

常用的表单验证指令
  1. 必填项验证
  某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:
  
  2. 最小长度
  验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= “{number}”:
  
  3. 最大长度
  验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用指令ng-maxlength=”{number}”:
  
  4. 模式匹配
  使用ng-pattern=”/PATTERN/”来确保输入能够匹配指定的正则表达式:
  
  5. 电子邮件
  验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可:
  
  6. 数字
  验证输入内容是否是数字,将input的类型设置为number:
  
  7. URL
  验证输入内容是否是URL,将input的类型设置为 url:
  

AngularJS提供了一些状态值
pristinedirty 表单有填写记录
validinvalid 字段内容是非法的

对form添加novalidate属性来禁用浏览器默认验证行为

<form name='myForm'  novalidate>

文字显示验证失败原因

<input type="email" name="email" ng-model="email"/>  <div style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">  <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>  <span ng-show="myForm.email.$error.email">非法的邮箱。</span></div>
原创粉丝点击