表单验证js[使用条件: 必须在form的table中 使用方法]

本文详细介绍了一套全面的表单验证正则表达式集合,覆盖了从整数、浮点数到邮箱、身份证等各类数据类型的验证规则,并提供了详细的错误提示信息,适用于网页表单的数据校验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值