标签：set border auto maxlength enter margin src meta 检查
novalidate 去掉html5自带的验证
ng-minlength 规定输入文本的最小长度
ng-maxlength 规定输入文本的最大长度
ng-submit 接收一个方法名，提交表单时触发这个方法
ng-class 规定一个条件，满足条件后添加指定的类名。语法如下：（error是类名，冒号后面的是条件）
ng-class="{‘error‘:form.username.$error.required}"
$pristine 没有被改过的表单
$dirty 被改过的表单
$valid 通过验证
$invalid 没有通过验证
$error 错误
语法：
<!-- 这是一个条件，表示检查所有规则 --> form.username.$invalid <!-- 表示只检查minlength规定的规则 --> form.username.$error.minlength
<!-- form表示 form表单的form的name名字， username 表示form下某个表单 -->
当input上规定的验证规则通过后，在input 上写的 ng-model 才会生效。
ng-if 语句的条件满足显示元素，不满足移除元素
ng-disabled 同ng-if的用法一样，这个是表示元素可不可用的
根据以上知识点就可以写一个简单的表单验证了：
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../../Angular/angular.min.js"></script> <link rel="stylesheet" href="../../Angular/bootstrap.css"/> <style> .box { width:200px; margin:50px auto; } p.error { color:red; } input.error { border:1px solid red; } </style> </head> <body> <div class="box" ng-controller="myController1"> <form name="form" ng-submit="formSubmit()" novalidate> <h2>注册</h2> <div> <label>用户名：</label> <input type="text" class="form-control" ng-model="userdata.username" name="username" ng-minlength="3" ng-maxlength="5" required /> <div class="error" ng-show="form.username.$invalid && form.username.$dirty && form.submitted"> <p class="error" ng-if="form.username.$error.minlength">最少输入3位</p> <p class="error" ng-if="form.username.$error.maxlength">最多输入5位</p> <p ng-if="form.username.$error.required" ng-class="{‘error‘:form.username.$error.required}">不能为空</p> </div> </div> <div> <label>密码：</label> <input type="password" name="password" ng-model="userdata.password" class="form-control" ng-minlength="6" required ng-class="{‘error‘:form.password.$invalid && form.password.$dirty}" /> <p class="error" ng-if="form.password.$invalid && form.password.$dirty">密码格式不正确</p> </div> <div class="text-center"> <input type="submit" class="btn btn-danger"/> </div> </form> </div> <script> angular.module("myApp",[]) .controller("myController1",function($scope) { $scope.userdata = {}; $scope.submitted = false; $scope.formSubmit = function() { if($scope.form.$valid) { console.log($scope.userdata); //scope可以直接点出from的name属性 console.log($scope.form) } else { $scope.form.submitted = true; } } }) </script> </body> </html>
标签：set border auto maxlength enter margin src meta 检查
原文地址：http://www.cnblogs.com/chefweb/p/6066729.html
