jquery:validate的例子{转载}

该文档转载自 http://ideabean.javaeye.com/blog/363927

官方网站 http://bassistance.de/jquery-plugins/jquery-plugin-validation/

酷就一个字，我就说一次，嘿嘿

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证例子</title>
<link type="text/css" rel="stylesheet" media="screen" href="style/cmxform.css" />
<link type="text/css" rel="stylesheet" media="screen" href="style/reg.css" />
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" media="screen" href="style/ie.css" />
<![endif]-->  <script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jquery.validate.js" charset="gb2312"></script>
<script type="text/javascript" src="script/buttonstyle.js"></script>  <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>
</head>  <body>
<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>
</body>
</html>

转载于:https://www.cnblogs.com/chenxizhang/archive/2010/01/24/1655311.html

jquery:validate的例子{转载}相关推荐

jQuery validate 表单验证，涵盖各种类型数据
本来觉得用这个会很难,结果试了试,发现却是简单了不少东西啊,什么getElementById,if 什么的,只用几个属性名什么的就可以解决不同状态显示不同提示,很强大很方便. <%@ page ...
jQuery.validate.js API
为什么80%的码农都做不了架构师?>>> jQuery.validate.js API 转载于:https://my.oschina.net/azheng/blog/10281
jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
jquery.validate不用submit而用js提交的例子
$("#form").validate(); $("#btn).click(function(){if($("#form").valid()){$(& ...
jQuery Validate 验证，校验规则写在控件中的具体例子
将校验规则写到控件中 <script src="../js/jquery.js" type="text/javascript"></scrip ...
[jQuery]使用jQuery.Validate进行客户端验证（高级篇-下）——不使用微软验证控件的理由...
2019独角兽企业重金招聘Python工程师标准>>> 引用源:http://www.cnblogs.com/kyo-yo/archive/2010/07/06/Use-jQuery ...
jQuery Validate验证框架详解
2019独角兽企业重金招聘Python工程师标准>>> 一.导入js库 <script type="text/javascript" src="& ...
jquery validate 插件：(2)简单示例
最简单的例子,比如我们有一个表单: <form action="" method="get" id="frm"> < ...
jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

jquery:validate的例子{转载}

jquery:validate的例子{转载}相关推荐

最新文章

热门文章