本文参考了思门bak战友的文章：http://www.cnblogs.com/easyinsc/archive/2009/02/27/1407826.html
今天，也趁工作的空档，记录一下jQuery验证工具的使用。由于不便把工作中需要验证的内容贴出来，就借用了思门bak的代码作为记录，已增加自己在这方面的积累，也在此发个日志，记录一下。相关代码也在附件中附上，希望大家多多指教。
前端界面是一个叫submitform.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 type="text/javascript" src="../../../js/jquery.js" ></script>
<script type="text/javascript" src="../../../js/jquery-ui.js"></script>
<script type="text/javascript" src="../../../js/jquery.validate.js" mce_src="js/jquery.validate.js"></script>
<script type="text/javascript" src="../../../js/messages_zh.js"></script>
<script type="text/javascript" src="../../../js/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;
}
.back {
margin-left: 3em;
}
</style>
</head>
<body>
<form class="submitForm" id="submitForm" method="get" action="../../../bin/CWebQueryString.exe">
<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="提交"/>
<input class="back" type="button" value="返回" id="back"/>
</p>
</fieldset>
</form>
</body>
</html>
验证控制的js为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: true,
/**//* 设置错误信息提示DOM */
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
});
$("#back").click(function() {
history.back();
});
});
记录一下，并把代码附上，希望自己不要老遗忘……
附件为jquery的validate包和自己的一个简单代码，后台用了C语言，闲着的时候弄着玩的一个C语言写的Web应用，正好用来记录一些简单的操作代码。
相关推荐
jQuery Validation是Web开发中一个广泛使用的JavaScript库，主要用于表单验证。该插件以其简单易用和强大的功能著称，大大简化了前端数据验证的过程。在本文中，我们将深入探讨jQuery Validation 1.17.0版本的相关...
本文将深入探讨jQuery Validation插件的基本概念、功能特性以及实际应用，帮助开发者更好地理解和使用这个强大的工具。 一、jQuery Validation插件简介 jQuery Validation插件是一款基于jQuery库的轻量级表单验证...
这里记录了jQuery-validation的版本、作者、许可证等信息，同时也方便其他开发者安装和更新此插件。 总结来说，jQuery-validation-1.19.1不仅提供了强大的表单验证功能，还通过完善的文档和丰富的示例，帮助开发者...
`jquery-validation`允许用户自定义错误消息，或直接使用内置的多种语言包，以适应不同地区用户的使用习惯。 `lib`目录存放了插件的核心源代码，开发者可以深入研究源码，理解其工作原理，或者进行二次开发。 最后...
不过奇怪的是，最近用下来感觉有些古怪，因为好像有些死板，已...jQuery Validation插件提供了一种remote方式来实现这一点。例如我可以这样验证表单： 代码如下: <form id=”regForm”> <input type=”text”
同时，文章提到了CodeProject上的一个名为DisableBtnPostBack的项目，该项目提供了一个防止表单重复提交的解决方案，但该项目并不适用于与JqueryValidation结合使用的情况。文章中也提到了对应的情况，并给出了一个...
**jQuery 技巧记录** jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和Ajax交互。这篇博客主要聚焦于一些实用的 jQuery 技巧，帮助开发者提升效率并优化代码。 ### 1. 选择器的...
这篇文档主要总结了在使用jQuery及其相关插件时遇到的问题及解决方案，主要包括以下几个方面： 1. **My97DatePicker日历插件**： My97DatePicker是一个国内常用的日期选择插件，因其简单易用而被推荐。在使用中，...
7. **插件生态**：jQuery拥有庞大的插件库，如jQuery UI、jQuery Validation等，扩展了其功能。 8. **性能优化**：学习如何利用`.delegate()`, `.on()`等方法进行事件委托，以及如何优化选择器以提高性能。 9. **...
5. **验证集成**：可以集成其他表单验证库，如 jQuery Validation Plugin，以在用户提交表单之前检查输入的有效性。 6. **事件处理**：提供了一系列的事件，如“步骤改变”、“表单完成”等，使得开发者可以通过...
在"jQuery1.11.0.chm"这个帮助文件中，详细记录了jQuery 1.11.0的所有功能和用法。 首先，jQuery的核心概念是选择器，它允许开发者通过CSS样式选择页面上的元素。例如，"$('div')”会选取所有`<div>`元素，而"$('...
例如，许多流行的插件如jQuery UI提供了丰富的用户界面组件，而jQuery Validation Plugin则专门用于表单验证。 在使用jQuery中文API时，开发者可以按照HTML格式的文档结构，快速定位到所需的方法、函数或者属性。这...
6. **插件系统**：jQuery的强大之处在于其丰富的插件生态系统，如jQuery UI提供丰富的用户界面组件，jQuery Validation则用于表单验证。VSDOC中虽不直接包含插件信息，但理解基础API后，开发者可以轻松找到并使用...
可以在 https://jqueryvalidation.org/download 获取最新版本。 **12. 默认验证规则** 如 `required` 规则，要求字段不能为空；`email` 验证邮箱格式等。 **13. 默认验证提示** 可以通过配置显示自定义的错误消息...
jQuery有许多优秀的表单验证插件，如`jQuery Validation Plugin`，它可以提供更强大的验证功能和自定义规则。这个插件支持自定义错误消息、动态验证规则以及多国语言支持。使用方式如下： 1. **引入插件**：在HTML...
4. **用户管理**：同样使用jQuery jqGrid处理用户数据，支持日期选择。 5. **角色权限管理**：利用jQuery jqGrid和Bootstrap FuelUX Tree组件处理角色权限数据。 6. **菜单管理**：jQuery jqGrid用于菜单数据的展示...
#### （二）插件方法(jQueryvalidation) 除了可选项，`jQuery.validate.js` 还提供了一系列插件方法，用于控制和操作验证过程。这些方法包括初始化验证、重置验证状态、手动触发验证等。 #### （三、四）选择器及...
jQuery Validate插件（官方网站：[http://jqueryvalidation.org/](http://jqueryvalidation.org/)）作为一款优秀的JavaScript库，被广泛应用于前端表单验证中。然而，在使用该插件时，可能会遇到一个问题：当表单中...
19. **表单验证**：使用jQuery Validation插件进行表单验证，提升用户体验。 20. **使用网格系统**：利用jQuery Mobile的grid系统，轻松创建多列布局。 21. **自定义图标**：添加自定义图标到按钮和工具栏，增强...