表單驗證js[使用條件: 必須在form的table中 使用方法]
阿新 • • 發佈:2019-01-01
/* * 使用條件: 必須在form的table中 使用方法: 1.在每個表單控制元件中新增"valiType"屬性,屬性選取正則陣列中的屬性名並且以"-"進行分隔 * 如下面的例valiType="notempty-chinese" 則代表了"非空,僅中文"的要求.如果 為select控制元件只能判斷非空 * 2.在提交按鈕中新增onclic="return validatorRegex()" <form name="valForm" * action="http://www.baidu.com" > <table width="538" height="214" border="1"> * <li> <span >姓名</span> <input type="text" valiType="notempty-chinese" /> * </li> <li> <input type="submit" onclick="return validatorRegex()" * name="btnSubmit" value="提交"> </li> </table> </form> */ // 驗證正則,根據需求可以自行新增正則 var regexEnum = { intege : /^-?[1-9]\d*$/, // 整數 intege1 : /^[1-9]\d*$/, // 正整數 intege2 : /^-[1-9]\d*$/, // 負整數 intege3 : /^([1-9]\d*|\d+\.\d+)$/,// 正數 num : /^([+-]?)\d*\.?\d+$/, // 數字 num1 : /^[1-9]\d*|0$/, // 正數(正整數 + 0) num2 : /^-[1-9]\d*|0$/, // 負數(負整數 + 0) num3 : /^-([1-9]\d*|\d+\.\d+)$/,// 負數且包含浮點數 num4 : /^([1-9]\d*\.\d*|0\.\d+|[1-9]\d*|0)$/,// 正數且包含浮點數 + 0 decmal : /^([+-]?)\d*\.\d+$/, // 浮點數 decmal1 : /^[1-9]\d*.\d*|0.\d*[1-9]\d*$/, // 正浮點數 decmal2 : /^-([1-9]\d*.\d*|0.\d*[1-9]\d*)$/, // 負浮點數 decmal3 : /^-?([1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0)$/, // 浮點數 decmal4 : /^[1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0$/, // 非負浮點數(正浮點數 + 0) decmal5 : /^(-([1-9]\d*.\d*|0.\d*[1-9]\d*))|0?.0+|0$/, // 非正浮點數(負浮點數 + 0) email : /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/, // 郵件 chinese : /^[\u4E00-\u9FA5\uF900-\uFA2D]+$/, // 僅中文 ascii : /^[\x00-\xFF]+$/, // 僅ACSII字元 zipcode : /^\d{6}$/, // 郵編 mobile : /^[1][3,4,5,7,8][0-9]{9}$/, // 手機 ip4 : /^(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)$/, // ip地址 notChars : /^[\u4E00-\u9FA5A-Za-z0-9]+$/, // 不帶特殊字元. 匹配數字,英文,漢字組成的字串 notempty : /^\S+$/, // 非空 tel : /^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/, // 電話號碼的函式(包括驗證國內區號,國際區號,分機號) letter : /^[A-Za-z]+$/, // 字母 letter_u : /^[A-Z]+$/, // 大寫字母 letter_l : /^[a-z]+$/, // 小寫字母 idcard : /^(\d{6})(18|19|20)?(\d{2})([01]\d)([0123]\d)(\d{3})(\d|X)?$/ // 身份證 } // 驗證正則相對應的錯誤提示,如新增新的正則則需在正則提示中新增相應的提示 var regexEnumStr = { intege : "是否為整數", // 整數 intege1 : "是否為正整數", // 正整數 intege2 : "是否為負整數", // 負整數 intege3 : "是否為正數",// 正數 num : "是否為數字", // 數字 num1 : "是否為0或正整數", // 正數(正整數 + 0) num2 : "是否為0或負整數", // 負數(負整數 + 0) num3 : "是否為負數",// 負數且包含浮點數 num4 : "是否為0或正數",// 正數包含浮點數 + 0 decmal : "是否為浮點數", // 浮點數 decmal1 : "是否為正浮點數", // 正浮點數 decmal2 : "是否為負浮點數", // 負浮點數 decmal3 : "是否為浮點數", // 浮點數 decmal4 : "是否為非負浮點數", // 非負浮點數(正浮點數 + 0) decmal5 : "是否為正浮點數", // 非正浮點數(負浮點數 + 0) email : "是否格式有誤", // 郵件 chinese : "是否為非中文", // 僅中文 ascii : "是否格式有誤", // 僅ACSII字元 zipcode : "是否格式有誤", // 郵編 mobile : "是否格式有誤", // 手機 ip4 : "是否格式有誤", // ip地址 notChars : "是否帶有特殊字元", // 不帶特殊字元. 匹配數字,英文,漢字組成的字串 notempty : "是否為空或帶有空格", // 非空 tel : "是否非法", // 電話號碼的函式(包括驗證國內區號,國際區號,分機號) letter : "是否為字母", // 字母 letter_u : "是否為大寫字母", // 大寫字母 letter_l : "是否為小寫字母", // 小寫字母 idcard : "是否格式有誤", // 身份證 isSelect : "是否已選擇" } // 驗證有誤時的彈出框 function valiTipMsg(inputItem, valiType) { var textFiled = inputItem.attributes['caption'].value alert("請檢查\"" + textFiled + "\"" + regexEnumStr[valiType]); return false; } // 驗證方法 function validatorRegex() { var f = document.forms[0]; for (var i = 0; i < f.length - 1; i++) { var inputItem = f.elements[i]; if (inputItem.attributes['valiType']) { var valiType = inputItem.attributes['valiType'].value.split("-"); if (inputItem.selectedIndex == 0) { var td = f.elements[i].parentNode; return valiTipMsg(td, "isSelect"); } else { for (var j = 0; j < valiType.length; j++) { if (!(regexEnum[valiType[j]].test(inputItem.value))) { return valiTipMsg(inputItem, valiType[j]); } } } } // if (inputItem.selectedIndex == 0) { // var td = f.elements[i].parentNode; // return valiTipMsg(td, "isSelect"); // } } return true; }