- 浏览: 94616 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
曾老师:
请问
dataFilter: function(data, ...
利用jquery.validate异步验证用户名是否存在 -
changningbuddha:
错误 1 在证书存储区中找不到清单签名证书。 myClock怎 ...
C#winform的小闹钟
jquery.validate.js表单验证
一、用前必备
官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
API: http://jquery.bassistance.de/api-browser/plugins.html
当前版本:1.5.5
需要JQuery版本:1.2.6+, 兼容 1.3.2
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
二、默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
三、默认的提示
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},
如需要修改,可在js代码中加入:
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
推荐做法,将此文件放入messages_cn.js中,在页面中引入
<script src="../js/messages_cn.js" type="text/javascript"></script>
四、使用方式
1.将校验规则写到控件中
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>
$().ready(function() {
$("#signupForm").validate();
});
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" class="required email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" class="{required:true,minlength:5}" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
使用class="{}"的方式,必须引入包:jquery.metadata.js
可以使用如下的方法,修改提示内容:
class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
class="{required:true,minlength:5,equalTo:'#password'}"
另外一个方式,使用关键字:meta(为了元数据使用其他插件你要包装 你的验证规则 在他们自己的项目中可以用这个特殊的选项)
Tell the validation plugin to look inside a validate-property in metadata for validation rules.
例如:
meta: "validate"
<input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />
再有一种方式:
$.metadata.setType("attr", "validate");
这样可以使用validate="{required:true}"的方式,或者class="required",但class="{required:true,minlength:5}"将不起作用
2.将校验规则写到代码中
$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字符")
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
}
}
});
});
//messages处,如果某个控件没有message,将调用默认的信息
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
required:true 必须有值
required:"#aa:checked"表达式的值为真,则需要验证
required:function(){}返回为真,表时需要验证
后边两种常用于,表单中需要同时填或不填的元素
五、常用方法及注意问题
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
});
});
如果一个页面中有多个表单,用
$.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") )
<span st
发表评论
-
JS 去除字符串中空格
2011-06-24 17:01 1364JS 去除字符串中空格 // 功能: 1)去除字符串前后 ... -
利用jquery.validate异步验证用户名是否存在
2011-04-28 19:42 3064经过上百次的试验试和 ... -
页面加载时显示进度条的js
2011-04-18 10:33 2207<style type="text/css&q ... -
js日历控件的使用
2011-04-18 10:26 962在.net前台页面中引用js日历控件 <script ... -
如何绑定到qq联系
2011-03-28 17:10 826点击“qq联系我”的图片后 就可以打开qq聊天窗口 < ... -
网页中插入flash的代码不会被其他div覆盖
2011-03-21 16:37 833有时候在网页中插入flash之后经常被其他div层覆盖,下 ... -
jquery实战之横纵菜单特效
2011-02-26 19:42 1137以下为html代码 <title& ... -
倒计时关闭窗口
2011-01-03 18:45 1052倒计时关闭窗口用到的是setTimeout()方法,定义一个全 ... -
时间效果
2011-01-03 17:18 789在网页上显示系统当前时间或者,显示年月日时分秒,都可以用js实 ... -
上传图片
2010-12-28 11:11 1116<input id="input_sho ... -
XmlHttpRequest异步请求的创建示例
2010-12-26 19:56 865<script type="text/j ... -
图片横向无缝滚动
2010-11-07 17:10 1205<div id="demo" sty ... -
js滚动条到最底端控制
2010-10-23 14:55 2834当聊天室的内容超出页面范围时, 如何让页面刷新后 显示最下 ...
相关推荐
jQuery Validate是一个广泛使用的JavaScript库,专门用于前端表单验证。这个插件极大地方便了开发者在用户提交数据之前检查输入的正确性和完整性,确保数据的质量和安全性。在本文中,我们将深入探讨jQuery Validate...
jQuery validate 是一个非常流行的JavaScript库,用于在客户端进行表单验证。它简化了HTML表单的验证过程,提供了丰富的选项和方法来定制验证规则。在ASP.NET开发中,结合jQuery validate,可以创建用户友好的、交互...
功能强大的jquery.validate表单验证插件是一个专门用于实现表单验证的jQuery插件,它以其易用性和强大的功能受到了广大开发者的青睐。 首先,jquery.validate表单验证插件能够有效地提高开发效率,因为它内置了多种...
以下是对jQuery Validate表单验证插件实现代码的详细解析: 1. **验证准备**: 在开始编写验证逻辑之前,你需要创建一个包含待验证表单元素的HTML结构。这通常包括输入字段、标签和其他必要的表单元素。同时,为了...
### jQuery.validate 表单验证框架详解 在现代Web开发中,表单验证是不可或缺的一环,它确保用户输入的数据符合预期格式,从而提高用户体验并减少服务器端的压力。jQuery.validate插件便是为此而生,它提供了丰富的...
Jquery validate表单验证Demo.zip Jquery validate表单验证Demo.zip Jquery validate表单验证Demo.zip Jquery validate表单验证Demo.zip Jquery validate表单验证Demo.zip
首先,基本的jQuery Validate表单验证入门涉及对表单的监听和校验。通过绑定`submitHandler`函数,在表单提交时进行自定义操作。例如,可以在函数内部使用`alert`弹窗提示用户表单已经提交,并通过`form.submit()`...
### Jquery.validate表单验证详解 #### 一、引言 在Web开发中,表单验证是确保数据质量的关键步骤。传统的JavaScript表单验证方法往往冗长且难以维护,而jQuery Validate插件则以其简洁、高效及易于扩展的特性成为...
以上就是jQuery Validate的基本使用和核心概念,通过熟练掌握这些,你可以轻松实现高效且用户友好的表单验证。记住,始终要关注用户体验,避免过于繁琐的验证过程,同时确保数据安全性和准确性。
在本文中,我们将深入探讨jQuery Validate插件,这是一种强大的JavaScript工具,用于实现高效且易于定制的表单验证。...通过下载提供的"jquery validate表单验证插件",您可以开始实践并体验其强大功能。
《jQuery Validate表单验证插件详解》 在Web开发中,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,避免无效数据的提交,提高用户体验。jQuery Validate是一个强大的JavaScript库,它使得在...
在这个“jquery validate表单验证插件制作注册表单验证提交”的主题中,我们将深入探讨如何使用这个插件来构建一个功能完善的注册表单。 首先,jQuery Validate 插件的核心在于它的简单易用性。在HTML中,你需要为...
**jQuery + Validate 表单验证** 在Web应用中,用户输入的数据验证是非常关键的一个环节,它确保了数据的完整性和准确性。jQuery Validate插件是基于jQuery库的一个强大且灵活的表单验证工具,大大简化了前端验证的...
在本文中,我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单,进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库,它为HTML表单提供了灵活且易于使用的验证规则,确保用户输入...
### jQuery Validate 表单验证插件使用方法 在前端开发中,表单验证是一项非常重要的功能,它确保用户提交的数据符合预期的要求。jQuery Validate插件是基于jQuery的一个强大的表单验证库,它提供了多种预定义的...
jQuery Validate插件作为一款强大的JavaScript验证工具,广泛应用于各种表单验证场景,包括手机注册表单验证。本文将深入探讨jQuery Validate插件的使用方法,以及如何将其应用于手机注册表单的验证。 一、jQuery ...
`jQuery Validate` 是一个强大的 JavaScript 库,专为 jQuery 框架设计,用于实现高效、灵活且易于使用的表单验证。它可以帮助开发者创建各种复杂的验证规则,确保用户输入的数据符合预设的要求,从而提高网站的安全...
jquery.validate是jQuery的一个表单验证插件,它提供了丰富、灵活的表单验证功能,可以极大地简化开发者在前端表单验证中的工作。使用jquery.validate可以轻松地对表单中的字段进行验证,确保输入数据符合要求,从而...
实例是用jQuery的validate插件做的登陆表单的验证,效果还不错,代码部分可以参见我写的这篇博客:http://blog.csdn.net/eson_15/article/details/51497533