代碼如下:
<form action="" method="post" id="formValidate"> 數值：<input name="" type="text" validate="number" /><span></span><br/> 浮點型：<input name="" type="text" validate="decimal" /><span></span><br/> 英文：<input name="" type="text" validate="english" /><span></span><br/> 大寫英文：<input name="" type="text" validate="upper_english" /><span></span><br/> 小寫英文：<input name="" type="text" validate="lower_english" /><span></span><br/> 郵件格式：<input name="" type="text" validate="email" /><span></span><br/> 是否包含中文：<input name="" type="text" validate="chinese" /><span></span><br/> URL：<input name="" type="text" validate="url" /><span></span><br/> 電話號碼：<input name="" type="text" validate="phone" /><span></span><br/> IP地址：<input name="" type="text" validate="ip" /><span></span><br/> 金額：<input name="" type="text" validate="money" /><span></span><br/> 數值或者英文或者_：<input name="" type="text" validate="number_letter" /><span></span><br/> 郵政編碼：<input name="" type="text" validate="zip_code" /><span></span><br/> 可用賬號：<input name="" type="text" validate="account" /><span></span><br/> QQ：<input name="" type="text" validate="qq" /><span></span><br/> 身份證:<input name="" type="text" validate="card" /><span></span><br/> 數值 允許為空：<input name="" type="text" validate="number" empty='yes' /><span></span><br/> 數值 長度 1-3：<input name="" type="text" validate="number" min=1 max=3 /><span></span><br/> 數值 長度 1-3 允許為空：<input name="" type="text" validate="number" min=1 max=3 empty='yes'/><span></span><br/> <input name="" type="submit" /> </form> <script src="jquery.js" type="text/javascript"></script> <script src="formValidate.js" type="text/javascript"></script> <script type="text/javascript"> var formValidate = new formValidate(); formValidate.init({}); </script> [javascript] 代碼如下: /* * 通用JS驗證類 * 使用方法： * var formValidate = new formValidate(); * formValidate.init({}); * 注意： * <form action="" method="post" id="formValidate"> * id為formValidate * * <input name="" type="text" validate="zip_code" empty="yes" min=10 max=10 /><span></span> * validate="zip_code" 驗證是否是郵政編碼 * empty="yes" 驗證是否允許為空 * min=10 最小長度 * max=10 最大長度 * <span></span> 顯示提示內容 */ var formValidate = function () { var _this = this; this.options = { number : {reg : /^[0-9]+$/, str : '必須為數字'}, decimal : {reg : /^[-]{0,1}(d+)[.]+(d+)$/ , str : '必須為DECIMAL格式'}, english : {reg : /^[A-Za-z]+$/, str : '必須為英文字母'}, upper_english : {reg : /^[A-Z]+$/, str : '必須為大寫英文字母'}, lower_english : {reg : /^[a-z]+$/, str : '必須為小寫英文字母'}, email : {reg : /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/, str : 'Email格式不正確'}, chinese : {reg : /[u4E00-u9FA5uf900-ufa2d]/ig, str : '必須含有中文'}, url : {reg : /^[a-zA-z]+://[^s]*/, str : 'URL格式不正確'}, phone : {reg : /^[1][3][0-9]{9}$/ , str : '電話號碼格式不正確'}, ip : {reg : /^(d+).(d+).(d+).(d+)$/ , str : 'IP地址格式不正確'}, money : {reg : /^[0-9]+[.][0-9]{0,3}$/ , str : '金額格式不正確'}, number_letter : {reg : /^[0-9a-zA-Z_]+$/ , str : '只允許輸入英文字母、數字、_'}, zip_code : {reg : /^[a-zA-Z0-9 ]{3,12}$/ , str : '郵政編碼格式不正確'}, account : {reg : /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/ , str : '賬號名不合法，允許5-16字符，字母下劃線和數字'}, qq : {reg : /[1-9][0-9]{4,}/ , str : 'QQ賬號不正確'}, card : {reg : /^(d{6})(18|19|20)?(d{2})([01]d)([0123]d)(d{3})(d|X)?$/ , str : '身份證號碼不正確'}, }; //初始化 綁定表單 選項 this.init = function (options) { this.setOptions(options); this.checkForm(); }; //設置參數 this.setOptions = function (options) { for (var key in options) { if (key in this.options) { this.options[key] = options[key]; } } }; //檢測表單 包括是否為空，最大值 最小值，正則驗證 this.checkForm = function () { $("#formValidate").submit(function () { var formChind = $("#formValidate").children(); var testResult = true; formChind.each(function (i) { var child = formChind.eq(i); var value = child.val(); var len = value.length; var childSpan = child.next(); //屬性中是否為空的情況 if (child.attr('empty')) { if (child.attr('empty') == 'yes' && value == '') { if (childSpan) { childSpan.html(''); } return; } } //屬性中min 和 max 最大和最小長度 var min = null; var max = null; if (child.attr('min')) min = child.attr('min'); if (child.attr('max')) max = child.attr('max'); if (min && max) { if (len < min || len > max) { if (childSpan) { childSpan.html(''); childSpan.html(' 字符串長度在' + min + '與' + max + '之間'); testResult = false; return; } } } else if (min) { if (len < min) { if (childSpan) { childSpan.html(''); childSpan.html(' 字符串長度應大於' + min); testResult = false; return; } } } else if (max) { if (len > max) { if (childSpan) { childSpan.html(''); childSpan.html(' 字符串長度應小於' + max); testResult = false; return; } } } //正則校驗 if (child.attr('validate')) { var type = child.attr('validate'); var result = _this.check(value, type); if (childSpan) { childSpan.html(''); if (result != true) { childSpan.html(' ' + result); testResult = false; } } } }); return testResult; }); }; //檢測單個正則選項 this.check = function (value, type) { if (this.options[type]) { var val = this.options[type]['reg']; if (!val.test(value)) { return this.options[type]['str']; } return true; } else { return '找不到該表單驗證正則項'; } }; }