JavaScript实现简单表单验证-Web笔记（四）

最新推荐文章于 2024-01-01 00:25:01 发布

xiaoyanol

最新推荐文章于 2024-01-01 00:25:01 发布

阅读量666

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/xiaoyanol/article/details/52939072

版权

Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

用javascript实现表单验证

需求：

1.验证邮箱是否符合规则，并且不能为空

2.验证用户名和密码不能为空，并且长度至少6位

3.验证两次输入的密码是否相同

分析：

1.验证非空 /^\s*$/

2.验证邮箱符合规则，正则表达式是：/^(\w)+@(\w)+(\.\w+)$/

3.验证用户名和密码长度至少6位 /^(\w){6,}$/

4.验证两次输入的密码是否相同，直接比较计即可。

<html>
<head>
	<title>javascript</title>
	<meta charset="utf-8">
</head>


<body>
<script >
	function checkForm(){
		//1.获取数据
		//alert("5555555555555555555555555");
		var email=document.getElementById("email");
		var username=document.getElementById("username");
		var password=document.getElementById("password");
		var repassword=document.getElementById("repassword");
		
		//2.验证非空
		if(checkNull(email.value)){
			//返回true代表email为空
			document.getElementById("email_msg").innerHTML="<font color='red'>邮箱不能为空</font>";
			return false;
		} 
		if(checkNull(username.value)){
			//返回true代表用户名为空
			document.getElementById("username_msg").innerHTML="<font color='red'>用户名不能为空</font>";
			return false;
		}
		
		if(checkNull(password.value)){
			document.getElementById("password_msg").innerHTML="<font color='red'>密码不能为空</font>";
			return false;
		}

		if(checkNull(repassword.value)){
			document.getElementById("repassword_msg").innerHTML="<font color='red'>密码不能为空</font>";
			return false;
		}

	
	
	//3.验证邮箱符合规则
	if(!checkEmail(email.value)){
		document.getElementById("email_msg").innerHTML="<font color='red'>邮箱地址格式不正确</font>";
		return false;
	}

	//4.验证会员名或密码长度大于6位
	if(!checkLength(username.value)){
		document.getElementById("username_msg").innerHTML="<font color='red'>用户名长度必须大于6位</font>";
		return false;
	}
	if(!checkLength(password.value)){
		document.getElementById("password_msg").innerHTML="<font color='red'>密码长度必须大于6位</font>";
		return false;
	}
	//5.验证两次输入的密码
	
	if(password.value != repassword.value){alert(password.value);
	alert(repassword.value);
		document.getElementById("repassword_msg").innerHTML="<font color='red'>密码不一致</font>";
		return false;
	}
}


	function checkNull(data){
		var reg=/^\s*$/;//0或多个空字符串
		return (reg.test(data));
	}
	function checkEmail(data){
		var reg=/^(\w)+@(\w)+(\.\w+)+$/;
		return (reg.test(data));
	}


	function checkLength(data){
		var reg=/^\w{6,}$/;
		return (reg.test(data));
	}


</script>

<form name=a οnsubmit="return checkForm()" ><br>
邮箱<input type="text" id="email" ><span id="email_msg"></span><br>
用户名<input type="text" id="username"><span id="username_msg"></span><br>
密码<input type="password" id="password"><span id="password_msg"></span><br>
再次输入密码<input type="password" id="repassword"><span id="repassword_msg"></span><br>
<input type="submit" value="submit" >
</form>



</body>
</html>

有个需要注意的地方：javascript代码中有错误会导致整段代码不执行。在写的过程中if判断的地方少些一个括号导致一直出不来结果，弄了半天才发现（用文本编辑器写，没有不能检查错误，坑）。