angular-validation表单验证插件的用法

Posted 2021-04-26 同学们听我说

javascript

angular.module('app').config(['$validationProvider', function ($validationProvider) {
    var expression = {
        required: function (val) {
            return !!val;
        },
        phone:  /^1(3|4|5|7|8)\d{9}$/,
        password: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,18}$/
    };
    var defaultMsg = {
        required: {
            success: '',
            error: '不能为空'
        },
        phone: {
            success: '',
            error: '请输入正确的手机号码'
        },
        password: {
            success: '',
            error: '6-18位字母数字组合密码'
        }
    }
    $validationProvider.setExpression(expression).setDefaultMsg(defaultMsg);
}]);

html

<form name="form">
    <ul>
        <li>
            <input type="text" placeholder="已验证手机/邮箱" name="phone" ng-model="user.phone" validator="required, phone" maxlength="11">
        </li>
        <li>
            <input type="password" placeholder="密码" maxlength="18" name="password" ng-model="user.password" validator="required, password">
        </li>
    </ul>
    <button class="login-btn" validation-submit="form" ng-click="submit()">登录</button>
</form>

 

<form> 添加 name,

 

input 表单插件添加 name, ng-model, validator 属性,

 

验证触发按钮添加 validation-submit 属性。

 

验证通过才会触发 <button> 的 ng-click 事件。