关于jquery.validate1.9.0前台验证的使用介绍

关于jquery.validate1.9.0前台验证的使用介绍_jquery

php中文网

发布： 2016-05-16 17:35:13

原创

1288人浏览过

一、利用jquery.form插件提交表单方法使用jquery.validate插件

现象：当提交表单时，即使前台未验证通过，也照常提交表单。

解决办法：

复制代码代码如下:

$('#myForm').submit(function(){
    if (!$(this).valid()) return false;//加上此句OK
    $('.error').html('');
    $("#go").prop("disabled",true);
    $(this).ajaxSubmit({
        type:"POST",
        //beforeSubmit: showRequest,
        dataType:'json',
        success: showResponse
    });
    return false;
});

相关说明：

定制提交方式(ajax提交)
如果使用ajax方式提交，那请采用如下两种方式和校验框架结合
1)、使用submitHandler属性配置ajax提交，submithandler：当表单全部校验通过之后会回调配置的代码，此处也就是当校验通过之后调用ajax提交。
2)、使用valid方法，监听form的submit事件，当$('#form').valid()返回true的时候再提交。

通过监听form的submit事件，对form进行ajax提交。示例完整代码如下：

复制代码代码如下:

$(document).ready(function(){

    $('#myForm').submit(function(){
        if (!$(this).valid()) return false;
        $('.error').html('');
        $("#go").prop("disabled",true);
        $(this).ajaxSubmit({
            type:"POST",
            //beforeSubmit: showRequest,
            dataType:'json',
            success: showResponse
        });
        return false;
    });

    var validator = $("#myForm").validate({
        rules: {
            username: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            username: "请输入姓名",
            email: {
                required: "请输入Email地址",
                email: "请输入正确的email地址"
            }
        }
    });

});

function showResponse(jsonData,statusText)
{
    if(statusText=='success')
    {
        $("#go").prop("disabled",false);
        if (jsonData.status == 1)
        {
            $("#return").html(jsonData.message);
        }
        else
        {
            $.each(jsonData.errors, function(k,v){
                //$('#output').find('ul').append('

西安二手网

功能介绍：1：强大的用户管理面版2：分为无需注册的免费发布和VIP注册发布/管理两个系统功能3：注册简便，发布信息管理信息等都相当简单4：用户积分制度5：加入 4 个非常实用的道具(在后台设置道具参数) 标题变色道具（改变标题颜色）信息置顶道具（能使发布信息置顶，使用个数越多，位置越高）内容贴图道具（可以发和信息相关的图片）通过验证道具（可不通过管理员审核，直

查看详情

' + v + '

');
                $('.e_' + k).html(v);
            });
        }
    }
}

二、控制错误信息位置的方法
现象一：

我在注册表单新加了一个验证码。验证结果错误时，这个错误信息跑到验证码前面去了。如下图所示：

目的：让错误信息在验证码后面

现象二：

上图中的红色提示内容，我想移到 (* 必填) 的后面。

上面两个现象，可通过jquery.validate自带的控制错误信息位置的方法——'errorPlacement'，使用也很方便：

复制代码代码如下:

errorPlacement: function(error, element)
{
    error.appendTo(element.parent());
}

大家都在看：

防止重复绑定：深入理解jQuery事件的on()与off()方法解决JavaScript/Web设置Cookie过期时间不生效的问题 jQuery事件绑定：深度解析on()与off()管理重复事件监听器理解 jQuery 中事件的解绑与绑定：避免重复监听器的最佳实践 jQuery Mask插件：为电话号码输入框添加不可移除的前导零