angular表单验证

借助AngularJS，我们不需要花太多额外的精力就可以轻松实现客户端表单验证功能。虽然 Web应用安全不能完全依赖客户端验证，但客户端验证可以提供表单状态的实时反馈。
要使用表单验证，首先要确保表单有一个name属性。
所有输入字段都可以进行基本的验证，比如最大、最小长度等。这些功能是由新的HTML5 表单属性提供的。
如果想要屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加novalidate标记。
下面看一下可以在input元素上使用的所有验证选项。

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

   <input type="text" required />

2. 最小长度
   验证表单输入的文本长度是否大于某个最小值，在输入字段上使用AngularJS指令ng-minleng= "{number}"：

   <input type="text" ng-minlength="5" />

3. 最大长度
   验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用AngularJS指令 ng-maxlength="{number}"：

   <input type="text" ng-maxlength="20" />

4. 模式匹配
   使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：

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

5. 电子邮件
   验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：

   <input type="email" name="email" ng-model="user.email" />

6. 数字
   验证输入内容是否是数字，将input的类型设置为number：

   <input type="number" name="age" ng-model="user.age" />

7. URL
   验证输入内容是否是URL，将input的类型设置为 url：

   <input type="url" name="homepage" ng-model="user.facebook_url" />

8. 在表单中控制变量
   表单的属性可以在其所属的$scope对象中访问到，而我们又可以访问$scope对象，因此 JavaScript可以间接地访问DOM中的表单属性。借助这些属性，我们可以对表单做出实时（和 AngularJS中其他东西一样）响应。这些属性包括下面这些。

   未修改的表单    formName.inputFieldName.$pristine   
      这是一个布尔属性，用来判断用户是否修改了表单。如果未修改，值为true，如果修改过值为false；
       
      修改过的表单    formName.inputFieldName.$dirty
      只要用户修改过表单，无论输入是否通过验证，该值都返回true：
       
      合法的表单     formName.inputFieldName.$valid
      这个布尔型的属性用来判断表单的内容是否合法。如果当前表单内容是合法的，下面属性的 值就是true：
       
      不合法的表单    formName.inputFieldName.$invalid 
      这个布尔属性用来判断表单的内容是否不合法。如果当前表单内容是不合法的，下面属性的 值为true：
       
      错误   formName.inputfieldName.$error
      如果验证失败，这个属性的值为true；如果值为false，说明输入字段的值通过了验证。

   下面结合具体的例子，来运用上面的属性

<form novalidate="novalidate" name="myForm">
        <div>
            <label>用 户 名：</label>
            <input type="text" 
                    name="user" 
                    placeholder="请输入你的用户名" 
                    ng-model="user"
                    ng-maxlength="10"
                    ng-minlength="5"
                    required 
            ></br>
        </div>
        <div class="check">
            <p class="error" ng-if="myForm.user.$error.required && myForm.user.$touched">用户名不能为空</p>
            <p class="error" ng-if="myForm.user.$error.maxlength || myForm.user.$error.minlength">    
                用户名长度应该在5-10位之间
            </p>
        </div>
        <div>
            <label>密    码：</label>
            <input type="password"
                     name="paw"
                      placeholder="******"
                       ng-model="paw"
                       ng-minlength="6"
                       ng-maxlength="10"
                       required 
             ></br>
        </div>
        <div class="check">
            <p class="error" ng-if="myForm.paw.$error.required && myForm.paw.$touched">
                密码不能为空
            </p>
            <p class="error" ng-if="myForm.paw.$error.maxlength || myForm.paw.$error.minlength">    
                密码长度应该在6-10位之间
            </p>
        </div>
        <div>
            <label>重复密码：</label>
            <input type="text"
                     name="repaw"
                     placeholder="******"
                       ng-model="repaw"
             ></br> 
        </div>
        <div class="check"> 
            <p class="error" ng-if="repaw!=paw && myForm.paw.$touched">
                两次密码输入不一致
            </p>
        </div>
        <div>
            <label>邮&nbsp;箱：</label>
            <input type="mail"
                     name="mail"
                      placeholder=""
                       ng-model="mail"
                       ng-pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$"
            ></br>
        </div>
        <div class="check">
            <p class="error" ng-if=" myForm.phone.$error.pattern && myForm.phone.$touched">
                邮箱格式错误
            </p>
        </div>
        <div>
            <label>手机号码：</label>
            <input type="text"
                     name="phone"
                      placeholder="请输入手机号码"
                       ng-model="phone"
                       ng-pattern="/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/"
            ></br>
        </div>
        <div class="check">
            <p class="error" ng-if=" myForm.phone.$error.pattern && myForm.phone.$touched">
                手机号码格式错误
            </p>
        </div>
        <input type="submit"
                 name="sub"
                  value="提交"
                  ng-submit="submit"
        >
    </form>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!