转载：http://www.cnblogs.com/easyinsc/archive/2009/02/27/1407826.html
jQuery Validation范例学习
jQuery Validation，
验证操作类formValidatorClass.js
/**
* @author ming
*/
$(document).ready(function(){
/* 设置默认属性 */
$.validator.setDefaults({
submitHandler: function(form) {
form.submit();
}
});
// 字符验证
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");
// 中文字两个字节
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] );
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, "请正确输入您的身份证号码");
// 手机号码验证
jQuery.validator.addMethod("isMobile", 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.validator.addMethod("isTel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "请正确填写您的联系电话");
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
//开始验证
$('#submitForm').validate({
/* 设置验证规则 */
rules: {
username: {
required:true,
stringCheck:true,
byteRangeLength:[3,15]
},
email:{
required:true,
email:true
},
phone:{
required:true,
isPhone:true
},
address:{
required:true,
stringCheck:true,
byteRangeLength:[3,100]
}
},
/* 设置错误信息 */
messages: {
username: {
required: "请填写用户名",
stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
},
email:{
required: "请输入一个Email地址",
email: "请输入一个有效的Email地址"
},
phone:{
required: "请输入您的联系电话",
isPhone: "请输入一个有效的联系电话"
},
address:{
required: "请输入您的联系地址",
stringCheck: "请正确输入您的联系地址",
byteRangeLength: "请详实您的联系地址以便于我们联系您"
}
},
/* 设置验证触发事件 */
focusInvalid: false,
onkeyup: false,
/* 设置错误信息提示DOM */
errorPlacement: function(error, element) {
error.appendTo( element.parent());
},
});
});
测试页index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jQuery验证</title>
<script src="lib/jquery/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery/messages_cn.js"></script>
<script type="text/javascript" src="lib/jquery/formValidatorClass.js"></script>
<style type="text/css">
* {
font-family: Verdana;
font-size: 96%;
}
label {
width: 10em;
float: left;
}
label.error {
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
p {
clear: both;
}
.submit {
margin-left: 12em;
}
em {
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
</style>
</head>
<body>
<form class="submitForm" id="submitForm" method="get" action="">
<fieldset>
<legend>表单验证</legend>
<p>
<label for="username">用户名</label>
<em>*</em><input id="userName" name="username" size="25" />
</p>
<p>
<label for="email">E-Mail</label>
<em>*</em><input id="email" name="email" size="25" />
</p>
<p>
<label for="phone">联系电话</label>
<em>*</em><input id="phone" name="phone" size="25" value="" />
</p>
<p>
<label for="address">地址</label>
<em>*</em><input id="address" name="address" size="22">
</p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>
分享到：
相关推荐
**jQuery Validation Plugin 知识详解** jQuery Validation Plugin 是一个用于前端表单验证的强大工具，它为jQuery用户提供了方便快捷的方法来验证用户输入的数据，确保数据的准确性和完整性。这个插件能够帮助...
本范例将深入探讨jQuery Validation插件的使用方法及其在ASP.NET页面中的应用。 ### 1. jQuery Validation简介 jQuery Validation插件是jQuery库的一个扩展，它允许开发者通过简单的配置实现对用户输入数据的有效...
jQuery Validation Engine是一款强大的JavaScript库，专门用于实现网页表单的验证功能。它是基于流行的JavaScript库jQuery构建的，为开发者提供了一种优雅的方式来处理用户输入的数据验证。这个插件以其高度可定制性...
jQuery 插件使客户端表单验证变得容易，同时仍然提供了大量的自定义选项。如果您要从头开始构建新的东西，或者当您试图将某些东西集成到具有大量现有标记的现有应用程序中时，它都是一个不错的选择。该插件捆绑了一...
让jquery validation plugin 支持zepto
《jQuery Validation 使用详解》 jQuery Validation 是一个广泛使用的JavaScript库，专为简化表单验证而设计，它使得在网页上创建高效、用户友好的验证规则变得轻而易举。在这个教程中，我们将深入探讨如何利用...
在IT行业中，前端开发是至关重要的一个领域，而jQuery Validation插件则是JavaScript中用于表单验证的常用工具，它提供了一套完整的解决方案来确保用户输入的数据满足预设的规则。Zepto.js则是一个轻量级的...
jQuery Validation Plugin v1.19.1 表单验证插件 2020年官方最新版。包含中文语言包messages_zh.js及jquery.validate.js，在dist目录中。
jQuery Validation表单验证插件实例合集，是锋利的JQuery第七章中的一个典型实例，一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法，一共包含了7个...
**jQuery Validation Plugin 1.13.0 知识点详解** jQuery Validation Plugin 是一个流行的JavaScript库，专门用于实现Web表单的数据验证。这个插件是基于jQuery框架设计的，因此，它能够轻松地与jQuery的其他功能...
最后，`demo`目录下的示例可以帮助开发者更好地理解和学习如何使用jQuery Validation。通过实际的HTML和JavaScript代码，我们可以看到各种验证规则的实现方式和用法。 总结来说，jQuery Validation 1.17.0是一个...
《jQuery Validation插件详解及其1.9.0版本特性》 在Web开发中，表单验证是不可或缺的一环，它确保用户输入的数据符合预设的规则，从而避免无效数据的提交，提高系统的稳定性和用户体验。jQuery Validation插件是...
jQuery Validation 参考手册
jqueryvalidation 官方网站内容，本人编译的CHM文件，方便查询学习。
《jQuery Validation插件详解——基于jquery-validation-1.8.0.zip》 jQuery Validation插件是Web开发中广泛使用的表单验证工具，尤其在构建用户交互丰富的网站时，它的存在大大提高了用户体验。本文将深入探讨...
jquery-validation-1.9.0是一款优秀的form表单验证插件，此资源主要为某篇博客服务，如有需要还请下载。整个压缩包无法上传，有需要请留言
**jQuery Validation 插件详解** jQuery Validation 是一个广泛使用的JavaScript库，专为表单验证而设计，它使得在网页上创建高效、用户友好的验证规则变得简单易行。本篇文章将深入探讨jQuery Validation插件的...
jQuery Validation Plug最新版。解决jQuery1.6不能工作的问题在IE 6,7,8,9
【轻量的jQuery Validation】是一种基于JavaScript库jQuery的验证插件，主要用于网页表单的数据验证。这个插件设计的目标是简化网页表单的验证过程，提供一种轻便且灵活的解决方案，使得开发者能够快速实现对用户...
jQuery Validation 是一个强大的JavaScript库，专门用于实现网页表单的验证功能。这个插件极大地简化了在客户端进行数据验证的过程，使得开发者可以更专注于用户体验，而无需深陷于复杂的JavaScript代码之中。它与...