angularjs中form表单提交验证

Posted 2020-10-15 芒果加冰

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])(?=.*[[email protected]#$%^&*(),.])[\[email protected]#$%^&*(),.]{6,}$/‘minlength="6" maxlength="20"required/>
   　　<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="请输入确认密码"/>
　　　　<div ng-if="formMyName.$submitted && $ctrl.data.newPassword != $ctrl.data.confirmPassword">
　　　　　　确认密码必须和新密码一致
　　　　</div>
　　<--在这个地方确认密码只需要验证确认输入的密码和新密码是否一致就可以了,不需要再去验证最小、最大长度和是否必填那些，因为如果两次密码一致的话上面那些验证是一定通过的,如果两次密码不一致上面那些验证也就没有意义的,
　　　　然后我们可以看到,这里用的是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) {
　　　　//验证输入内容有没有通过表单验证
　　　　//验证确认密码与新密码是否一致
            if (changePasswordForm.$invalid || data.Password != data.ConfirmPassword) {
                return
            }
            $mdDialog.hide(data.Password);
        };
    }
]);