- 浏览: 304869 次
文章分类
最新评论
-
流年末年:
那四个参数还是没看懂.....能不能解释下showPassst ...
我写的密码强度验证方法(原创) -
kingcs2008:
// 验证pws.jsshowPassstrength(&qu ...
我写的密码强度验证方法(原创) -
h957355152:
请问博主这个怎么用呢?我直接放到jsp里面调用showPass ...
我写的密码强度验证方法(原创) -
qq_15138059:
我写的全国省市县三级联动菜单,拿出来和大家分享了(原创) -
valenon:
评论呢?从MAIL FROM命令开始貌似就出错了:500 Er ...
如何发送伪造的电子邮件
这里只是第二篇,前面的内容请参阅上一篇
五、常用方法及注意问题
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>
发表评论
-
java正则表达式高级用法:转换驼峰标示
2012-06-26 16:47 5804String source = "LastLog ... -
你会做Web上的用户登录功能吗?(转)
2012-06-25 13:22 1376Web上的用户登录功能应 ... -
使用pager-taglib.jar实现的分页技术
2012-06-24 02:34 935//1.导入pager-taglib.jar包; / ... -
我写的验证码生成方案,可防止绝大多数机械识别。
2012-06-20 14:59 2411web.xml <!DOCTYPE web-app ... -
一个jQuery扩展工具包
2012-06-17 16:52 5480带有详尽注释的源代码: var jQuery = jQue ... -
如何在myeclipse中使用maven?
2012-06-11 14:22 168461.下载maven,解压到D盘ma ... -
安装subclipse, MyEclipse8 SVN插件
2012-06-09 22:39 964安装subclipse, MyEclipse8 SVN插件 ... -
PDF生成器
2012-05-28 02:53 852我自己写的一个pdf生成器,能导出百度博客为PDF -
我的自动投票器
2012-04-17 13:58 1301自动投票器,支持windows的32位机器 下面的压缩包是编 ... -
list,set,map,数组间的相互转换(转载)
2012-03-16 16:29 28651.list转set Java代码 ... -
一个给pojo生成hashcode、equals、toString等方法的工具类
2012-03-06 09:52 4256一个给pojo生成hashcode、equals、toStri ... -
ehcache的用法
2012-02-13 22:13 0Spring ... -
使用ehcache来缓存页面
2012-02-13 22:08 812关于缓存的话题,在坛子里已经有很多讨论,简单的来说,如果一个应 ... -
java笔记:自己动手写javaEE框架(二)--业务层Service以及Service单元测试
2012-02-13 00:55 0前一篇博文里有三 ... -
struts+spring+hibernate的web应用<四> Web层代码编写(2)
2012-02-13 00:50 0接着就是写资源文件了。 在 com.game. ... -
struts+spring+hibernate的web应用<四> Web层代码编写(1)
2012-02-13 00:49 1048前面的文章: ... -
struts+spring+hibernate的web应用<三> Service层代码编写
2012-02-13 00:46 873前面的文章: ... -
struts+spring+hibernate的web应用<二> Dao层代码编写
2012-02-13 00:45 865前一篇文章 (struts+spring ... -
struts+spring+hibernate的web应用<一> 架构搭建
2012-02-13 00:44 780许久没有些文章了,现 ... -
ehcache缓存管理
2012-02-12 23:52 1007EHCache 是一个纯java的,在Hibernate2 ...
相关推荐
### jQuery Validate 插件使用详解 #### 一、概述 jQuery Validate 是一款强大的表单验证插件,基于 jQuery 框架开发而成。它能够帮助开发者轻松实现客户端表单验证功能,大大提高了用户体验并减少了服务器端的...
《jQuery Validate插件详解与实例应用》 在Web开发中,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,提高数据的准确性和安全性。jQuery Validate是一个强大的JavaScript库,专为jQuery设计...
《jQuery Validate插件详解与应用指南》 在Web开发领域,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,从而提高数据的准确性和系统的稳定性。jQuery Validate是一个强大的JavaScript库,专...
《jQuery Validate插件详解及其应用》 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,提高了用户体验并减少了服务器端的负担。jQuery Validate插件是实现这一功能的强大工具,它...
**jQuery validate 和 form 插件详解** 在网页开发中,用户界面的交互性和数据验证是不可或缺的部分。jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果。`jQuery validate` 和 `...
《jQuery Validate与Struts2整合应用详解》 在Web开发中,前端验证用户输入的数据是必不可少的一环,jQuery Validate插件就是一款强大的JavaScript验证工具,它可以帮助我们方便地实现表单验证。与此同时,Struts2...
**jQuery 插件详解** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和Ajax交互。在这个压缩包中,我们重点探讨的是几个基于 jQuery 的核心插件,它们分别是:jQuery UI、jQuery ...
《jQuery Validate验证框架详解与JS应用》 在Web开发中,表单验证是不可或缺的一环,它确保用户输入的数据符合预设的规则,避免无效数据的提交,提高用户体验。jQuery Validate是一个强大的验证插件,它简化了...
### jQuery.validate 表单验证框架详解 在现代Web开发中,表单验证是不可或缺的一环,它确保用户输入的数据符合预期格式,从而提高用户体验并减少服务器端的压力。jQuery.validate插件便是为此而生,它提供了丰富的...
《jQuery.validate 用法详解及源码解析》 在网页开发中,表单验证是必不可少的一环,确保用户输入的数据符合预设的规则,避免无效数据的提交。jQuery.validate插件是一个强大的、易于使用的JavaScript库,它使得在...
**jQuery Validate 插件详解** `jQuery Validate` 是一个广泛使用的JavaScript库,它为HTML表单提供了强大的验证功能。这个插件是基于流行的jQuery库构建的,旨在简化表单验证的过程,提供用户友好的错误提示,并...
**jQuery Validate插件详解** jQuery Validate插件是用于在客户端进行表单验证的强大工具,它提供了丰富的验证规则和自定义方法,使得用户在提交表单前可以即时检测输入数据的有效性,大大提升了用户体验。该插件是...
《jQuery Validate插件详解及其应用》 在Web开发中,数据验证是不可或缺的一环,它确保用户输入的数据符合预设的格式和规则,从而保证数据的准确性和安全性。jQuery作为一个强大的JavaScript库,提供了丰富的功能来...
在`jqueryvalidate验证demo`中,包含了多个实例,演示了基本验证、自定义规则、验证组等常见功能的应用。通过查看和运行这些示例,可以更深入地理解和掌握jQuery Validate的使用。 总结,jQuery Validate插件以其...
确保 `jquery.js` 是 jQuery 的最新版本,而 `jquery.validate.js` 是 jQuery Validate 插件的文件路径。 接下来,我们来看一下默认的验证规则: 1. **required**: 确保字段非空。 2. **remote**: 使用 AJAX 调用...
《jQuery Validate表单验证插件详解》 在Web开发中,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,避免无效数据的提交,提高用户体验。jQuery Validate是一个强大的JavaScript库,它使得在...
**jQuery Validate插件详解** jQuery Validate是一个非常流行的JavaScript库,用于在客户端进行表单验证,它简化了HTML表单的验证过程,提供了丰富的验证规则和自定义错误消息。这个插件是基于jQuery库构建的,因此...
《jQuery Validate插件详解与应用》 在Web开发中,表单验证是不可或缺的一部分,而jQuery Validate插件作为一款强大的JavaScript验证工具,极大地简化了这一过程。本文将深入探讨jQuery Validate插件的基本概念、...