关于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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
JavaScript实现Excel表格效果
Feb 07 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php实现单链表的实例代码
2013/03/22 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
JS制作简单的三级联动
2015/03/18 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
详解ES6中的Map与Set集合
2019/03/22 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
python自动化测试实例解析
2014/09/28 Python
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
python append、extend与insert的区别
2016/10/13 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
python reverse反转部分数组的实例
2018/12/13 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Python求离散序列导数的示例
2019/07/10 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
python编程的核心知识点总结
2021/02/08 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
幼儿园六一儿童节活动方案
2014/08/26 职场文书
公司出纳岗位职责
2015/03/31 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
仙境之桥观后感
2015/06/16 职场文书
小学体育组工作总结2015
2015/07/21 职场文书