angularjs 表单检验

验证必须配置

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

常见验证

验证是否已输入文字，只需在标签上加上required：
<input type="text" ng-model="user.name" required />
验证至少输入{number}个字符，使用指令ng-minlength=“{number}”：
<input type="text" ng-model="user.name" ng-minlength="5" />
验证至多输入{number}个字符，使用指令ng-maxlength=“{number}”：
<input type="text" ng-model="user.name" ng-maxlength="20" />
确保输入匹配一个正则表达式，使用指令ng-pattern="/PATTERN/":
<input type="text" ng-model="user.name" ng-pattern="/a-zA-Z/" />
验证输入是一个Email，设置input的type属性为email：
<input type="email" name="email" ng-model="user.email" />
验证输入是一个数字，设置input的type属性为number：
<input type="number" name="number" ng-model="user.age" />
验证输入是一个URL，设置input的type属性为url
<input type="url" name="homepage" ng-model="user.weburl" />
最大值最小值
<input type="number" name="host_port" ng-model="message.host.port" class="form-control" placeholder="端口" max="65535" min="1" required>

检验条件可以多个

调试工具

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

验证

<form ng-controller="validationController" name="mainForm" >  
  <p>Email:      
  <input    type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />     
   </p> 
   <p>      
  <input type="submit" ng-disabled="mainForm.$invalid" /> 
   </p>
</form>

form元素对应的值

input元素对应的值

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

样式

验证出错时会在对应元素的class样式中添加样式，具体样式的实现未提供
如：
<input type="text" name="phone" class="form-control ng-pristine ng-invalid ng-invalid-required ng-valid-pattern ng-touched" ng-model="message.phone" placeholder="请输入手机号" ng-pattern="/^1\d{10}$/" required="">
猜下可能明白意思了

用到的一些示例

输入框
<div class="col-xs-8 fht_host_ip" ng-class="{'has-error': myform.host_ip.$invalid||myform.host_ip.$pristine}"> <input type="text" name="host_ip" ng-model="message.host.ip" class="form-control" placeholder="ip" required>

提交按纽
<button type="button" class="btn btn-primary btn-block" ng-click="instance.send()" ng-disabled="myform.$invalid"> 确认</button>

控制显示
<div class="form-control" ng-show="myform.para_cb.$viewValue"> show</div>

远程验证什么的看视频吧

遇到的问题

隐藏的控件不做检验

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