在js中使用正则表达式匹配表单并提交时检验

最新推荐文章于 2021-01-28 16:20:48 发布

moon-start

最新推荐文章于 2021-01-28 16:20:48 发布

阅读量821

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/longgejia/article/details/61429861

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

为了方便期间只检验用户名和邮箱

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">

	//检查用户名
	function checkName(){
		var inputNode = document.getElementById("userName");
		var spanNode = document.getElementById("userId");
		//获取输入框的内容
		var content  = inputNode.value;
		//用户名的规则： 六位的英文与数字组成。数字不能开头
		var reg = /^[a-z][a-z0-9]{5}$/i;	
		if(reg.test(content)){
			//符合规则
			spanNode.innerHTML = "正确".fontcolor("green");
			
			return true;
		}else{
			//不符合规则
			spanNode.innerHTML = "错误".fontcolor("red");
			
			return false;
		}	
	}


	//检查邮箱
	function checkEmail(){
		var email = document.getElementById("email").value;
		var spanNode = document.getElementById("emailspan");
		
		//编写邮箱的正则       13456@qq.com  13456@qq.net  13456@qq.com.cn
		var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i; 
		if(reg.test(email)){
			//符合规则
			spanNode.innerHTML = "正确".fontcolor("green");
			return true;
		}else{
			//不符合规则
			spanNode.innerHTML = "错误".fontcolor("red");
			
			return false;
		}	
	}
	
	function checkAll(){
		var userName = checkName();	
		var email = checkEmail();
		if(userName&&email){
			return true;
		}else{
		
			return false;
		}
	}
	
/*
 表单提交的时候是会触发onsubmit事件的，如果onsubmit事件的方法返回是true，那么该表单允许提交，如果返回的是false，该表单不允许提交。

*/
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正则表达式</title>
</head>
<body>								
<form action="success.html" method="get" οnsubmit="return checkAll()" > <!--如果表单提交时候触发的方法返回是false,那么该表单不允许提交，如果返回的是true允许提交 -->
			<table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px">
				<tr>
					<td width="25%">姓名:</td>
					<td>
						<input type="text" name="userName" id="userName" οnblur="checkName()"/>
                        <span id="userId"></span>
					</td>
				</tr>
				<tr>
					<td >密码:</td><td>
						<input type="password"  name="pwd" id="pwd" οnblur="checkPass()"/>
                        <span id="passId"></span>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td><td>
				<input type="password" name="ensurepwd" id="ensurepwd" οnblur="ensurepass()" />		                <span id="ensure"></span>
					</td>
				</tr>
				<tr>
					<td>邮箱</td><td>
						<input type="text" name="email" id="email" οnblur="checkEmail()"/>
                		<span id="emailspan"></span>
				        
					</td>
				</tr>
				<tr>
					<td>性别</td><td>
						<input type="radio" checked="ture" name="gender" id="male" value="male"/>
					男
						<input type="radio" name="gender" value="female"/>
					女</td>
				</tr>
				<tr>
					<td>爱好:</td><td>
						<input type="checkbox"  name="like" />
					eat
						<input type="checkbox" name="like" />
					sleep
						<input type="checkbox" name="like"/>
					play  
                    <span id="hobbySpan"></span>
                    </td>
				</tr>
				<tr>
					<td>城市</td><td>
					<select name="city" id="city">
						<option value=""> 请选择</option>
						<option value="bj"> 北京 </option>
						<option value="gz"> 广州 </option>
						<option value="sh"> 上海 </option>
					</select>
                    
                    </td>
				</tr>
				<tr>
					<td>自我介绍</td><td>					<textarea cols="15" rows="5"  name="myInfo" id="myInfo"></textarea></td>
				</tr>
				<tr align="center">
					<td colspan="2"><!--提交按钮-->
					<input type="submit"/>
					</td>
				</tr>
			</table>
		</form>
</body>




</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<h1><font color="#FF0000">恭喜你 ,提交数据成功</font></h1>
</body>
</html>

结果：