js的表单验证

最新推荐文章于 2020-12-07 19:39:34 发布

不知名程序狗

最新推荐文章于 2020-12-07 19:39:34 发布

阅读量135

点赞数

分类专栏： java 文章标签： js

本文链接：https://blog.csdn.net/qq_43800651/article/details/108434765

版权

java 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

js的表单验证

<html>
	<head>
		<meta charset="UTF-8">
		<title>原生js的表单校验</title>
		<!--
			
			自己定义正则规则:
			用户名:由4到14位的数字或者字母(不区分大小写)组成
			密码:由6-16位的数字或者字母组成(不区分大小写)
			确认密码:需要上一次的输入的密码两次一致!
			邮箱:
				数字或者字母@数字或字母.com/.cn(com.cn...)
		-->
<script>
//用户名
		function chackUserName(){
			//通过id="user"获取标签的对象---获取value属性
			var username = document.getElementById("user").value;
			
			var userSpan = document.getElementById("userSpan")
			var reg = /^[A-Za-z0-9]{4,14}$/;
//			校验
		if(reg.test(username)){
				userSpan.innerHTML ="恭喜你用户名可以用".fontcolor("green");
				return true;
		}else{
			userSpan.innerHTML = "用户名不符".fontcolor("red");
			return false;
		}
			
		}
			
//密码	
	function chackUserPassword(){
		var passwords = document.getElementById("pwd").value;
		var pwdSpans = document.getElementById("pwdSpan");
		var reg = /^[A-Za-z0-9]{6,16}$/;
		//校验
		if(reg.test(passwords)){
			pwdSpans.innerHTML = "恭喜你密码输入成功".fontcolor("green");
			return true;
		}else{
			pwdSpans.innerHTML = "密码输入不符".fontcolor("red");
			return false;
		}
	}
	
//确认密码	
	function chackUserRePassword(){
		//获取上一个密码框的内容
	var password = document.getElementById("pwd").value; 
	// id="repwd"所在的input标签对象同时获取内容
	var repwd = document.getElementById("repwd").value ;
	//id="repwdSpan"所在的span标签对象
	var repwdSpan  = document.getElementById("repwdSpan") ;
	
	//两次密码的内容需要一直
	if(repwd == password){
		//提示
		repwdSpan.innerHTML = "两次输入的内容一致".fontcolor("green") ;
		return true ;
	}else{
		repwdSpan.innerHTML = "两次输入不一致".fontcolor("red") ;
		return false ;
	}
	
}
//	邮箱的校验
	function youXiang(){
		var email =document.getElementById("useremail").value;
		var emSpan = document.getElementById("emSpan");
		var reg = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[A-Za-z]{2,3}){1,2}$/; 
		if(reg.test(email)){
			emSpan.innerHTML = "邮箱格式正确".fontcolor("green");
			return true;
		}else{
			emSpan.innerHTML = "邮箱格式错误".fontcolor("red");
			return false;
		}
		}
		</script>
		
	</head>
	<body>
		<form action="aaa.html" method="post" onsubmit="chackAll">
		用户名<input type="text" name="username" id="user" onblur="chackUserName()"/><span id="userSpan"></span><br />
		密&nbsp;&nbsp;码<input type="password" id="pwd" name="password" onblur="chackUserPassword()"/><span id="pwdSpan"></span><br/>
		确认密码:<input type="password" name="repassword" id="repwd" onblur="chackUserRePassword()" /><span id="repwdSpan" ></span><br />
		邮&nbsp;&nbsp;&nbsp;箱<input type="text" name="email" id="useremail" onblur="youXiang()" /><span id="emSpan"></span><br />
		<input type="submit" value="提交" />
		</form>
	</body>
</html>

不知名程序狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的表单验证

js的表单验证<html> <head> <meta charset="UTF-8"> <title>原生js的表单校验</title> <!-- 自己定义正则规则: 用户名:由4到14位的数字或者字母(不区分大小写)组成密码:由6-16位的数字或者字母组成(不区分大小写) 确认密码:需要上一次的输入的密码两次一致! 邮箱: 数字或者字母@数字或字母.com/.cn(com.cn
复制链接

扫一扫