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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章