JqueryValidata使用方法

引入JS：

<script type="text/javascript" src="__ADMIN__/validatas/jquery-1.11.1.js"></script>
<script type="text/javascript" src="__ADMIN__/validatas/jquery.validate.js"></script>

示例：

<script>
    $(function () {
        //自定义验证文件方法
        jQuery.validator.addMethod("files", function (value, element, params) {
            var reg = new RegExp("\.(" + params + ")$", "i");
            return reg.test(value);
        }, $.validator.format("文件类型必须为{0}"));

        //自定义验证账号方法
        jQuery.validator.addMethod("isaccount", function (value, element, params) {
            var reg = new RegExp("^[^0-9][a-z0-9_]{6,18}$", "i");
            return reg.test(value);
        }, "账号不合法");

        //自定义手机号码验证
        jQuery.validator.addMethod("phones", function (value, element, params) {
            var reg = new RegExp("^[1][3,4,5,7,8][0-9]{9}$", "i");
            return reg.test(value);
        }, "手机号码不正确");


        $("#ff1").validate({
            debug: false, //调试模式 false 阻止表单提交
            onkeyup: false, //禁用键盘抬起ajax请求
            errorElement: 'span', //设置错误提示标签
            success: function (span) { //成功后的样式
                $(span).attr('class', 'ok').prev('input').css({
                    'border': '1px solid #3c763d'
                });
            },
            errorPlacement: function (span, element) {
                $(element).siblings().remove('span');
                $(element).parent().append(span); //错误消息追加到父元素最后
            },
            //验证规则
            rules: {
                //验证字段
                name: {
                    //必填
                    required: true,
                },
                email: {
                    required: true,
                    email: true,
                    //ajax远程验证 POST 提交解决ie缓存问题
                    remote: {
                        url: "{:url('getemail')}",
                        type: "POST"
                    }
                },
                age: {
                    required: true,
                    number: true,
                    max: 60,
                },
                password: {
                    required: true,
                    rangelength: [6, 12] //范围验证 6-12位
                },
                repassword: {
                    required: true,
                    equalTo: "#pass" //确认密码 #pass是密码框的id
                },
                city: {
                    required: true,
                },
                like: {
                    required: true,
                },
                files: {
                    required: true,
                    //自定义验证方法
                    files: "jpeg|jpg|png|gif"
                },
                account: {
                    required: true,
                    isaccount: $("#account").val()
                },
                phone: {
                    required: true,
                    phones: $("#phone").val()
                }

            },
            //自定义验证消息
            messages: {

                name: {
                    //必填
                    required: "姓名不能为空",
                },
                email: {
                    required: "邮箱不能为空",
                    email: "邮箱格式不正确",
                    remote: "邮箱名称被占用"
                },
                age: {
                    required: "年轻不能为空",
                    number: "年龄必须是有效数字",
                    max: "年龄不能超过岁"
                },
                password: {
                    required: "密码不能为空",
                    rangelength: $.validator.format("密码必须在{0}--{1}之间")
                },
                repassword: {
                    required: "确认密码不能为空",
                    equalTo: "两次输入的密码不一致" //确认密码 #pass是密码框的id
                },
                city: {
                    required: "所选城市不能为空",
                },
                like: {
                    required: "请选择一个爱好",
                },
                files: {
                    required: "请上传文件",
                },
                account: {
                    required: "账号不能为空",
                },
                phone: {
                    required: "手机号不能为空",
                }
            }
        });
    });
</script>

中文提示：

$.extend($.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    minlength: $.validator.format("最少要输入 {0} 个字符"),
    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")
});

表单模拟提交:

//http://malsup.com/jquery/form/  ajaxForm 插件下载地址
//表单提交
$.validator.setDefaults({
    submitHandler: function(form) {
        //模拟 submit 提交
        jQuery(form).ajaxSubmit({
            type:"POST",
            dataType:"JSON",
            url:$(this).attr('action'),

            beforeSubmit:function (formData,jqForm,options) {
                $("button[type=submit]").html('登录中...').attr('disabled','disabled');
                layer.msg('数据验证中...', {icon: 16,shade: 0.01});
            },

            success:function (response,status) {

                var icon = response.status==202 ? 2 : 1;

                if(response.status==202 || response.status==200) {

                    layer.msg(response.message,{icon:icon});

                    $("button[type=submit]").html('登录').attr('disabled',false);

                    if(response.url!='') {
                        window.location.href=response.url;
                    }

                    //$("#login").resetForm(); 清空form表单值
                }
            },
            error:function (data) {
                layer.msg('网络错误!',{icon:2});
                $("button[type=submit]").html('登录').attr('disabled',false);
            }
        });
    }
});

转载于:https://my.oschina.net/u/3483680/blog/1822241