表单验证时常用正则表达式(以“注册信息”为例)

个人在使用时看到网上总结的有很多了,但大多文章表述的都比较抽象,使用时需要自己组合,通常因为懒所以实际在用时习惯直接拿来用,总结的是本人写程序的过程中用的频率比较高的几个实例:

另:这里有一个博主总结的很不错,链接贴上

个人整理的web开发中常用的表单验证的正则表达式JS——Mr_Smile2014 的文章(侵删)

 

/*验证是否同意协议*/
function checkAgree() {
	document.MyForm.subm.disabled = !document.MyForm.isAgree.checked;
}

 

/* 验证用户名 */
function checkUsername() {
	var reg = /^\D\w{4,9}$/ig;/* 不能以数字开头,长度在5-10位 */
	var id = "uname";
	return commonInfo(reg, id);
}

 

/* 验证密码 */
function checkPassword() {
	var reg = /^\d{6}$/ig;/* 必须是数字,位数为6位 */
	var id = "upwd";
	return commonInfo(reg, id);
}

 

/* 验证真实姓名 */
function checkTruename() {
	var reg = /^[\u4e00-\u9fa5]{2,4}$/ig;/* 必须是2-4位的汉字 */
	var id = "tname";
	return commonInfo(reg, id);
}

 

/*验证出生日期*/
function checkBirth(){
	var reg=/^(19\d{2})|((200\d)-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1]))|((201[0-6])-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1]))$/ig;
	var id="birthday";
	return commonInfo(reg, id);
}

 

/*验证身份证*/
function checkBirth(){
	var reg=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
	var id="birthday";
	return commonInfo(reg, id);
}

 

/* 验证电子邮箱 */
function checkEmail() {
	/* 字母数字下划线[a0_] + (0-N个".a0_") + @ + a0_ + (1-2组由2-3个a0_组成的字符,如com.cn或com) */
	var reg = /^(\w)+(\.\w)*@(\w)+(\.\w{2,3}){1,2}$/ig;
	var id = "email";
	return commonInfo(reg, id);
}

 

 

 

 
  
/* 验证手机号 */
function checkPhone() {
	var reg = /^1[35789]\d{9}$/ig;/* 这个比较简单,不说了 */
	var id = "phone";
	return commonInfo(reg, id);
}

 

/* 提取公共的文本类表单项验证 */
function commonInfo(reg, id) {
	var inputText = document.getElementById(id);
	var inputValue = inputText.value;
	var inputAlt = inputText.alt;
	var inputSpan = document.getElementById(id + "Span");

	if (inputValue == null || inputValue.length == 0) {
		inputSpan.innerHTML = inputAlt + "不能为空!";
		inputSpan.style.color = "red";
		inputSpan.style.background="none";
		return false;
	} else {
		if (!reg.test(inputValue)) {
			inputSpan.innerHTML = inputAlt + "格式有误!";
			inputSpan.style.color = "red";
			inputSpan.style.background="none";
			return false;
		} else {
			inputSpan.innerHTML = "√";
			inputSpan.style.color = "white";
			inputSpan.style.background="rgb(50,200,100)";
			inputSpan.style.padding="2px 4px";
			inputSpan.style.borderRadius="15px";
			return true;
		}
	}
}


其中还有check验证码,获取验证码,提交按钮是否可用的判断,两次密码输入一致的判断,跟在后面,但是跟主题无关了,可以跳过;

 

附:其余表单功能补充:

/* 获得验证码 */
function getCode() {
	var code = parseInt(Math.random() * 9000 + 1000);
	var span = document.getElementById("getCode");
	span.innerHTML = code;
	span.style.fontSize = "18px";
	span.style.padding = "3px 6px";
	span.style.color = "red";
	span.style.textDecoration= "line-through";
	span.style.cursor = "pointer";
	span.style.border = "1px #000 solid";
}

/* 校验验证码 */
function checkCode() {
	var code = document.getElementById("getCode").innerHTML;
	var inputCode = document.getElementById("checkcode").value;
	var inputSpan = document.getElementById("codeSpan");
	if (inputCode == null || inputCode.length == 0) {
		inputSpan.innerHTML = "验证码不能为空!";
		inputSpan.style.color = "red";
		return false;
	} else {
		if (inputCode != code) {
			inputSpan.innerHTML = "验证码输入错误!";
			inputSpan.style.color = "red";
			return false;
		} else {
			inputSpan.innerHTML = "OK!";
			inputSpan.style.color = "green";
			return true;
		}
	}
}

/* 验证爱好的选择 */
function checkHobby() {
	var choice = document.getElementsByName("hobby");/* 注意这里只能通过name值获得,因为id是为唯一的 */
	var Hspan = document.getElementById("hobbySpan");
	var count = 0;
	for (var i = 0; i < choice.length; i++) {
		if (choice[i].checked) {
			count++;
		}
	}
	if (count >= 2) {
		Hspan.innerHTML = "OK!";
		Hspan.style.color = "green";
		return true;
	} else {
		Hspan.innerHTML = "至少选择两项!";
		Hspan.style.color = "red";
		return false;
	}
}

/* 验证两次密码是否一致 */
function checkSame() {
	var reg = /^\d{6}$/ig;/* 必须是数字,位数为6位 */
	var inputText = document.getElementById("confirmPassword");
	var inputValue = inputText.value;
	var inputAlt = inputText.alt;
	var inputSpan = document.getElementById("confirmPasswordSpan");
	var first = document.getElementById("eu_password").value;
	if (inputValue == null || inputValue.length == 0) {
		inputSpan.innerHTML = inputAlt + "不能为空!";
		inputSpan.style.color = "red";
		return false;
	} else {
		if (!reg.test(inputValue)) {
			inputSpan.innerHTML = inputAlt + "格式有误!";
			inputSpan.style.color = "red";
			inputSpan.style.background="none";
			return false;
		} else {
			if (first == inputValue) {
				inputSpan.innerHTML = "√";
				inputSpan.style.color = "white";
				inputSpan.style.background="rgb(50,200,100)";
				inputSpan.style.padding="2px 4px";
				inputSpan.style.borderRadius="15px";
				return true;
			} else {
				inputSpan.innerHTML = "两次密码输入不一致";
				inputSpan.style.color = "red";
				inputSpan.style.background="none";
				return false;
			}
		}
	}
}

/* 验证是否可以提交 */
function checkSubmit() {
	return checkCode() && checkUsername() && checkedPassword() && checkSame()
			&& checkedTruename() && checkHobby() && checkedEmail()
			&& checkedPhone();
}

 

 

 

以下为html代码:


		
用 户 名:
输入密码:
确认密码:
真实姓名:
电子邮箱:
手机号码:
爱好:
音乐 电影 篮球
美术 唱歌 跳舞
验证码:
是否同意协议

 

你可能感兴趣的:(HTML)