Angular学习笔记:表单验证

    前端数据校验的意义在于改善用户体验,用户不用等到將数据提交到服务器后才知道哪些数据是不合法的。使用angular对表单元素进行校验是相当方便的,我们来看一下可以在input元素上使用的所有校验选项,可以验证必填项,长度和正则匹配等.

属性值验证

  1. 必填项验证
    某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:

    1
    <input type="text" required />
  2. 最小长度
    验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= “{number}”:

    1
    <input type="text" ng-minlength="5" />
  3. 最大长度
    验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用指令ng-maxlength=”{number}”:

    1
    <input type="text" ng-maxlength="20" />
  4. 模式匹配
    使用ng-pattern=”/PATTERN/“来确保输入能够匹配指定的正则表达式:

    1
    <input type="text" ng-pattern="/[a-zA-Z]/" />

PS:

  • 使用input的type属性,可以对email,number,url进行验证
  • form中添加novalidate属性,使表单自带的验证无效

表单验证

  1. 未修改过的表单
    布尔值属性,表示用户是否修改了表单。如果为ture,表示没有修改过;false表示修改过:

    1
    formName.inputFieldName.$pristine;
  2. 修改的表单
    布尔型属性,当且仅当用户实际已经修改的表单。不管表单是否通过验证:

    1
    formName.inputFieldName.$dirty
  3. 经过验证的表单
    布尔型属性,它指示表单是否通过验证。如果表单当前通过验证,他将为true:

    1
    formName.inputFieldName.$valid
  4. 未通过验证的表单

    1
    formName.inputFieldName.$invalid

PS:ng-disabled=”formName.inputFieldName.$invalid” 表单验证不通过时按钮失效

举个栗子:

在表单验证出错时,可以通过ng-show显示报错信息

1
2
3
4
5
6
<form name="userForm">
<input type="text" name="username" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
<p ng-show="userForm.username.$error.minlength">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength">Username is too long.</p>
<p ng-show="userForm.username.$error.required">Your username is required.</p>
</form>

也可以使用ng-message

1
2
3
4
5
<div ng-messages="userForm.name.$error">
<p ng-message="minlength">Username is too short.</p>
<p ng-message="maxlength">Username is too long.</p>
<p ng-message="required">Your username is required.</p>
</div>

文章目录
  1. 1. 属性值验证
  2. 2. 表单验证
  3. 3. 举个栗子:
|