angularjs 表单检验

视频教程
博客参考

验证必须配置

1. 确保form上标签有一个name属性，像下面的例子一样。最好再加一个novalidate=”novalidate”
2. form中不能有action属性。提交交由ng-submit处理
3. 每个input一定要有ng-model，最好有一个name方便引用。然后用require或者ng-minlength之类才起作用

常见验证

验证是否已输入文字，只需在标签上加上required：

验证至少输入{number}个字符，使用指令ng-minlength=“{number}”：

验证至多输入{number}个字符，使用指令ng-maxlength=“{number}”：

确保输入匹配一个正则表达式，使用指令ng-pattern="/PATTERN/":

验证输入是一个Email，设置input的type属性为email：

验证输入是一个数字，设置input的type属性为number：

验证输入是一个URL，设置input的type属性为url

最大值 最小值

检验条件可以多个

调试工具

chrome 插件ng-inspector
页面有$scope的可方便查看，点击scope对象中的form的name，对console下会log出详细的信息

验证

  
  
Email:      
       
   
 
   
      
   
   
 

form元素对应的值

input元素对应的值

$dirty 元素输入了
$pristine 元素未输入
$invalid 不合法
$valid 合法
$error 验证条件下不通法的值 如 required: true,此时true是不通过的意思，用这个结合ng-show可以显示错误信息

样式

验证出错时会在对应元素的class样式中添加样式，具体样式的实现未提供
如：

猜下可能明白意思了

用到的一些示例

输入框

提交按纽
确认

控制显示

show

远程验证什么的看视频吧

遇到的问题

隐藏的控件不做检验

发现使用ng-show只是让控件隐藏判断条件还是存在的，此时应使用ng-if
ng-if会移除dom，生成dom，而ng-show只是改变其display属性