JavaScript 正则表达式&表单验证

最新推荐文章于 2022-12-12 21:03:58 发布

「已注销」

最新推荐文章于 2022-12-12 21:03:58 发布

阅读量5.6k

点赞数 5

分类专栏： JavaScript 文章标签： java 开发语言职场和发展 javascript

本文链接：https://blog.csdn.net/qq_67192586/article/details/123759642

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

案例:表单验证

Html

<body onload="loading()">
		<h1>欢迎来到***注册页面</h1>
		<form onsubmit="return testSub()" onreset="return testReset()">
		<table border="1" cellspacing="0" height="360px" width="500px">
			<tr>
				<td>用户名</td>
				<td><input type="text" id="uname" name="uname" onblur="testUserName()"/>
					<span id="unameSpan" name="myspan"></span><!--name="myspan" 的用来重置清空的-->
				</td>
			</tr>
			
			<tr>
				<td>密码</td>
				<td><input type="password" id="pwd" name="pwd" onblur="testPwd()"/>
					<span id="pwdSpan" name="myspan"></span>
				</td>
			</tr>
			
			<tr>
				<td>确认密码</td>
				<td><input type="password" id="chkpwd" onblur="testChkPwd()" />
					<span id="chkpwdSpan" name="myspan"></span>
				</td>
			</tr>
			
			<tr>
				<td>性别</td>
				<td><input type="radio" name="gender" value="0" checked="true">男
					<input type="radio" name="gender" value="1">女
				</td>
			</tr>
			
			<tr>
				<td>爱好</td>
				<td>
					<input type="checkbox" name="fav" value="0" />吃鸡
					<input type="checkbox" name="fav" value="0" />王者
					<input type="checkbox" name="fav" value="0" />lol
				</td>
			</tr>
			
			<tr>
				<td>手机号</td>
				<td><input type="text" id="phone" onblur="testPhone()"/>
					<span id="phoneSpan" name="myspan"></span>
				</td>
			</tr>
			
			<tr>
				<td></td>
				<td></td>
			</tr>
			
			<tr>
				<td>住址</td>
				<td>
					<select id="addr" onchange="testAddr()">
						<option value="">---请选择---</option>
						<option value="0">天河区</option>
						<option value="0">海珠区</option>
						<option value="0">越秀区</option>
						<option value="0">花都区</option>
					</select>
					<span id="addrSpan"></span>
				</td>
			</tr>
			
			<tr>
				<td>验证码</td>
				<td><input type="text" id="chknum" onblur="testCheckNum()"/>
					<span id="chkNum"></span><!--验证码-->
					<span id="chk" name="myspan"></span><!--提示-->
				</td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<input type="checkbox" onclick="testAgree()" id="agree"/>遵守协议
				</td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="注册" disabled="disabled" id="sub"/>
					<input type="reset" value="重置" />
				</td>
			</tr>
		</table>
		</from>
	</body>

JavaScript

<style>
	.redSpan{
		color:red;
	}
	.greenSpan{
		color:green;
	}
</style>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	
	// 用户名校验
	function testUserName(){
		// 定义一个正则表达式,要求:6-8位字符
		var regex = /^\w{6,8}$/;
		return checkFiled('uname',regex);
	}
	
	// 密码校验
	function testPwd(){
	// 定义一个正则表达式,要求:6-8位数字
		var regex = /^\d{6,8}$/;
		checkFiled('pwd',regex);
		
	// 在录入了确认密码框,然后再录入密码的时候进行的校验:
		testChkPwd();
	}
	
	// 手机号验证
	function testPhone(){
		// 定义一个正则表达式,
		var regex = /^1[3456789]\d{9}$/;
		return checkFiled('phone',regex);
	}
	
	//
	function checkFiled(id,regex){
		// 获取文本框中录入的数据
		var a=$(id).value;
		// 获取提示框的区域
		var s=$(id+'Span');
		// 开始校验:
		if(a.length == 0){ // 录入数据为空
			s.innerHTML="*";
			s.className="redSpan";
			return false;
		}else if(regex.test(a)){ // 录入数据不为空,并且录对了
			s.innerHTML="√";
			s.className="greenSpan";
			return true;
		}else{// 录入数据不空,并且录错了
			s.innerHTML="×";
			s.className="redSpan";
			return false;
		}
	}
	
	function testChkPwd(){
		// 获取密码的内容
		var oldPwd = $('pwd').value;
		// 获取确认密码框中的内容
		var newPwd = $('chkpwd').value;
		// 获取确认密码后的提示区域,span:
		var s = $('chkpwdSpan');
		
		// 开始校验
		if(newPwd.length == 0){ // 录入数据为空
			s.innerHTML="*";
			s.className="redSpan";
			return false;
		}else if(oldPwd===newPwd){ // 录入数据不为空,并且录对了
			s.innerHTML="√";
			s.className="greenSpan";
			return true;
		}else{// 录入数据不空,并且录错了
			s.innerHTML="×";
			s.className="redSpan";
			return false;
		}
	}
	
	function testAddr(){
		//获取选择的value
		var v= $('addr').value;
		if(v==""){
			$('addrSpan').innerHTML="*";
			$('addrSpan').className="redSpan";
			return false;
		}else{
			$('addrSpan').innerHTML="√";
			$('addrSpan').className="greenSpan";
			return true;
		}
	}
	
	function loading(){
		// 生成一个4位数的验证码
		var num = parseInt(Math.random()*9000)+1000;
		// 将验证码添加到span中
		$('chkNum').innerHTML=num;
	}
	
	function testCheckNum(){
		// 获取验证码文本框的内容
		var oldNum = $('chknum').value;
		// 获取页面加载生成的验证码:内容
		var newNum = $('chkNum').innerHTML;
		// 获取验证码后的提示区域:span:
		var s =$('chk');
		// 开始校验
		if(oldNum.length == 0){
			s.innerHTML="*";
			s.className="redSpan";
			return false;
		}else if(oldNum===newNum){
			s.innerHTML="√";
			s.className="greenSpan";
			return true;
		}else{
			s.innerHTML="×";
			s.className="redSpan";
			return false;
		}
	}
	
	function testAgree(){
		// 获取选中框
		var a = $('agree');
		
		// 获取提交按钮
		var b = $('sub');
		// 如果选中,提交按钮就好使,如果不选中,提交按钮就不好使
		b.disabled= !a.checked;
	}
	
	function testSub(){
		var uname = testUserName();
		var pwd = testChkPwd();
		var phone = testPhone();
		var chkNum = testCheckNum();
		var addr = testAddr();
		return uname && pwd && phone && chkNum && addr;
	}
	
	function testReset(){// 是否重置
		var flag = window.confirm('确认要重置吗?');
		if(flag){ //确认重置
			var spans = document.getElementsByName('myspan');//获取的是集合
			for(var i=0;i<spans.length;i++){
				spans[i].innerHTML="";
			}
			return true;
		}else{
			return false;
		}
	}
</script>