Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)

AngularJS提供了丰富的表单验证指令，可以轻松实现对用户输入的校验，以保证数据的准确性和完整性。

AngularJS提供了丰富的表单验证指令，可以轻松实现对用户输入的校验，以保证数据的准确性和完整性。

失去焦点验证

AngularJS通过ng-blur指令可以很方便地实现失去焦点时的表单验证。具体步骤如下：

1. 在HTML表单元素上添加相应的验证指令，如ng-pattern、ng-minlength、ng-maxlength等；
2. 添加一个提示信息的元素或指令，如ng-show，并绑定验证表达式和提示信息；
3. 在表单元素上添加ng-model指令，绑定数据模型；
4. 在表单元素上添加ng-blur指令，绑定验证函数，如checkValidity()。

示例1: 实现一个验输入是否为数字的功能

HTML代码如下：

<form name="myForm">
  <input type="text" name="myInput" ng-model="myModel" ng-pattern="/^\d+$/"
         ng-blur="checkValidity()">
  <span ng-show="myForm.myInput.$error.pattern">请输入数字</span>
</form>

在以上代码中，ng-pattern中的正则表达式规定了输入必须为数字，ng-blur中的checkValidity()会在失去焦点时进行验证，ng-show会在表单验证不通过时显示提示信息。

示例2：实现一个验证输入长度的功能

HTML代码如下：

<form name="myForm">
  <input type="text" name="myInput" ng-model="myModel" ng-minlength="3" ng-maxlength="6"
         ng-blur="checkValidity()">
  <span ng-show="myForm.myInput.$error.minlength">输入长度太短</span>
  <span ng-show="myForm.myInput.$error.maxlength">输入长度太长</span>
</form>

在以上代码中，ng-minlength和ng-maxlength分别规定了输入的最小长度和最大长度，ng-blur中的checkValidity()会在失去焦点时进行验证，ng-show会在表单验证不通过时分别显示对应的提示信息。

点击提交验证

除了失去焦点验证外，AngularJS还提供了一种点击提交时进行表单验证的方式，适用于需要一次性提交多个表单元素的场景。具体步骤如下：

1. 在表单元素上添加ng-submit指令，绑定提交函数；
2. 在提交函数中，对表单元素进行验证，如$scope.myForm.$valid可以判断表单是否有效。

示例1：实现一个点击提交时的表单验证

HTML代码如下：

<form name="myForm" ng-submit="submitForm()">
  <input type="text" name="myInput" ng-model="myModel" ng-pattern="/^\d+$/">
  <span ng-show="myForm.myInput.$error.pattern">请输入数字</span>
  <button type="submit">提交</button>
</form>

在以上代码中，ng-submit会在点击提交按钮时触发submitForm()函数，$scope.myForm.$valid可以判断表单是否有效。

示例2：实现一个点击提交时验证多个表单元素的功能

HTML代码如下：

<form name="myForm" ng-submit="submitForm()">
  <input type="text" name="myName" ng-model="myName" ng-minlength="3" ng-maxlength="6">
  <span ng-show="myForm.myName.$error.minlength || myForm.myName.$error.maxlength">请输入3~6个字符</span>
  <input type="text" name="myAge" ng-model="myAge" ng-pattern="/^[1-9]\d*$/" ng-maxlength="3">
  <span ng-show="myForm.myAge.$error.pattern">请输入数字</span>
  <span ng-show="myForm.myAge.$error.maxlength">超出最大数字范围</span>
  <button type="submit">提交</button>
</form>

在以上代码中，ng-submit会在点击提交按钮时触发submitForm()函数，多个表单元素的验证通过$scope.myForm.$valid进行判断，相应的提示信息通过ng-show指令绑定表达式实现。