jquery validate验证

官网地址:jquery.validate.min.js

引入文件
1:jquery.validate.min.js  
下载地址:https://gitee.com/jianggangsheng/static_resources/blob/master/js/jqueryValidate/jquery.validate.min.js


2:jquery.validate.messages_zh.min.js//汉化包
下载地址:https://gitee.com/jianggangsheng/static_resources/blob/master/js/jqueryValidate/jquery.validate.messages_zh.min.js


HTML代码

<form class="am-form" id='addcheck' method="post">
    <button type="submit">确定</button>
</form>

JS代码

// 修改密码验证
var addcheckForm = $("#addcheck")
addcheckForm.validate({
    errorElement: 'span', //default input error message container
    errorClass: 'am-form-label', // default input error message class
    // focusInvalid: false, // do not focus the last invalid input
    // ignore: "",
    rules: {
        phone: {
            required: true,//必填
            mobile:true,//自定义验证
            remote: {//异步验证
                type: "post",
                url: "phone_check",
                data: {
                    key: function() {
                        return $("#exampleInputEmail").attr('name');
                    },
                    value: function() {
                        return $("#exampleInputEmail").val();
                    },
                },
                dataType: "JSON",
                dataFilter: function(data, type) {
                    var data = JSON.parse(data)
                    if (data.code == -13)
                        return false;
                    else
                        return true;
                }
            }
        },
    },
    messages: {
        phone: {
            remote:"手机号已存在"
        },
    },
    highlight: function (element) {
        $(element).closest('.am-form-group').addClass('am-form-error');
    },
    success: function (label) {
        label.closest('.am-form-group').removeClass('am-form-error');
    },
    errorPlacement: function(error, element) {
        if(element.parent().prop('className') == 'am-input-group'){
            var ele = element.parent()
            error.insertAfter(ele);
        }else{
            error.insertAfter(element);
        }
    },
    submitHandler:function(form){
        var addUserData = addcheckForm.serialize().split('&')
        var arr =[]
        addUserData.map(function(v,i){
            var a = v.split('=')
            arr[a[0]] = a[1]
        })
 
        addcheckForm.ajaxSubmit({
            type: 'POST',
            dataType: 'JSON',
            url: "user_add",
            data: {
                
            },
            beforeSubmit: function() {
                $('.add-user-btn').removeClass('am-text-primary').prop('disabled', true).text('提交中..');
            },
            error: function() {
                $('.add-user-btn').addClass('am-text-primary').prop('disabled', false).text('确定');
            },
            success: function(response) {
                if(response.code == 1){
                    console.log('添加成功')
                    $('.add-user-btn').addClass('am-text-primary').prop('disabled', false).text('确定');
                }else{
                    console.log('添加失败')
                $('.add-user-btn').addClass('am-text-primary').prop('disabled', false).text('确定');

                }
            }
        })
    },
});
//自定义验证
jQuery.validator.addMethod("mobile", function(value, element) { 
    // var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/; 
    var tel = /^1(3|4|5|7|8)\d{9}$/;
    return this.optional(element) || (tel.test(value)); 
}, "电话号码格式错误");
发表新评论