angularjs中form表单提交验证

angular.module("MyApp",["ngMessages"])；

<form name="formMyName" ng-submit="$ctrl.changePassword(formMyName)" ng-cloak novalidate>
　　<--输入新密码-->
　　<md-input-container md-no-float>
   　　<input name="newPassword" type="password" ng-model="$ctrl.data.newPassword" placeholder="请输入密码" 
　　　　　　ng-pattern='/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*(),.])[\da-zA-Z~!@#$%^&*(),.]{6,}$/'minlength="6" maxlength="20"required/>
　　　　//错误：$error
　　　　//用法：formMyName.指定所验证的input框的name.$error
　　　　//解释：当当前表单所有验证都通过时$error值为false表示验证通过，当所有验证中存在验证失败的情况，$error值为true，则验证不通过。
   　　<div class="errors" ng-messages="formMyName.newPassword.$error">
　　　　<--formMyName对应form表单name,newPassword对应input输入框name,ng-message验证的是form表单下name为newPassword的input框中ng-pattern、minlength、maxlength、required这些验证是否通过,
　　　　当验证不通过时$error为false就会执行ng-message-exp并显示下面的提示,反之当验证通过时$error为true。-->
       　　<div ng-message-exp=['required','minlength','maxlength','pattern']>
          　　您需要输入6-20位密码，且必须包括数字、大写字母、小写字母、非数字字符。
       　　</div>
　　　　</div
　　</md-input-container>

　　<--输入确认密码-->
　　<md-input-container md-no-float>
　　　　<input name="confirmPassword" type="password" ng-modal="$ctrl.data.confirmPassword" placeholder="请输入确认密码"/>
　　　　//表单提交时验证条件：$submitted
　　　　//用法：<p ng-if=“formMyName.$submitted $$ 验证条件”>错误提示</p>
　　　　<p ng-if="formMyName.$submitted && $ctrl.data.newPassword != $ctrl.data.confirmPassword">
　　　　　　确认密码必须和新密码一致
　　　　</p>
　　<--在这个地方确认密码只需要验证确认输入的密码和新密码是否一致就可以了,不需要再去验证最小、最大长度和是否必填那些，因为如果两次密码一致的话上面那些验证是一定通过的,如果两次密码不一致上面那些验证也就没有意义的,
　　　　然后我们可以看到,这里用的是ng-if进行的判断,但是ng-if不属于表单验证,所以后面我们需要用js再进行验证。我们看ng-if里面的条件，formMyName对应form表单name,$submitted表示的是当点击提交按钮时进行验证。-->
　　</md-input-container>

　　<md-button type="submit">
　　　　提交
　　</md-button>
</form>

angular.module('').controller('', [
    '$rootScope', '$mdDialog',
    function ($rootScope, $mdDialog) {
        var data = this.data = {
            Password: null,
            ConfirmPassword: null
        };
　　　　//修改密码
        this.changePassword = function (changePasswordForm) {
　　　　//验证输入内容有没有通过表单验证
　　　　//验证确认密码与新密码是否一致
　　　　　　　　//未通过验证的表单：$invalid
　　　　　　　　//用法：formMyName.$invalid或者formMyName.指定所验证的某个input框的name.$invalid
　　　　　　　　//解释：当表单未通过验证时，值为true，反之测为false。
if (formMyName.$invalid || data.Password != data.ConfirmPassword) {
                return
            }
            $mdDialog.hide(data.Password);
        };
    }
]);

　　

转载于:https://www.cnblogs.com/ncloud/p/7894514.html