验证表单是我们经常需要做的，今天发现了jQuery一个很强大的验证表单插件(jquery.validate.js 下载地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/)，研究了一下发现他不光强大而且十分易于上手。真是不用不知道，一种真奇妙啊！
下面附上我写的一个小例子：
jquery.validate.js
<script>
function checkidcard(num){
var len = num.length, re;
if (len == 15)
re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);
else if (len == 18)
re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);
else{
//alert("请输入15或18位身份证号,您输入的是 "+len+ "位");
return false;
}
var a = num.match(re);
if (a != null){
if (len==15){
var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}else{
var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
if (!B){
//alert("输入的身份证号 "+ a[0] +" 里出生日期不对！");
return false;
}
}
return true;
}
</script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
// 添加验证方法 (身份证号码验证)
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || checkidcard(value);
}, "请正确输入您的身份证号码");
$().ready(function() {
$("#firstform").validate();
$("#secondform").validate({
/*errorLabelContainer: "#messageBox", //显示错误信息的容器ID
wrapper: "li", //包含每个错误信息的容器*/
rules:{
xm:{
required: true,
minlength: 2,
maxlength: 5
},
pwd:{
required: true,
minlength: 6
},
confirm_pwd:{
required: true,
equalTo: "#pwd"
},
f2csrq:{
required: true,
date: true
},
f2xjzd: {
required: true
},
f2sfzh:{
/*digits: true,
rangelength: [18,20]*/
required: true,
isIdCardNo: true
}
},
messages:{
xm:{
required: "请填写姓名",
minlength: "字符长度不能小于2个字符",
maxlength: "字符长度不能大于5个字符"
},
pwd:{
required: "请填写密码",
minlength: "字符长度不能小于6个字符"
},
confirm_pwd:{
required: "请再次输入密码",
equalTo: "密码不一致"
},
f2csrq:{
required: "请输入出生日期",
date: "日期格式不正确(例：2009/04/07)"
},
f2xjzd:{
required: "请输入地址"
},
f2sfzh:{
/*digits: "身份证号码只能为数字",
rangelength: "身份号码长度为18～20个字符"*/
required: "请输入身份证号",
isIdCardNo: "身份证号不正确"
}
}
});
/*// 输入框获得焦点时，样式设置
$('input').focus(function(){
if($(this).is(":text") || $(this).is(":password"))
$(this).addClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_normal').addClass('field_focus');
}
});
// 输入框失去焦点时，样式设置
$('input').blur(function() {
$(this).removeClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_focus').addClass('field_normal');
}
});*/
});
</script>
<div id="header"></div>
<div id="main">
<form id="firstform" method="get" action="">
<fieldset>
<legend>jQuery验证</legend>
<div id="xm" class="owinput">
<div class="owlabel">
<label class="req" for="xm"> 姓 名 :</label>
</div>
<div class="owfield">
<span class="inp"> <input name="xm" class="required" minlength="2"> </span>
</div>
</div>
<div id="xb" class="owinput">
<div class="owlabel">
<label class="req" for="f1pwd"> 密 码 :</label>
</div>
<div class="owfield">
<span class="inp"> <input id="f1pwd" name="f1pwd" class="required" minlength="6"> </span>
</div>
</div>
<div id="xb" class="owinput">
<div class="owlabel">
<label class="req" for="f1pwd2"> 密码确认 :</label>
</div>
<div class="owfield">
<span class="inp"> <input value="" name="f1pwd2" type="text" class="required" equalTo="#f1pwd"> </span>
</div>
</div>
<div id="csrq" class="owinput">
<div class="owlabel">
<label class="req" for="f1csrq"> 出生日期 :</label>
</div>
<div class="owfield">
<span class="inp"> <input name="f1csrq" type="text" class="required date"> </span>
</div>
</div>
<div id="xjzd" class="owinput">
<div class="owlabel">
<label class="req" for="f1xjzd"> 现居住地 :</label>
</div>
<div class="owfield">
<span class="inp"> <input name="f1xjzd" type="text" class="required"> </span>
</div>
</div>
<div id="sfzh" class="owinput">
<div class="owlabel">
<label class="req" for="f1sfzh"> 身份证号 :</label>
</div>
<div class="owfield">
<span class="inp"> <input name="f1sfzh" type="text" class="required isIdCardNo" minlength="18" maxlength="19"> </span>
</div>
</div>
</fieldset>
<div id="regSubmit">
<span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">
<b class="tl"><b class="tr"></b></b><button id="send" type="submit">提 交</button><b class="bl"><b class="br"></b></b>
</span>
<span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">
<b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取 消</button><b class="bl"><b class="br"></b></b>
</span>
</div>
</form>
<form id="secondform">
<fieldset>
<legend>自定义jQuery验证</legend>
<div id="xm" class="owinput">
<div class="owlabel">
<label class="req" for="xm"> 姓 名 :</label>
</div>
<div class="owfield">
<span class="inp"> <input name="xm" type="text"> </span>
</div>
</div>
<div id="xb" class="owinput">
<div class="owlabel">
<label class="req" for="pwd"> 密 码 :</label>
</div>
<div class="owfield">
<span class="inp"> <input id="pwd" name="pwd" type="text"> </span>
</div>
</div>
<div id="xb" class="owinput">
<div class="owlabel">
<label class="req" for="confirm_pwd"> 密码确认 :</label>
</div>
<div class="owfield">
<span class="inp"> <input name="confirm_pwd" type="text"> </span>
</div>
</div>
<div id="csrq" class="owinput">
<div class="owlabel">
<label class="req" for="f2csrq"> 出生日期 :</label>
</div>
<div class="owfield">
<span class="inp"> <input name="f2csrq" type="text"> </span>
</div>
</div>
<div id="xjzd" class="owinput">
<div class="owlabel">
<label class="req" for="f2xjzd"> 现居住地 :</label>
</div>
<div class="owfield">
<span class="inp"> <input value="" name="f2xjzd" type="text"> </span>
</div>
</div>
<div id="sfzh" class="owinput">
<div class="owlabel">
<label class="req" for="f2sfzh"> 身份证号 :</label>
</div>
<div class="owfield">
<span class="inp"> <input name="f2sfzh" type="text"> </span>
</div>
</div>
</fieldset>
<div id="messageBox"></div> <!-- 此容器用于汇总显示错误信息 -->
<div id="regSubmit">
<span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">
<b class="tl"><b class="tr"></b></b><button id="send" type="submit">提 交</button><b class="bl"><b class="br"></b></b>
</span>
<span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">
<b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取 消</button><b class="bl"><b class="br"></b></b>
</span>
</div>
</form>
</div>
<div id="footer"></div>
分享到：
相关推荐
`jQuery Validate`是一个非常流行且功能强大的JavaScript库，用于验证HTML表单中的输入数据。这个插件极大地简化了前端数据验证的过程，为开发者提供了丰富的选项和自定义规则。 首先，`jQuery Validate`的核心功能...
在Web开发中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互。而jQuery Validate和...总的来说，jQuery Validate和jQuery Metadata是提高Web应用用户体验和数据质量的重要工具。
在`jqueryvalidate验证demo`中，包含了多个实例，演示了基本验证、自定义规则、验证组等常见功能的应用。通过查看和运行这些示例，可以更深入地理解和掌握jQuery Validate的使用。 总结，jQuery Validate插件以其...
本文将深入探讨jQuery.validate的实际应用，结合“jQuery.validate使用手册”进行详尽的解析。 首先，我们需要了解jQuery.validate的基本用法。在项目中引入jQuery库和validate插件后，可以通过以下方式初始化验证...
在使用jQuery.validate插件前，首先需要引入jQuery库和jQuery.validate插件的JavaScript文件。在这个案例中，我们有两个文件：`jquery.js`和`jquery.validate.js`。`jquery.js`是jQuery的核心库，负责提供DOM操作、...
通过jQuery.validate，开发者可以轻松地实现诸如必填项检查、格式验证（如邮箱、电话号码）、远程数据验证等功能，而无需编写大量的JavaScript代码。 ### 实现用户名唯一性检查 #### 配置与实现步骤 1. **添加...
下面是一个简单的使用示例，展示了如何在表单上应用 `jQuery.validate.js` 进行验证： ```html 提交"> $(document).ready(function() { $("#myForm").validate(); }); ``` 在这个例子中，`email` 输入...
`jQuery Validate`是一个非常流行的JavaScript库，用于在前端进行表单验证。这个库极大地简化了对用户输入数据的检查，确保在提交之前数据是有效且符合预期格式的。`jQuery Validate`是`jQuery`生态的一部分，它依赖...
1. **Rule名称作为关键**：在`jQuery.validate`中，每个验证规则都有一个唯一的标识符（即名称），通过这个名称可以在配置中指定该规则应用于哪些表单项。 ```javascript rules: { username: { required: true,...
在实际应用中，我们首先需要在页面中引入jQuery库，然后引入jQuery Validate插件。接着，我们可以对表单进行配置，定义验证规则和错误消息： ```html <script src="jquery-1.8.3.min.js"> <script src="jquery....
<script src="test/jquery.validate.js" type="text/javascript"> ``` 接下来，创建一个包含表单元素的HTML结构。例如，一个用户注册表单可能包含用户名、真实姓名、邮箱、密码和确认密码等字段。每个字段都可以通过...
《jQuery Validate插件详解与实例应用》 在Web开发中，表单验证是不可或缺的一环，它能够确保用户输入的数据符合预设的规则，提高数据的准确性和安全性。jQuery Validate是一个强大的JavaScript库，专为jQuery设计...
jquery.validate是jQuery的一个表单验证插件，它提供了丰富、灵活的表单验证功能，可以极大地简化开发者在前端表单验证中的工作。使用jquery.validate可以轻松地对表单中的字段进行验证，确保输入数据符合要求，从而...
<script src="jquery.validate.js" type="text/javascript"> ``` ### 二、默认校验规则 jQuery Validate提供了一系列内置的验证规则，用于检查各种类型的数据格式： 1. **required**：验证字段是否为空，如果为空...
<script type="text/javascript" src="js/jquery.validate.pack.js"> ``` 接下来，你可以通过调用 `$.fn.validate` 方法来初始化验证器，如下： ```javascript $(document).ready(function() { $("#textForm")....
8. **demo**：演示示例，通常用于展示如何配置和使用`jQuery Validate`插件，开发者可以通过查看和运行这些例子来学习如何应用验证规则。 使用`jQuery Validate`时，你需要在HTML中指定验证规则，这通常通过添加...
在本文中，我们将深入探讨如何利用jQuery来扩展textarea元素的功能，并结合`jquery.validate.js`库进行长度验证，确保用户输入的文本长度符合预设要求。 首先，我们需要了解`textarea`元素的基本用法。`textarea`是...
在项目中使用jQuery Validate插件，首先需要下载并引入jQuery库和jQuery Validate插件的JavaScript文件。通常，它们会包含在`validate.js`或`jquery.validate.min.js`这样的文件中。在HTML文件中，通过`<script>`...
在本文中，我们将深入探讨 `jQuery Validate` 框架的核心功能、选项以及如何在实际应用中使用它们。 ### 1. `validate()` 方法 `validate()` 是 jQuery Validate 插件的主要入口点，用于启动验证过程。例如： ```...
<script src="js/jquery.validate.min.js"> <script src="js/messages_zh.min.js"> ``` 接着，我们创建一个简单的表单，并为其分配一个唯一的ID，例如`id="form"`，这样可以通过jQuery选择器方便地访问它。表单中...