angulaJs 表单验证相关

Angular 的表单属性 $valid, $invalid, $pristine, $dirty

Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息，并且应用到了表单和输入.

属性类		描述
$valid	ng-valid	Boolean 告诉我们这一项当前基于你设定的规则是否验证通过
$invalid	ng-invalid	Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过
$pristine	ng-pristine	Boolean 如果表单或者输入框没有使用则为True
$dirty	ng-dirty	Boolean 如果表单或者输入框有使用到则为True

Angular 也提供了有关表单及其输入框的类，以便你能够依据每一个状态设置其样式.

1.确保form上标签有一个name属性，像下面的例子一样。最好再加一个novalidate=”novalidate”

2.form中不能有action属性。提交交由ng-submit处理

3.每个input一定要有ng-model，最好有一个name方便引用。然后用require或者ng-minlength之类才起作用

<form name="form" novalidate="novalidate">
  <label name="email">Your email</label>
  <input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>

ng默认提供了验证

验证是否已输入文字，只需在标签上加上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" />

验证规则

Angular 有很多验证规则，像是 tong-min leng than dng-max length.

 Angular还可以自己配置规则.  Angular输入指引上有说明 .

<input
   ng-model="{ string }"
   name="{ string }"
   required
   ng-required="{ boolean }"
   ng-minlength="{ number }"
   ng-maxlength="{ number }"
   ng-pattern="{ string }"
   ng-change="{ string }">
</input>

禁用提交按钮 ng-disabled 现在真正的好戏上演了。我们开始使用Angular的属性 。首先让我们禁用我们的提交按钮。如果我们的表单是$invalid的，我们只想禁用它。 <!-- index.html --> ...     <!-- SUBMIT BUTTON -->     <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button> ... 只使用一点代码（ng-disabled），如果我们的表单是$invalid的，表单按钮将被禁用。  <!-- index.html --> ...     <!-- NAME -->     <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">         <label>Name</label>         <input type="text" name="name" class="form-control" ng-model="user.name" required>         <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>     </div>          <!-- USERNAME -->     <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">         <label>Username</label>         <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">         <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>         <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>     </div>              <!-- EMAIL -->     <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">         <label>Email</label>         <input type="email" name="email" class="form-control" ng-model="user.email">         <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>     </div>