日期:2014-05-16 浏览次数:20445 次
?? 验证表单是我们经常需要做的,今天发现了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>