萬盛學電腦網 >> 腳本專題 >> javascript >> jquery插件validation實現驗證身份證號等
jquery插件validation實現驗證身份證號等
這篇文章主要介紹了jquery插件validation實現驗證身份證號、護照、電話號碼、email十分的簡單實用，有需要的小伙伴可以參考下。
先推薦一個基於bootstrap的jQuery validation插件：http://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/
jQuery validation添加驗證規則
validata.html
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 <!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=gb2312" /> <!-- TemplateBeginEditable name="doctitle" --> <title>無標題文檔</title> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"></script> <script src="lib/card.js" type="text/javascript"></script> <script src="lib/validata.js" type="text/javascript"></script> <style type="text/css"> em.success{ background:url("images/tips_arrow.gif") no-repeat left 0px; padding-left:16px; margin-left:2px; } em.error{ background:url("images/tips_arrow.gif") no-repeat left -51px; display:inline; padding-left:10px; font-style:normal; font-size:11px; margin-left:2px; font-family:12px/162% Arial, Helvetica, sans-serif; } </style> </head> <body> <form class="cmsform" id="commentForm" method="get" action=""> <p> <label for="cusername">姓名</label><em>*</em> <input id="cusername" name="username" size="25" /> </p> <p> <label for="cemail">電子郵件</label><em>*</em> <input id="cemail" name="email" size="25" /> </p> <p> <label for="card">身份證號</label><em>*</em> <input id="card" name="card" size="25"/> </p> <p> <label for="passport">護照編號</label><em>*</em> <input id="passport" name="passport" size="25"/> </p> <p> <label for="phone">電話號碼</label><em>*</em> <input id="phone" name="phone" size="25" /> </p> </form> </body> </html>validata.js
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 $(function(){ $.validator.setDefaults({ submitHandler: function(form) { form.submit(); } }); // 字符驗證 jQuery.validator.addMethod("stringCheck", function(value, element) { return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value); }, "只能包括中文字、英文字母、數字和下劃線"); // 中文字兩個字節 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || ( length >= param[0] && length <= param[1] ); }, "請確保輸入的值在3-15個字節之間(一個中文字算2個字節)"); // 身份證號碼驗證 jQuery.validator.addMethod("isIdCardNo", function(value, element) { return this.optional(element) || idCjavascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved