jquery validate使用攻略 第四步

默认情况下，验证提示信息用label元素来显示, 并且会添加css class, 通过css可以很方便设置出错控件以及错误信息的显示方式。

/* 输入控件验证出错*/
form input.error { border:solid 1px red;}

/* 验证错误提示信息*/
form label.error{width: 200px;margin-left: 10px; color: Red;}

如果想自定义显示方式，可以修改jquery.validate的默认显示方式

默认用label显示错误消息，可以通过errorElement属性来修改
errorElement: 错误消息的html标签

$(".selector").validate
errorElement: "em"
})

可以在出错信息外用其他的元素包装一层。
wrapper: 错误消息的外层封装html标签

$(".selector").validate({
wrapper: "li"
})

验证出错的css class默认是error，通过errorClass可以修改
errorClass: 验证出错时使用的css class

$(".selector").validate({
errorClass: "invalid"
})

还自定义验证成功时的动作
success: 如果值是字符串，会当做一个css类，如果是一个函数，则执行该函数

$(".selector").validate({
success: "valid"
})

或者

success: function(label) {
label.html(" ").addClass("checked");
}

还可以把错误消息统一到一个容器显示
errorLabelContainer: 将错误消息统一到一个容器显示

$("#myform").validate({
errorLabelContainer: "#messageBox"
})

默认情况下，错误消息是放在验证元素后面的，可以自定义错误消息的显示位置

$(".selector").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
}
})

更进一步可以定义一个组，把几个地方的出错信息统一放在一个地方，用error Placement控制把出错信息放在哪里
groups：定义一个组

$(".selector").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname" )
error.insertAfter("#lastname");
else
error.insertAfter(element);
}
})

高亮显示
highlight: 高亮显示，默认是添加errorClass
unhighlight: 和highlight对应，反高亮显示

$(".selector").validate({
highlight: function(element, errorClass) {
$(element).addClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
}
});

或者可以完全自定义错误显示
showErrors: 得到错误的显示句柄

$(".selector").validate({
showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids()
+ " errors, see details below.");
this.defaultShowErrors();
}
})

赞 (0)

相关推荐

  • 基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

  • jQuery.Validate验证库的使用介绍

    jQuery.Validate验证库的使用介绍

    jQuery.Validate验证库1.下载jquery.validate,这里我提供jquery-validation-1.9.0,点击下载 默认校验规则 复制代码 代码如下: (1)required:true               必输字段(2)remote:"check.php"          使用ajax方法调用check.php验证输入值(3)email:true                  必须输入正确格式的电子邮件(4)url:true          

  • jquery.validate使用攻略 第一部

    主要分几部分 jquery.validate 基本用法 jquery.validate API说明 jquery.validate 自定义 jquery.validate 常见类型的验证代码 下载地址 jquery.validate插件的文档地址 http://docs.jquery.com/Plugins/Validation jquery.validate插件的主页 http://bassistance.de/jquery-plugins/jquery-plugin-validation/

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • jQuery validate 中文API 附validate.js中文api手册

    名称 返回类型 描述 validate(options) 返回:Validator 验证所选的FORM valid() 返回:Boolean 检查是否验证通过 rules() 返回:Options 返回元素的验证规则 rules("add",rules) 返回:Options 增加验证规则 rules("remove",rules) 返回:Options 删除验证规则 removeAttrs(attributes) 返回:Options 删除特殊属性并且返回他们 C

  • jQuery EasyUI API 中文文档 - ValidateBox验证框

    jQuery EasyUI API 中文文档 - ValidateBox验证框

    用 $.fn.validatebox.defaults 重写了 defaults. 用法 复制代码 代码如下: <input id="vv" required="true" validType="email"> 复制代码 代码如下: $('#vv').validatebox({ required:true }); 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email

  • jQuery.Validate 使用笔记(jQuery Validation范例 )

    验证操作类formValidatorClass.js 复制代码 代码如下: /** * @author ming */ $(document).ready(function(){ /**//* 设置默认属性 */ $.validator.setDefaults({ submitHandler: function(form) { form.submit(); } }); // 字符验证 jQuery.validator.addMethod("stringCheck", function(

  • 深入学习jQuery Validate表单验证（二）

    本文实例介绍了jQuery Validate表单验证,分享给大家供大家参考,具体内容如下 一.添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. /* * Translated default messages for the jQuery validation plugin. * Language: CN * Author: Fayland Lam <fayland at gmail dot com> */ jQuery.extend(jQ

  • jquery validate使用攻略 第四步

    默认情况下,验证提示信息用label元素来显示, 并且会添加css class, 通过css可以很方便设置出错控件以及错误信息的显示方式. /* 输入控件验证出错*/ form input.error { border:solid 1px red;} /* 验证错误提示信息*/ form label.error{width: 200px;margin-left: 10px; color: Red;} 如果想自定义显示方式,可以修改jquery.validate的默认显示方式 默认用label显示

  • jquery.validate使用攻略 第五步 正则验证

    // 手机号码验证 jQuery.validator.addMethod("mobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ return this.optional(element) || (length == 11 && mobile.test(value)); }, "手机号

  • jquery.validate使用攻略 第三部

    1: 自定义表单提交 设置submitHandler来自定义表单提交动作 $(".selector").validate({ submitHandler: function(form) { alert("验证通过"); } }); 如果需要提交表单,可以调用 form.submit(); 或者$(form).ajaxSubmit(); 2: 调试模式 将debug设置为true,表单不会提交,只进行检查,方便调试 $(".selector").v

  • jquery.validate使用攻略 第二部

    Plugin methodsName Type validate( options ) Returns: Validator 验证所选的FORM valid( ) Returns: Boolean 检查是否验证通过 rules( ) Returns: Options 返回元素的验证规则 rules( "add", rules ) Returns: Options 增加验证规则 rules( "remove", rules ) Returns: Options 删除验

  • php面向对象全攻略 （四）构造方法与析构方法

    8.构造方法与析构方法 大多数类都有一种称为构造函数的特殊方法.当创建一个对象时,它将自动调用构造函 数,也就是使用new 这个关键字来实例化对象的时候自动调用构造方法. 构造函数的声明与其它操作的声明一样,只是其名称必须是__construct( ).这是PHP5 中 的变化,以前的版本中,构造函数的名称必须与类名相同,这种在PHP5 中仍然可以用,但 现在以经很少有人用了,这样做的好处是可以使构造函数独立于类名,当类名发生改变时不 需要改相应的构造函数名称了.为了向下兼容,如果一个类中没有名

  • Apache服务器配置攻略2

    Apache服务器配置全攻略(三)主服务器设置 Apache服务器需要各种设置,以定义自己使用各种参数以提供Web服务.对于使用虚拟主机的情况,除了在虚拟主机的定义项中覆盖的设置之外(有的设置必须重新定义),这里的设置也是虚拟主机的缺省设置. Port 80 Port定义了Standalone模式下httpd守护进程使用的端口,标准端口是80.这个选项只对于以独立方式启动的服务器才有效,对于以inetd方式启动的服务器则在inetd.conf中定义使用哪个端口. 在Unix下使用80端口需要ro

  • 利用注册表限制特定程序运行—注册表使用全攻略之十四

    利用注册表限制特定程序运行-注册表使用全攻略之十四 对于一些与系统密切相关的程序,如果随意让其他人使用,非常容易造成死机甚至系统崩溃.通过系统本身的注册表来限制特定程序的运行. 1.一键锁通关 我们要做的是在注册表中加入"RestrictRun"键值,以此来限制绝大多数程序的运行 . 运行"Regedit"打开注册表编辑器,展开HKEY_CURRENT_USER＼Software＼Microsoft＼Windows＼CurrentVersion＼Policies＼E

  • linux下安装apache与php;Apache+PHP+MySQL配置攻略

    1.apache  在如下页面下载apache的for Linux 的源码包   http://www.apache.org/dist/httpd/;  存至/home/xx目录,xx是自建文件夹,我建了一个wj的文件夹. 命令列表:   cd /home/wj  tar -zxvf httpd-2.0.54.tar.gz mv httpd-2.0.54 apache  cd apache  ./configure --prefix=/usr/local/apache2 --enable-mod

  • 游戏私服安全攻防技巧全攻略之攻击篇

    前几天,本私服也同样遭受过黑客的攻击!但是研究了几次发现了漏洞的所在! 下面我先写如何入侵计算机的,我用的是WINDOWS 2000 SEVER 1 X-SCAN扫描IP 看看谁是弱口令(IP也非常容易得到,私服都有,弱口令就是用户名和密码都是系统默认的,没有改.) 2 打开DOS系统 在DOS下进行*作! c:/>net use \\192.168.0.1\ipc$ /user:administrator 进入对方计算机USER进入的就是管理员用户. 进入了以后就好办了,可以找你要黑的私服!做

随机推荐