angularjs的form手动验证

当用户从前端输入信息之后，给用户直接的视觉反馈是非常重要的。表单验证不仅提供了视觉上的反馈，而且还能保证用户输入的正确性，从前端为后台提供尽可能多的保护。

以下记录一下，在我工作中使用的一些form验证的示例。

以代码为例，进行举例说明：

<form name="registerForm" novalidate>
                <div class="oneTagInfo">
                    <div class="tagTextDescribe">
                        <span class="redFont">*</span>名称
                    </div>
                    <div class="tagInfoInput">
                        <div class="myInputDiv">
                            <input type="text" class="myInput" placeholder="长度小于10的昵称" name="nickName" ng-maxlength="10" ng-model="nickName" required>
                            <div class="inputToolBar">
                                <div class="okMark" ng-show="registerForm.nickName.$valid && registerForm.nickName.$dirty"><i class="glyphicon glyphicon-ok"></i></div>
                                <div class="cancleContent" ng-hide="registerForm.nickName.$error.required" ng-click="cancleContent($event,'nickName')"><i class="glyphicon glyphicon-remove"></i></div>
                            </div>
                        </div>
                        <span class="errorMsg redFont" ng-show="registerForm.nickName.$invalid && registerForm.nickName.$dirty">
                            <span ng-show="registerForm.nickName.$error.required">请输入您的昵称名</span>
                            <span ng-show="registerForm.nickName.$error.maxlength">昵称长度不能超过10</span>
                        </span>
                    </div>

                </div>
                <div class="oneTagInfo">
                    <div class="tagTextDescribe">
                        <span class="redFont">*</span>登录密码
                    </div>
                    <div class="tagInfoInput">
                        <div class="myInputDiv">
                            <input type="password" class="myInput" placeholder="长度为6-15位,只能包含数字和字母" name="password" ng-minlength="6" ng-maxlength="15" ng-pattern="/[0-9a-zA-Z]/" ng-model="password" required>
                            <div class="inputToolBar">
                                <div class="okMark" ng-show="registerForm.password.$valid && registerForm.password.$dirty"><i class="glyphicon glyphicon-ok"></i></div>
                                <div class="cancleContent" ng-hide="registerForm.password.$error.required" ng-click="cancleContent($event,'password')"><i class="glyphicon glyphicon-remove"></i></div>
                            </div>
                        </div>
                        <span class="errorMsg redFont" ng-show="registerForm.password.$invalid && registerForm.password.$dirty">
                            <span ng-show="registerForm.password.$error.required">请输入您的密码</span>
                            <span ng-show="registerForm.password.$error.minlength">密码长度不小于6</span>
                            <span ng-show="registerForm.password.$error.maxlength">密码长度不能超过15</span>
                            <span ng-show="registerForm.password.$error.pattern">密码包含非法字符</span>
                        </span>
                    </div>
                </div>
                <div class="oneTagInfo">
                    <div class="tagTextDescribe">
                        <span class="redFont">*</span>确认密码
                    </div>
                    <div class="tagInfoInput">
                        <div class="myInputDiv">
                            <input type="password" class="myInput" name="passwordagain" placeholder="重复密码" ng-model="passwordagain" required>
                            <div class="inputToolBar">
                                <div class="okMark" ng-show="registerForm.passwordagain.$valid && registerForm.passwordagain.$dirty"><i class="glyphicon glyphicon-ok"></i></div>
                                <div class="cancleContent" ng-hide="!passwordagain" ng-click="cancleContent($event,'passwordagain')"><i class="glyphicon glyphicon-remove"></i></div>
                            </div>
                        </div>
                        <span class="errorMsg redFont" ng-show="registerForm.password.$valid  && registerForm.passwordagain.$dirty">
                            <span ng-show="passwordagain != password">俩次输入不一样</span>
                        </span>
                    </div>
                </div>
                <div class="oneTagInfo">
                    <div class="tagTextDescribe">
                        <span class="redFont">*</span>手机号
                    </div>
                    <div class="tagInfoInput">
                        <div class="myInputDiv">
                            <input type="text" class="myInput" placeholder="手机号" ng-model="phoneNum" name="phoneNum" ng-pattern="/^1[34578]\d{9}$/" required>
                            <div class="inputToolBar">
                                <div class="okMark" ng-show="registerForm.phoneNum.$valid && registerForm.phoneNum.$dirty"><i class="glyphicon glyphicon-ok"></i></div>
                                <div class="cancleContent" ng-hide="registerForm.phoneNum.$error.required " ng-click="cancleContent($event,'phoneNum')"><i class="glyphicon glyphicon-remove"></i></div>
                            </div>
                        </div>
                        <span class="errorMsg redFont" ng-show="registerForm.phoneNum.$invalid && registerForm.phoneNum.$dirty">
                            <span ng-show="registerForm.phoneNum.$error.required">请输入您的手机号码</span>
                            <span ng-show="registerForm.phoneNum.$error.pattern">手机号码有误,请重新输入</span>
                        </span>
                    </div>
                </div>
                <div class="oneTagInfo">
                    <div class="submitBtn" ng-class="{'disabledSub':registerForm.$invalid||passwordagain != password}" ng-click="submitRegInfo()">
                        提交
                    </div>
                </div>

            </form>

1.为form表单命名为registerFrom，angularjs解析之后，registerFrom成为一个$scope 的对象。

2.novalidate关闭HTML5的验证

3.为<input>提供需要满足的条件，angularjs提供一下几种方式：

1. require  必须输入，不能为空

2. ng-minlength/ng-maxlength 最小长度和最大长度

3.ng-pattern  需要满足的正则表达式

4.表单的几种状态：

1. formName.inputName.$invalid  该input框验证失败

2. formName.inputName.$valid  该input框验证成功

3. formName.inputName.$dirty 布尔型属性，当且仅当用户实际已经修改的表单。不管表单是否通过验证

4. formName.inputName.$invalid 布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

5. forName.inputName.$error  错误  包含当前表单的所有验证内容，以及它们是否合法的信息

5.当表单输入验证不通过时，起绑定的ng-modal值为“”；

6.angularjs为验证出现错误后，自动添加一些css类，如下：

.ng-valid         {  }
.ng-invalid     {  }
.ng-pristine     {  }
.ng-dirty         {  }
/* really specific css rules applied by angular */
.ng-invalid-required         {  }
.ng-invalid-minlength         {  }
.ng-valid-max-length         {  }

可以根据自己添加喜欢的样式。

只是个人觉得这个方式比较方便，记录下来，分享一下，请多多指教。