关于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 相关文章推荐
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
js+css实现select的美化效果
Mar 24 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
微信小程序实现星星评分效果
Nov 01 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
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
linux下安装easy_install的方法
2013/02/10 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
python的常用模块之collections模块详解
2018/12/06 Python
python requests.post带head和body的实例
2019/01/02 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
python语言元素知识点详解
2019/05/15 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
高中生期末评语
2014/01/28 职场文书
企业管理标语
2014/06/10 职场文书
土地转让协议书
2014/09/27 职场文书
邀请函范文
2015/02/02 职场文书
家长意见书
2015/06/04 职场文书
2016教师节问候语
2015/11/10 职场文书