原生js的表单认证

最新推荐文章于 2023-05-24 14:59:19 发布

Camellia——

最新推荐文章于 2023-05-24 14:59:19 发布

阅读量267

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_57219176/article/details/126894261

版权

前端专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>原生js的表单校验</title>
		<!--
			
			自己定义正则规则:
			用户名:由4到14位的数字或者字母(不区分大小写)组成
			密码:由6-16位的数字或者字母组成(不区分大小写)
			确认密码:需要上一次的输入的密码两次一致!
			邮箱:
				数字或者字母@数字或字母.com/.cn(com.cn...)
		-->
<script>
	
	//校验用户名
	function checkUserName(){
		//获取用户名所在的内容
		//通过 id="user"获取标签对象---获取value属性
		var username = document.getElementById("user").value ;
		//获取id="userSapn"的span标签对象
		var userSpan = document.getElementById("userSapn") ;
		//用户名:由4到14位的数字或者字母(不区分大小写)组成
		var reg = /^[A-Za-z0-9]{4,14}$/ ;
		//校验
		if(reg.test(username)){
			//校验成功
			//设置userSpan的innerHTML属性
			userSpan.innerHTML = "恭喜您,用户名可用".fontcolor("green") ;
			return true ;
		}else{
			//校验不成功
			userSpan.innerHTML = "用户名不可用".fontcolor("red") ;
			return false ;
		}
	}
	
//校验密码
function checkUserPassword(){
	//获取id="pwd"所在的密码框的标签对象 input--同时获取内容
	var password = document.getElementById("pwd").value; 
	//获取id="pwdSpan"的span标签对象
	var pwdSpan = document.getElementById("pwdSpan") ; //举例:js对象    ---  $(pwdSpan )  Jquery对象:前端框架 js库 提供大量的方法
	//定义密码正则表达式:
	//密码:由6-16位的数字或者字母组成(不区分大小写)
	var reg = /^[A-Za-z0-9]{6,16}$/;
	//校验
	if(reg.test(password)){
		//提示
		pwdSpan.innerHTML ="恭喜您,密码符合格式".fontcolor("green") ;
		return true ;
	}else{
		pwdSpan.innerHTML ="密码不符合格式".fontcolor("red") ;
		return false ;
	}
}

//校验确认密码
function checkRePassword(){
	//获取上一个密码框的内容
	var password = document.getElementById("pwd").value; 
	// id="repwd"所在的input标签对象同时获取内容
	var repwd = document.getElementById("repwd").value ;
	//id="repwdSpan"所在的span标签对象
	repwdSpan  = document.getElementById("repwdSpan") ;
	
	//两次密码的内容需要一直
	if(repwd == password){
		//提示
		repwdSpan.innerHTML = "两次输入的内容一致".fontcolor("green") ;
		return true ;
	}else{
		repwdSpan.innerHTML ="两次输入不一致".fontcolor("red") ;
		return false ;
	}
	
}

//邮箱的校验
function checkEmail(){
//	id="userEmail" 所在的标签对象以及输入的内容
var email = document.getElementById("userEmail").value ;
//id="emailSpan"所在的span标签对象
var emailSpan = document.getElementById("emailSpan") ;
//邮箱:数字或者字母@数字或字母.com/.cn(com.cn...)
var reg = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[A-Za-z]{2,3}){1,2}$/;
//校验
	if(reg.test(email)){
	//提示
		emailSpan.innerHTML ="邮箱格式正确".fontcolor("green") ;
		return true ;
	}else{
		emailSpan.innerHTML="邮箱格式有问题".fontcolor("red") ;
		return false ;
	}
}

//校验整个表单项的全部的内容是否符合正则规则
function checkAll(){
	//将所有的校验的内容的返回结果进行校验
	if(checkUserName() && checkUserPassword() && checkRePassword() && checkEmail()){
		return true ; //都符号正则规则才能提交后台
	}else{
		return false ;//不能提交(有一个有问题,不能提交成功)
	}
}

</script>
	</head>
<body>
<!--
	onsubmit:表单是否能够提交成功的事件,取决它所绑定函数的返回值
	如果返回值是true,可以提交(所有的表单项都符合正则规则),
	如果返回值是false,表单不能提交的!
	
-->
<form action="backend.html" method="post" onsubmit="return checkAll()">
用户名:<input type="text" name="username" id="user" onblur="checkUserName()" /><span id="userSapn"></span><br />
密&nbsp;&nbsp;&nbsp;码:<input type="password" onblur="checkUserPassword()" id="pwd" name="password" /><span id="pwdSpan" ></span><br />
确认密码:<input type="password" name="repassword" id="repwd" onblur="checkRePassword()" /><span id="repwdSpan" ></span><br />
邮&nbsp;&nbsp;&nbsp;箱:<input type="text" name="email" id="userEmail" onblur="checkEmail()" /><span id="emailSpan"></span><br />
<input type="submit" value="提交" />

</form>
</body>
</html>