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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了关于jquery.validate1.9.0前台验证的使用介绍_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2351字，纯文字阅读大概需要4分钟。

内容图文

一、利用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('

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


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

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

    关于jquery.validate1.9.0前台验证的使用介绍_jquery - 文章图片

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

    现象二：

    关于jquery.validate1.9.0前台验证的使用介绍_jquery - 文章图片

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

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

    代码如下:

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

    内容总结

    以上是互联网集市为您收集整理的关于jquery.validate1.9.0前台验证的使用介绍_jquery全部内容，希望文章能够帮你解决关于jquery.validate1.9.0前台验证的使用介绍_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

    内容备注

    版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

    内容手机端

    扫描二维码推送至手机访问。

    本文链接：https://qyyshop.com/info/316600.html

    来源：【匿名】