JavaScript实现简单的注册表单校验

最新推荐文章于 2024-09-10 09:43:08 发布

wuyouBegin

最新推荐文章于 2024-09-10 09:43:08 发布

阅读量5.3k

点赞数 3

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

本文链接：https://blog.csdn.net/qq_43188628/article/details/90489024

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js实现简单的注册表单校验

案例分析：
一般在我们注册时页面会要求我们填写基本信息，而信息格式的正确与否决定了我们能否注册成功。
当我们写完一行注册信息，鼠标焦点离开当前行时，行会用我们填写的信息去与后台编写的正则表达式匹配，若不符合格式，给出提示，反之。
技术总结：
document.getElementById—获取对象( 返回一个对象,用var接收).
onblur()—失去焦点事件
对象.innerHTML=" "-----对提示标签插入内容
正则表达式.test(校验对象)----这里将信息与正则表达式做匹配用的是test()方法
步骤分析：

确定事件=onblur(“失去焦点”事件)
编写正则表达式确定校验规则
编写校验函数

一：下面给出我的HTML页面(很简单)

<form action="#" method="post" >
	<table width="60%" height="60%"  align="center">
		<tr>
		<td colspan="3">会员注册USER REGISTER</td>
		</tr>
		<tr>
			<td width="20%">用户名:</td>
			//给这一行id为username，触发onblur事件的函数为checkUsername
			<td width="40%"><input type="text" id="username" onblur="checkUsername()"></td>
			//这一行为提示行，使用span标签插入，接在注册行后面，id为username_msg
			<td width="40%"><span id="username_msg"></span></td>
		</tr>
				
		<tr>
			<td width="20%">密码:</td>
			//给这一行id为password，触发onblur事件的函数为checkPassword
			<td width="40%"><input type="password" id="password" onblur="checkPassword()"></td>
			//这一行为提示行，使用span标签插入，接在注册行后面，id为username_msg
			<td width="40%"><span id="password_msg"></span></td>
		</tr>
				
		<tr>
			<td colspan="2" align="center">
				<input type="submit" value="注册" />
			</td>
		</tr>
	</table>
</form>

效果图：在这里插入图片描述
二：正则表达式引用别人写好的，如下：

三：编写函数

function checkUsername() {
	//用户名校验
	var usernameVal=document.getElementById("username").value
	var usernamemsgObj=document.getElementById("username_msg");
	if(/^\s*$/.test(usernameVal)){
		usernamemsgObj.innerHTML="<font color='red'>用户名不能为空</font>";
		return false;
	}else if(!/^[a-z0-9_-]{3,16}$/.test(usernameVal)){
	   //if语句中的叹号----如果usernameVal的值与正则表达式不匹配，则提示错误。
		usernamemsgObj.innerHTML="<font color='red'>用户名格式错误</font>";
		return false;
	}else{
		usernamemsgObj.innerHTML="";//将提示信息清空
	}
	return true;
}

function checkPassword(){
	//密码校验
	var passwordVal=document.getElementById("password").value;
	var passwordmsgObj=document.getElementById("password_msg");
	if(/^\s*$/.test(passwordVal)){
		passwordmsgObj.innerHTML="<font color='red'>密码不能为空</font>";
		return false;
	}else if(!/^[a-z0-9_-]{6,18}$/.test(passwordVal)){
		passwordmsgObj.innerHTML="<font color='red'>密码格式错误</font>";
		return false;
	}else {
		passwordmsgObj.innerHTML="";
	}
	return true;
}