AngularJs功能（八）--表单验证

表单验证

表单验证是angularJS一项重要的功能，能保证我们的web应用不会被恶意或错误的输入破坏。Angular表单验证提供了很多表单验证指令，并且能将html5表单验证功能同他自己的验证指令结合起来使用，进而在客户端验证时提供表单状态的实时反馈。

要使用表单验证，首先保证表单有一个name属性，一般的输入字段如最大，最小长度等，这些功能由html5表单属性提供，如果我们想屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加novalidate标记。

实例

插入一段项目中注册的表单实例

//HTML
<form name="loginForm" class="login-form" novalidate="novalidate">
<div class="form-title">
    用户注册
</div>
<div class="form-group" ng-class="{'has-error': (loginForm.loginId.$touched || loginForm.$submitted) && loginForm.loginId.$invalid}">
    <div class="input-icon">
        <!-- '^0{0,1}(13[0-9]|(14[5|7])|(15([0-3]|[5-9]))|17[0-9]|(18[0,5-9]))[0-9]{8}$' -->
        <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="手机号/邮箱" ng-pattern="/(^1[0-9]{10}$)|(^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$)/i" name="loginId" ng-model="model.loginId" required ng-maxlength="20"/>
    </div>
    <div class="help-block" ng-show="(loginForm.$submitted || loginForm.loginId.$touched)&& loginForm.loginId.$invalid" ng-messages="loginForm.loginId.$error">
        <div ng-message="required">
            手机号或邮箱不能为空
        </div>
        <div ng-message="pattern">
            手机号或邮箱格式错误
        </div>
        <div ng-message="maxlength">
            手机号或邮箱长度不超过20位
        </div>
    </div>
</div>
<div class="form-group" ng-class="{'has-error': (loginForm.password.$touched || loginForm.$submitted) && loginForm.password.$invalid}">
    <div class="input-icon">
        <div class="input-group">
            <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="请输入验证码" name="password" ng-model="model.password" required ng-focus="hideErrorMsg()" ng-maxlength="20"/>
            <span class="input-group-addon active-btn" ng-if="!verificationCodeFlag" ng-click="getVerificationCode(loginForm)">获取动态验证码</span>
            <span class="input-group-addon" ng-if="verificationCodeFlag" ng-bind="'重新获取(' + second +')'" style="cursor:not-allowed;"></span>
        </div>
    </div>
    <div class="help-block" ng-show="(loginForm.$submitted || loginForm.password.$touched)&& loginForm.password.$invalid" ng-messages="loginForm.password.$error">
        <div ng-message="required">
            验证码不能为空
        </div>
        <div ng-message="maxlength">
            验证码长度不超过20位
        </div>
    </div>
    <div class="help-block" ng-if="registerResultStatus">
        <!--ng-bind-html="errorMessage"-->
        <div style="color: #f96827;font-size: 12px;">
            {{errorMessage}}
            <a ng-if="showLoginLinkFlag" href="../loginFront/redirecting.html" style="text-decoration:underline;">登录</a>
        </div>
    </div>
</div>
<div class="form-actions">
    <label class="checkbox">
    <input type="checkbox" id="agree" name="agree" ng-model="agree" ng-click="agreeOrCanel()"/>
    <label for="agree">我明白并同意</label>
    <a class="terms" href="javascript:void(0);" ng-click="showProtocal()">《橙色云设计服务条款》</a>
    </label>
    <button type="button" class="btn green-haze pull-right" ng-click="saveInfor(loginForm)" disabled id="registerCustom">
        注册
    </button>
</div>
</form>

 //注册 JS
 var registUrl = "/cds/w/user/register.do";
 $scope.saveInfor = function(form) {
     form.$submitted = true;
     if (!form.$valid) return;
     var param = {
         loginId: $scope.model.loginId,
         password: $scope.model.password
     };
     $resource(registUrl + '?' + $scope._urlParamEncode(param), null, {
         'registerUser': {
             method: 'POST'
         }
     }).registerUser(param).$promise.then(function(result) {
         if (result.status === 'success') {
             $window.location.href = "/cds/portal/index.html";
         } else {
             $scope.registerResultStatus = true;
             if (result.message && result.message.indexOf("已注册") > 0) {
                 var htmlMsg = '您的邮箱|手机号已注册，请直接';
                 //<a href="../loginFront/redirecting.html" style="text-decoration:underline;">登录</a>
                 $scope.showLoginLinkFlag = true;
                 $scope.errorMessage = $sce.trustAsHtml(htmlMsg);
             } else {
                 $scope.errorMessage = result.message;
             }

         }
     });
 };


//登录按钮是否禁用（同意条框）
 $scope.agreeOrCanel = function() {
     var checkedState = $('#agree').attr('checked'); //记录当前选中状态
     if (checkedState == 'checked') {
         $('#registerCustom').removeAttr('disabled');
     } else {
         $scope.agreeDisable = false;
         $('#registerCustom').attr('disabled', true);
     }
 }

代码放上来了。可以下大致看一下，发现和之前使用的有何不同之处。

下面我们列举表单中input元素上用到的验证选项，比如：
1.必填项，设置某个表单输入是否已经填写，只需要在输入字段元素上添加require标记即可。

<input type="text" required>

2.最小（大）长度，验证表单输入的文本长度是否大于某个最小值，可以使用ng-minlength指令（ng-maxlength指令）

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

3.模式匹配，使用ng-pattern来确保输入匹配指定的正则表达式

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

4.电子邮件，只需要把input的类型设置为email即可
数字，只需要将input的类型设置为number

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

在实例中，我们用到的是收拾好和邮箱都可验证登录，所以在匹配上的正则做文章。如下

<input type="text" autocomplete="off" placeholder="手机号/邮箱" 
ng-pattern="/(^1[0-9]{10}$)|(^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$)/i">

5.同样我们也可以根据自定义的属性指令来定义一些校验规则，这里不做详细介绍。上一段代码吧。

<input type="text" placeholder="username" name="usrename" ng-model="user.username" check-username="username">

app.directive('checkUsername', function($http) {
 return {
    link: function(scope, ele, attrs, c) {
        scope.$watch(attrs.ngModel, function(n) {
            if (!n) return;
            $http({
                method: 'POST',
                url: '/api/check/' + attrs.username,
                data: {
                    field: attrs.username,
                    value: scope.ngModel
                }
        }).success(function(data) {
                //code
            }).error(function(data) {
                //code
            })
        });
    }
}

});

验证规则

由于表单的属性可以在其$scope对象中访问到，而我们又可以直接访问到$scope，因此js可以间接的访问DOM的表单属性，借助这些属性，我们可以对表单做出实时响应。
这些属性有：

1.未修改的表单，用来判断用户是否修改了表单，如果修改了则为true，未修改则为false。

loginForm.loginId.$pristine

2.修改过的表单，只要用户修改过表单，无论输入是否通过验证，该值都将返回true

loginForm.loginId.$dirty

3.合法的表单，这个属性是用来判断表单的内容是否合法的，如果合法则该属性的值为true

loginForm.loginId.$valid

4.不合法的表单，这个属性与上个属性正好相反，如果不合法，则该属性值为true

loginForm.password.$invalid

5.错误，$error对象包含了当前表单的所有验证内容，以及它们是否合法的信息，如果验证失败，该属性值为true，如果验证成功，则该值为false

loginForm.password.$error

6.表单的提交验证。

loginForm.$submitted

给form加上name="loginForm"意味着表单的名称是loginForm。如何使用loginForm,比如我们验证表单是否被修改过loginForm.$submitted;

loginForm是$scope中的一个属性

ng-class根据注册状态和提交状态获取不同样式。

<div class="form-group" ng-class="{'has-error'：(loginForm.loginId.$touched || loginForm.$submitted) && loginForm.loginId.$invalid}">

验证提示

这是在angular1.3版本之后对angular表单验证的优化。它不再需要一个详细的表达式状态创建元素显示或隐藏。看看项目中的代码。

<div class="help-block" ng-show="(loginForm.$submitted || loginForm.loginId.$touched)&& loginForm.loginId.$invalid" ng-messages="loginForm.loginId.$error">
    <div ng-message="required">
        手机号或邮箱不能为空
    </div>
    <div ng-message="pattern">
        手机号或邮箱格式错误
    </div>
    <div ng-message="maxlength">
        手机号或邮箱长度不超过20位
    </div>
</div>

可以看出，angular通过$error来监视模型的变化，因为$error中包含了错误的详细信息，
用ng-message=""绑定验证类型。会根据$error错误类型提示错误信息。
同时，如果我们的应用场景中如果同时，有好几处错误，那么，上面代码按照ng-message的顺序只会显示一条错误信息，如果我们需要全部显示出来只需要添加 ng-messages-multiple。

 <div class="help-block" ng-messages="loginForm.loginId.$error" ng-messages-multiple>

这里只做范例介绍，小伙伴们在项目中合理运用就好。

AngularJs功能（八）--表单验证

表单验证

实例

验证规则

验证提示

叶为花而生

引用和评论

vsCode eslint

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号