validate 常用的输入框校验
记录一下angular可以直接用的输入框校验器，外加一个国内手机号码的校验
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/lib/angular.js"></script> <link href="../css/bootstrap.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .top5 { margin-top: 5px; } /**可以自行添加以下四个css类，在校验的时候输入框会自动显示对应的样式*/ .ng-invalid { border-color: red; border-width: 0.5px; } , .ng-valid { } , .ng-pristine { } , .ng-dirty { } , .ng-invalid-required { } , .ng-invalid-minlength { } , .ng-valid-max-length { } , </style> </head> <body ng-app="myApp" ng-controller="myController"> <div class="form-group"> <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" /> </div> <form name='myForm'> <div class="row"> <span class="col-md-2 text-left">必填:</span><input type="text" name="required" required ng-model="name" /></span> </div> <div class="top5 row"> <span class="col-2 text-left">最少五个字符:</span><input type="text" name="minLength" ng-minlength="5" ng-model="minLength" /></span> </div> <div class="top5 row"> <span class="col-2 text-left">最多五个字符:</span><input type="text" name="maxLength" ng-maxlength="5" ng-model="maxLength" /> </div> <div class="top5 row"> <span class="col-2 text-left">邮件格式:</span><input type="email" name="email" ng-model="email" /> </div> <div class="top5 row"> <span class="col-2 text-left">数字:</span><input type="number" name="number" ng-model="number" /> </div> <div class="top5 row"> <span class="col-2 text-left">URL:</span><input type="url" name="url" ng-model="url" /> </div> <div class="top5 row"> <span class="col-2 text-left">手机号码:</span><input type="text" name="phone" ng-model="phone" ng-pattern="/^1[0-9]{10}$/" /> </div> <div class="top5 row"> <span class="col-2 text-left">正则表达式:</span><input type="text" name="regx" ng-model="pattern" ng-pattern="/[a-zA-Z]/" /> </div> <div class="top5"> 必填项绑定的数据:<span>{{name}},</span><span>没有被修改:</span> <span>{{myForm.required.$pristine }},</span>,<span>被修改了:</span><span>{{myForm.required.$dirty}}</span> </div> <div class="top5">最少五个字符绑定的数据:{{minLength}},校验是否通过:{{myForm.minLength.$valid}}，是否验证不通过:{{myForm.minLength.$invalid}}</div> <div class="top5">最多五个字符绑定的数据:{{maxLength}},详情:{{myForm.maxLength.$error}}</div> <div class="top5">email绑定的数据：{{email}}</div> <div class="top5">数字绑定的数据：{{number}}</div> <div class="top5">URL绑定的数据:{{url}}</div> <div class="top5">手机号码绑定的数据:{{phone}}，是否校验通过：{{myForm.phone.$valid}}</div> <div class="top5">正则绑定的数据:{{pattern}}</div> </form> <script> angular.module('myApp',[]).controller('myController',function($scope){ //检查表单是否有修改 }); </script> </body> </html>
静态效果如下：
本文参考自《angular权威教程》以及 http://www.cnblogs.com/rohelm/p/4033513.html，文章里还有一些更深入的内容，值得一读
