<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" οnmοuseοver="btncreatehover(this);" οnmοuseοut="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" οnmοuseοver="btncancelhover(this);" οnmοuseοut="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" οnmοuseοver="btncreatehover(this);" οnmοuseοut="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" οnmοuseοver="btncancelhover(this);" οnmοuseοut="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>
先贴到容器里看看效果吧。
官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation
jQuery验证控件jquery.validate.js使用说明+中文API
jQuery plugin: Validation 使用说明
参考：3WSchool
一导入js库
<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 必须输入正确格式的日期 日期校验ie6出错，慎用
(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.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'}"
2.将校验规则写到js代码中
$("#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，将调用默认的信息
< 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
最低0.47元/天 解锁文章
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
