1. 程式人生 > >表單驗證js[使用條件: 必須在form的table中 使用方法]

表單驗證js[使用條件: 必須在form的table中 使用方法]

/*
 * 使用條件: 必須在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;
}