jquery.validate详解二
五、常用方法及注意问题
1.用其他方式替代默认的SUBMIT
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
});
可以设置validate的默认值,写法如下:
$.validator.setDefaults({
submitHandler: function(form) {
alert("submitted!");form.submit(); }
});
如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
2.debug,只验证不提交表单
如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});
如果一个页面中有多个表单都想设置成为debug,用
$.validator.setDefaults({
debug: true
})
3.ignore:忽略某些元素不验证
ignore: ".ignore"
4.更改错误信息显示的位置
errorPlacement:Callback
Default:
把错误信息放在验证的元素后面
指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement: function(error, element)
{
error.appendTo(element.parent());
}
//示例:
<tr>
<td
class="label"><label id="lfirstname"
for="firstname">First
Name</label></td>
<td
class="field"><input id="firstname"
name="firstname" type="text" value="" maxlength="100"
/></td>
<td
class="status"></td>
</tr>
<tr>
<td style="padding-right:
5px;">
<input id="dateformat_eu" name="dateformat"
type="radio" value="0" />
<label id="ldateformat_eu"
for="dateformat_eu">14/02/07</label>
</td>
<td style="padding-left: 5px;">
<input id="dateformat_am" name="dateformat"
type="radio" value="1" />
<label id="ldateformat_am"
for="dateformat_am">02/14/07</label>
</td>
<td></td>
</tr>
<tr>
<td
class="label"> </td>
<td class="field" colspan="2">
<div id="termswrap">
<input id="terms" type="checkbox" name="terms"
/>
<label id="lterms" for="terms">I have
read and accept the Terms of
Use.</label>
</div>
</td>
</tr>
errorPlacement: function(error, element) {
if (
element.is(":radio") )
error.appendTo( element.parent().next().next() );
else if (
element.is(":checkbox") )
error.appendTo ( element.next() );
else
error.appendTo( element.parent().next() );
}
代码的作用是:一般情况下把错误信息显示在<td
class="status"></td>中,如果是radio显示在<td></td>中,如果是
checkbox显示在内容的后面
errorClass:String Default:
"error"
指定错误提示的css类名,可以自定义错误提示的样式
errorElement:String Default:
"label"
用什么标签标记错误,默认的是label你可以改成em
errorContainer:Selector
显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer:Selector
把错误信息统一放在一个容器里面。
wrapper:String
用什么标签再把上边的errorELement包起来
一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏
errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"
5更改错误信息显示的样式
设置错误提示的样式,可以增加图标显示,在该系统中已经建立了一个validation.css专门用于维护校验文件的样式
input.error { border: 1px solid red; }
label.error {
background:url("./demo/images/unchecked.gif")
no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif")
no-repeat 0px 0px;
}
6每个字段验证通过执行函数
success:String,Callback
要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数
success: function(label) {
// set
as text for IE
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}
添加"valid"
到验证元素, 在CSS中定义的样式<style>label.valid
{}</style>
success: "valid"
7验证的触发方式修改
下面的虽然是boolean型的,但建议除非要改为false,否则别乱添加。
onsubmit:Boolean Default:
true
提交时验证. 设置唯false就用其他方法去验证
onfocusout:Boolean Default:
true
失去焦点是验证(不包括checkboxes/radio buttons)
onkeyup:Boolean Default:
true
在keyup时验证.
onclick:Boolean Default:
true
在checkboxes 和 radio 点击时验证
focusInvalid:Boolean Default:
true
提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
focusCleanup:Boolean Default:
false
如果是true那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用
// 重置表单
$().ready(function() {
var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
$("#reset").click(function() {
validator.resetForm();
});
});
8异步验证
remote:URL
使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项
remote: "check-email.php"
remote: {
url:
"check-email.php",
//后台处理程序
type:
"post",
//数据发送方式
dataType:
"json",
//接受数据格式
data:
{
//要传递的数据
username: function() {
return $("#username").val();
}
}
}
远程地址只能输出 "true" 或 "false",不能有其它输出
9添加自定义校验
addMethod:name, method, message
自定义验证方法
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value,
element, param) {
var length =
value.length;
for(var i =
0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length
>= param[0] &&
length <= param[1]
);
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element)
{
var tel =
/^[0-9]{6}$/;
return
this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
10radio和checkbox、select的验证
1.radio的required表示必须选中一个
<input type="radio"
id="gender_male" value="m" name="gender" class="{required:true}"
/>
<input type="radio"
id="gender_female" value="f"
name="gender"/>
2.checkbox的required表示必须选中
<input type="checkbox" class="checkbox" id="agree"
name="agree" class="{required:true}"
/>
checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表 示选中个数区间
<input type="checkbox" class="checkbox"
id="spam_email" value="email" name="spam[]" class="{required:true,
minlength:2}" />
<input type="checkbox" class="checkbox"
id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox"
id="spam_mail" value="mail" name="spam[]"
/>
3.select的required表示选中的value不能为空
<select id="jungle" name="jungle" title="Please
select something!" class="{required:true}">
<option
value=""></option>
<option
value="1">Buga</option>
<option
value="2">Baga</option>
<option
value="3">Oi</option>
</select>
select的minlength表示选中的最小个数(可多选的select),maxlength表示最大的选中个 数,rangelength:[2,3]表示选中个数区间
<select id="fruit" name="fruit" title="Please select
at least two fruits" class="{required:true, minlength:2}"
multiple="multiple">
<option
value="b">Banana</option>
<option
value="a">Apple</option>
<option
value="p">Peach</option>
<option
value="t">Turtle</option>
</select>
jquery.validate详解二的更多相关文章
- jquery validate 详解二
原文:http://blog.sina.com.cn/s/blog_608475eb0100h3h2.html 这里只是第二篇,前面的内容请参阅上一篇 五.常用方法及注意问题 1.用其他方式替代默认的 ...
- jQuery.validator 详解二
前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...
- jquery.validate详解一
jQuery校验 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&q ...
- jquery validate 详解一
原文:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html jQuery校验官网地址:http://bassistance.de/jquery-pl ...
- jquery validate 详解
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&qu ...
- jQuery.validator 详解
jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串
Jquery 选择器 详解 在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...
- .NET DLL 保护措施详解(二)关于性能的测试
先说结果: 加了缓存的结果与C#原生代码差异不大了 我对三种方式进行了测试: 第一种,每次调用均动态编译 第二种,缓存编译好的对象 第三种,直接调用原生C#代码 .net dll保护系列 ------ ...
随机推荐
- [转]Spring Boot——2分钟构建spring web mvc REST风格HelloWorld
Spring Boot——2分钟构建spring web mvc REST风格HelloWorld http://projects.spring.io/spring-boot/ http://spri ...
- Dev GridControl,GridView 显示多行文本及合并相同单元格
显示多行文本的方法 首先把gridcontrol的views的Optionsview里的RowAutoHeight设置为True 在In-place Editor Repository 里添加 Mem ...
- WebApi2官网学习记录---Attribute Routing
从WebApi 1迁移到WebAPI 2要改变配置代码如下: WebApi 1: protected void Application_Start() { // WARNING - Not compa ...
- table细线
table { border-collapse: collapse; } table td { border: 1px solid #CCCCCC; }
- 《第一行代码》学习笔记7-活动Activity(5)
1.Intent中只能指定一个action,但却能指定多个category. 2.使用隐式Intent,不仅可以启动自己程序内的活动,还可以启动其他程序的活动,使得Android应用程序之间 的功能共 ...
- Geodatabase - 创建要素类.
在NET中,会遇到以“_2”结尾的属性,这些属性是可写的. 以下代码在已有工作空间下,创建一个新的点要素类: //例如,personalDBPath=@"G:\doc\gis\1.400\d ...
- 全世界最详细的图形化VMware中linux环境下oracle安装(三)【weber出品必属精品】
数据库软件和数据库都建好了,基本上可以说完成90%的工作,但是美中不足的就是企业管理器还没有安装好,现在我们就开始安装企业管理器吧. 安装之前我们先将补丁给补上.补丁我们也是采用禁默安装.补丁:p83 ...
- 对arm指令集的疑惑,静态库运行,编译报错等问题
转载自http://www.jianshu.com/p/4a70aa03a4ea?utm_campaign=hugo&utm_medium=reader_share&utm_conte ...
- CDialog类中OnCancel()、OnInitDialog()作用
1.void CCOMDDlg::OnCancel() { // TODO: Add extra cleanup here CDialog::OnCancel();} 如果把CDialog::OnCa ...
- 解决Sublime-Text-3在ubuntu下中文输入的问题
在ubuntu下使用ST这神器已经一段日子了,但是一直有个纠结的问题,就是中文输入非常坑爹,曾经一段时间,使用inputHelper这个插件来解决, 但是……每次都要按个快捷键,弹出一个小小小框来输入 ...