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


Posted in Javascript onApril 26, 2013

一、利用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('<li>' + v + '</li>');
                $('.e_' + k).html(v);
            });
        }
    }
}

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

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

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

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

现象二:

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

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

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

errorPlacement: function(error, element)
{
    error.appendTo(element.parent());
}
Javascript 相关文章推荐
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
JS实现带动画的回到顶部效果
Dec 28 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
element跨分页操作选择详解
Jun 29 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 #Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 #Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 #Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 #Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 #Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 #Javascript
同时使用n个window onload加载实例介绍
Apr 25 #Javascript
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
php简单复制文件的方法
2016/05/09 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
测试驱动开发的主要步骤是什么
2014/12/10 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
网上卖盒饭创业计划书范文
2014/02/07 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
高中军训感想
2015/08/07 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python