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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery表单验证例子</title>
  6. <link type="text/css" rel="stylesheet" media="screen" href="style/cmxform.css" />
  7. <link type="text/css" rel="stylesheet" media="screen" href="style/reg.css" />
  8. <!--[if lte IE 6]>
  9. <link type="text/css" rel="stylesheet" media="screen" href="style/ie.css" />
  10. <![endif]-->
  11.  
  12. <script type="text/javascript" src="script/jquery.js"></script>
  13. <script type="text/javascript" src="script/jquery.validate.js" charset="gb2312"></script>
  14. <script type="text/javascript" src="script/buttonstyle.js"></script>
  15.  
  16. <script>
  17. function checkidcard(num){
  18. var len = num.length, re;
  19. if (len == 15)
  20. re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);
  21. else if (len == 18)
  22. re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);
  23. else{
  24. //alert("请输入15或18位身份证号,您输入的是 "+len+ "位");
  25. return false;
  26. }
  27. var a = num.match(re);
  28. if (a != null){
  29. if (len==15){
  30. var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
  31. var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
  32. }else{
  33. var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
  34. var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
  35. }
  36. if (!B){
  37. //alert("输入的身份证号 "+ a[0] +" 里出生日期不对!");
  38. return false;
  39. }
  40. }
  41.  
  42. return true;
  43. }
  44. </script>
  45.  
  46. <script type="text/javascript">
  47. $.validator.setDefaults({
  48. submitHandler: function() { alert("submitted!"); }
  49. });
  50.  
  51. // 添加验证方法 (身份证号码验证)
  52. jQuery.validator.addMethod("isIdCardNo", function(value, element) {
  53. return this.optional(element) || checkidcard(value);
  54. }, "请正确输入您的身份证号码");
  55.  
  56. $().ready(function() {
  57. $("#firstform").validate();
  58.  
  59. $("#secondform").validate({
  60. /*errorLabelContainer: "#messageBox", //显示错误信息的容器ID
  61. wrapper: "li", //包含每个错误信息的容器*/
  62. rules:{
  63. xm:{
  64. required: true,
  65. minlength: 2,
  66. maxlength: 5
  67. },
  68. pwd:{
  69. required: true,
  70. minlength: 6
  71. },
  72. confirm_pwd:{
  73. required: true,
  74. equalTo: "#pwd"
  75. },
  76. f2csrq:{
  77. required: true,
  78. date: true
  79. },
  80. f2xjzd: {
  81. required: true
  82. },
  83. f2sfzh:{
  84. /*digits: true,
  85. rangelength: [18,20]*/
  86. required: true,
  87. isIdCardNo: true
  88. }
  89. },
  90. messages:{
  91. xm:{
  92. required: "请填写姓名",
  93. minlength: "字符长度不能小于2个字符",
  94. maxlength: "字符长度不能大于5个字符"
  95. },
  96. pwd:{
  97. required: "请填写密码",
  98. minlength: "字符长度不能小于6个字符"
  99. },
  100. confirm_pwd:{
  101. required: "请再次输入密码",
  102. equalTo: "密码不一致"
  103. },
  104. f2csrq:{
  105. required: "请输入出生日期",
  106. date: "日期格式不正确(例:2009/04/07)"
  107. },
  108. f2xjzd:{
  109. required: "请输入地址"
  110. },
  111. f2sfzh:{
  112. /*digits: "身份证号码只能为数字",
  113. rangelength: "身份号码长度为18~20个字符"*/
  114. required: "请输入身份证号",
  115. isIdCardNo: "身份证号不正确"
  116. }
  117. }
  118. });
  119.  
  120. /*// 输入框获得焦点时,样式设置
  121. $('input').focus(function(){
  122. if($(this).is(":text") || $(this).is(":password"))
  123. $(this).addClass('focus');
  124. if ($(this).hasClass('have_tooltip')) {
  125. $(this).parent().parent().removeClass('field_normal').addClass('field_focus');
  126. }
  127. });
  128.  
  129. // 输入框失去焦点时,样式设置
  130. $('input').blur(function() {
  131. $(this).removeClass('focus');
  132. if ($(this).hasClass('have_tooltip')) {
  133. $(this).parent().parent().removeClass('field_focus').addClass('field_normal');
  134. }
  135. });*/
  136. });
  137. </script>
  138. </head>
  139.  
  140. <body>
  141. <div id="header"></div>
  142. <div id="main">
  143.  
  144. <form id="firstform" method="get" action="">
  145. <fieldset>
  146. <legend>jQuery验证</legend>
  147. <div id="xm" class="owinput">
  148. <div class="owlabel">
  149. <label class="req" for="xm"> 姓 名 :</label>
  150. </div>
  151. <div class="owfield">
  152. <span class="inp"> <input name="xm" class="required" minlength="2"> </span>
  153. </div>
  154. </div>
  155.  
  156. <div id="xb" class="owinput">
  157. <div class="owlabel">
  158. <label class="req" for="f1pwd"> 密 码 :</label>
  159. </div>
  160. <div class="owfield">
  161. <span class="inp"> <input id="f1pwd" name="f1pwd" class="required" minlength="6"> </span>
  162. </div>
  163. </div>
  164.  
  165. <div id="xb" class="owinput">
  166. <div class="owlabel">
  167. <label class="req" for="f1pwd2"> 密码确认 :</label>
  168. </div>
  169. <div class="owfield">
  170. <span class="inp"> <input value="" name="f1pwd2" type="text" class="required" equalTo="#f1pwd"> </span>
  171. </div>
  172. </div>
  173.  
  174. <div id="csrq" class="owinput">
  175. <div class="owlabel">
  176. <label class="req" for="f1csrq"> 出生日期 :</label>
  177. </div>
  178. <div class="owfield">
  179. <span class="inp"> <input name="f1csrq" type="text" class="required date"> </span>
  180. </div>
  181. </div>
  182.  
  183. <div id="xjzd" class="owinput">
  184. <div class="owlabel">
  185. <label class="req" for="f1xjzd"> 现居住地 :</label>
  186. </div>
  187. <div class="owfield">
  188. <span class="inp"> <input name="f1xjzd" type="text" class="required"> </span>
  189. </div>
  190. </div>
  191.  
  192. <div id="sfzh" class="owinput">
  193. <div class="owlabel">
  194. <label class="req" for="f1sfzh"> 身份证号 :</label>
  195. </div>
  196. <div class="owfield">
  197. <span class="inp"> <input name="f1sfzh" type="text" class="required isIdCardNo" minlength="18" maxlength="19"> </span>
  198. </div>
  199. </div>
  200. </fieldset>
  201.  
  202. <div id="regSubmit">
  203. <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">
  204. <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提 交</button><b class="bl"><b class="br"></b></b>
  205. </span>
  206. <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">
  207. <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取 消</button><b class="bl"><b class="br"></b></b>
  208. </span>
  209. </div>
  210. </form>
  211.  
  212. <form id="secondform">
  213. <fieldset>
  214. <legend>自定义jQuery验证</legend>
  215. <div id="xm" class="owinput">
  216. <div class="owlabel">
  217. <label class="req" for="xm"> 姓 名 :</label>
  218. </div>
  219. <div class="owfield">
  220. <span class="inp"> <input name="xm" type="text"> </span>
  221. </div>
  222. </div>
  223.  
  224. <div id="xb" class="owinput">
  225. <div class="owlabel">
  226. <label class="req" for="pwd"> 密 码 :</label>
  227. </div>
  228. <div class="owfield">
  229. <span class="inp"> <input id="pwd" name="pwd" type="text"> </span>
  230. </div>
  231. </div>
  232.  
  233. <div id="xb" class="owinput">
  234. <div class="owlabel">
  235. <label class="req" for="confirm_pwd"> 密码确认 :</label>
  236. </div>
  237. <div class="owfield">
  238. <span class="inp"> <input name="confirm_pwd" type="text"> </span>
  239. </div>
  240. </div>
  241.  
  242. <div id="csrq" class="owinput">
  243. <div class="owlabel">
  244. <label class="req" for="f2csrq"> 出生日期 :</label>
  245. </div>
  246. <div class="owfield">
  247. <span class="inp"> <input name="f2csrq" type="text"> </span>
  248. </div>
  249. </div>
  250.  
  251. <div id="xjzd" class="owinput">
  252. <div class="owlabel">
  253. <label class="req" for="f2xjzd"> 现居住地 :</label>
  254. </div>
  255. <div class="owfield">
  256. <span class="inp"> <input value="" name="f2xjzd" type="text"> </span>
  257. </div>
  258. </div>
  259.  
  260. <div id="sfzh" class="owinput">
  261. <div class="owlabel">
  262. <label class="req" for="f2sfzh"> 身份证号 :</label>
  263. </div>
  264. <div class="owfield">
  265. <span class="inp"> <input name="f2sfzh" type="text"> </span>
  266. </div>
  267. </div>
  268. </fieldset>
  269. <div id="messageBox"></div> <!-- 此容器用于汇总显示错误信息 -->
  270. <div id="regSubmit">
  271. <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">
  272. <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提 交</button><b class="bl"><b class="br"></b></b>
  273. </span>
  274. <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">
  275. <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取 消</button><b class="bl"><b class="br"></b></b>
  276. </span>
  277. </div>
  278. </form>
  279. </div>
  280. <div id="footer"></div>
  281. </body>
  282. </html>

文章来自:http://www.cnblogs.com/chenxizhang/archive/2010/01/24/1655311.html

jquery:validate的例子的更多相关文章

  1. jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  2. jquery.validate不用submit而用js提交的例子

    $("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...

  3. jQuery Validate 验证,校验规则写在控件中的具体例子

    将校验规则写到控件中 <script src="../js/jquery.js" type="text/javascript"></scrip ...

  4. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  5. ASP.NET MVC 5 Jquery Validate

    ClientValidationEnabled 在asp.net mvc 5中ClientValidationEnabled默认为TRUE,所以也不需要刻意去设置 应用ValidationAttrib ...

  6. jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  7. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  8. jquery.validate使用 - 1

    jquery.validate使用攻略 好几年不写JS了,资料整理起来比较慢,格式也有点乱 主要分几部分jquery.validate 基本用法jquery.validate API说明jquery. ...

  9. ASP.NET MVC和WebForm 轻松实现前端和后端的双重验证 jquery.validate+ValidationSugar

    上次不足的改进 可能上一个贴子给大家带来很多误解,所以我这次把DEMO完善了两个版本 [ASP.NET WEBFROM]和[ ASP.NET MVC] 修改了一些BUG,并且修改了一些细了 在上个贴子 ...

随机推荐

  1. JAVA中常说的三大框架指:SSH

    即:spring.Struts.hibernate Spring:功能强大的组件粘合济,能够将你的所有的Java功能模块用配置文件的方式组合起来(还让你感觉不到spring的存在)成为一个完成的应用 ...

  2. jQuery实现选项联动轮播

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQuery基础知识总结

    1.  jQuery基本概念介绍             1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...

  4. DatatableToJson JsonToDatatable

    using Newtonsoft.Json;using Newtonsoft.Json.Converters; /// <summary> /// 将DataTable类型转为JSON类型 ...

  5. Android—ZXing二维码扫描遇到的问题

    最近工作中需要开发带有二维码扫描功能的软件(基于开源项目ZXing),遇到的问题记录一下,也希望给大家带来帮助. 1.首先因为扫描要开摄像机所以加权限是一定的,不然后面什么都不能进行 <uses ...

  6. xcode svn commit is not under version control (1) & git commit

    使用Xcode提交一个第三方库时,由于包含资源文件,总是提交不了,提示报错:XXX commit is not under version control (1) 网上查了下,得知 xcode对于sv ...

  7. Android 源码解析之AsyncTask

    AsyncTask相信大家都不陌生,它是为了简化异步请求.更新UI操作而诞生的.使用它不仅可以完成我们的网络耗时操作,而且还可以在完成耗时操作后直接的更新我们所需要的UI组件.这使得它在android ...

  8. IOS开发基础知识--碎片43

    1:增加手势进行左划效果,针对视图并修改其中一个的坐标,菜单用隐藏跟显示 @property(strong,nonatomic)UISwipeGestureRecognizer *recognizer ...

  9. Visual Studio 2015上安装Entity Framework Power Tools

    Entity Framework Power Tools是个非常好用的EF Code First插件.通过它能够非常简单地生成和数据库结构匹配的model和dbcontext代码.使用的方法,这里有介 ...

  10. 下一代Asp.net开发规范OWIN(3)—— Middleware

    Middleware是OWIN管道的基本组成单元,最后拼接的OWIN管道来处理客户端请求,输出网页.这篇文章,首先看看Web Form, MVC, Web API如何结合OWIN使用. 然后将如何编写 ...