表单的验证

最新推荐文章于 2024-10-10 10:50:43 发布

ITnainiu

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量115

点赞数

文章标签： javascript js html css

本文链接：https://blog.csdn.net/ITnainiu/article/details/105230021

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form action="#" method="get" id="f">
			用户姓名:<input type="text" name="name" /><span></span><br />
			用户生日:<input type="text" name="birthday"/><span></span><br />
			phone:<input type="number" name="phone"/><span></span><br />
			qq:<input type="text" name="qq"/><span></span><br />

			<input type="submit" value="提交"/>
		</form>
	</body>
	<script type="text/javascript">
		/* 
		 /^ $/ 
		 [0-9] 一个字符 从0-9
		 [a-zA-Z0-9] 一个字符  英文或者数字
		 
		 常用元字符串：
		 \d 数字 [0-9]
		 \D 非数字 [^0-9]
		 \w 数字英文下划线  [0-9a-zA-Z_]
		 \W 非数字英文下划线[^0-9a-zA-Z_]
		 \s 空白
		 \S 非空白
		 .  任意
		 
		 限定符：匹配几个字符
			* 0次或者多次
			+ 至少有一次
			？ 0或者1次
			{n} n次
			{n,} 至少n次
			{n,m} 至少n次 至多m次
			
		 [\u4e00-\u9fa5]	
		 手机验证：/^1\d{10}$/	
		 日期验证:/^((19\d{2})|(20\d{2}))-(((0[469]|11)-((012[1-9])|10|20|30))|((0[13578]|10|12)-((012[1-9])|10|20|30|31))|((02)-((012[1-8])|10|20|09|19)))$/;
		 邮箱验证:/^1\d{4,11}@(qq[.]com)|(sina[.]com)$/
		 名字验证:/^[\u4e00-\u9fa5]{2,4}$/	 
		 */
		//获取文本框
		var uName = document.getElementsByTagName("input")[0];
		var uBirthday = document.getElementsByTagName("input")[1];
		var uPhone = document.getElementsByTagName("input")[2];
		var uQQ = document.getElementsByTagName("input")[3];
		var elements = [uName,uBirthday,uPhone,uQQ]
		var rules = [
			{
				name:"name",
				reg:/^[\u4e00-\u9fa5]{2,4}$/,
				msg:"请输入正确格式的名字"
			},
				
			{
				name:"birthday",
				reg:/^((19\d{2})|(20\d{2}))-(((0[469]|11)-((012[1-9])|10|20|30))|((0[13578]|10|12)-((012[1-9])|10|20|30|31))|((02)-((012[1-8])|10|20|09|19)))$/,
				msg:"请输入正确日期"
			},
			{
				name:"phone",
				reg:/^1\d{10}$/,
				msg:"请输入11位有效数字"
			},
			{
				name:"qq",
				reg:/^1\d{4,11}$/,
				msg:"请输入5-12位有效数字"
			}
		];
		function getRuleByName(rules,rName){
			var length = rules.length;
			var rule = null;
			for(var i = 0 ; i < length ; i++){
				if(rules[i].name == rName){
					rule = rules[i];
					break;
				}
			}
			return rule;
		}
		
		function checkText(f){
			var form = document.getElementById(f);
			var input_count = form.children.length;
			for(var i = 0; i<elements.length ; i++){
					elements[i].addEventListener("focusout",function(){
						var rName = this.name;
						var rule = getRuleByName(rules,rName);
						var span = this.nextElementSibling;
						if(!rule.reg.test(this.value)){
							span.innerHTML=rule.msg;
							span.style.color = "red";
						}else{
							span.innerHTML="";
							span.style.color = "";
						}
					})
					
			}	
		}
		window.onload = function(){
			checkText("f");
		}
	</script>
</html>