JS表单验证案例

最新推荐文章于 2023-07-11 16:55:14 发布

哦?

最新推荐文章于 2023-07-11 16:55:14 发布

阅读量624

点赞数

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/qq_44241861/article/details/109080079

版权

Web 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用JavaScript进行表单验证，包括用户名、密码、确认密码、性别选择和爱好选择的验证方法。通过正则表达式检查用户名和密码格式，利用oninput和onblur事件实时检测输入，并对性别选择和个人描述字数进行有效性的判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先进行表单的创建：验证时将后台设为# 将post方式变为get方式设置一个总的检验函数在表单提交进行总校验
定义一个空的span块用来显示错误提示
用 oninput 来检测输入用户名的格式边检测边输入也可以使用onblur 输入完成后再进行判断检测验证
调用checkUsername()函数进行检测
checkUsername()函数内容：通过document.getElementById来获取用户名的value值 (注意这样返回的结果是String类型)
然后定义用户名的正则表达式然后与用户名的value值进行匹配
匹配正确空的span块输出用户名规则正确✔
匹配错误空的span块输出用户名格式错误
密码与确认密码的检验：
密码检验的过程与用户名检验的过程类似正则中额外添加数字作为密码的正确格式；
确认密码时通过获取两者的value 进行比较根据结果在空的块中显示结果提示
性别与爱好的选择提示：性别用单选框radio （注意 radio的name必须一致否则无法达到单选的效果）使用onmouseleave来进行选择检测，为此我们定义两个div块来达到检测到未选择则选项而鼠标离开此块就进行选择结果的提示;
在进行性别勾选检测时用document.getElementById来获取性别选项的checked属性
当且仅当两个性别选项全部为false 也就是两个选项都未选择的时候我们会弹出未勾选提示
注意在这里由于我们的条件是两者都未选择
因此这两个函数的返回值与其余检测项的返回值不同的是这里我们返回的是条件的取反值,表示任意一个检测项有勾选就为true
个人描述字数的检测：检测方式一样 oninput 边输入边检测，获取value值 trim去除空格检测获取的长度根据要求弹出提示
提交与重置：表单开始时我们定义了一个提交时检测所有的checkall函数，再次检测后无不合格要求的进行提交交给后台

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<!-- 表单标签  与后台进行数据交互
	 action： 填写后台地址 
	 method： "post" 将请求参数放到请求体里面提交的  请求数据大小没有限制
	 "get" 会将请求参数拼接到URL中 ?后为请求参数，也就是表单项的键name与用户输入的值或者value值， 请求数据大小有限制
	 
	 input表单项必须提供name属性 作为键
	 -->
	<!-- checkAll()为true时，点击提交才会提交到后台 -->
		<form action="#" method="get" onsubmit="return checkAll()">
			<table border="1" cellspacing="0">
				<tr>
					<td>用户名：</td>
					<td width="200px"><input type="text" name="username" id="inputusernameid" value="" onblur="checkUsername()" placeholder="请输入用户名" /></td>
					<td width="300px">
						<span id="spanUsername"></span>
					</td>
				</tr>

				<tr>
					<td>密码：</td>
					<td><input type="password" name="password" id="psd" value="" placeholder="请输入密码8位密码" onblur="checkPassord()"/></td>
					<td><span id="mima"></span></td>
				</tr>

				<tr>
					<td>确认密码：</td>
					<td> <input type="password" name="password" id="psd1" value="" placeholder="请输入确认密码8位密码" onblur="checkPassord1()"  /></td>
					<td>
						<span id="spanPassword"></span>
					</td>
				</tr>

				<tr bgcolor="yellow">
					<td>性别：</td>
					<td> <div id="" onmouseleave="checkhhh()"> <input type="radio" name="sex" value="0" id="y1" checked="checked" /> 男
						<input type="radio" name="sex" value="1" id="y2" /> 女</div></td>
					<td>
						<span id="caox"></span>
					</td>
				</tr>

				<tr bgcolor="aqua">
					<td>爱好：</td>
					<td><div id="" onmouseleave="checkeee()"><input type="checkbox" name="hobby" value="lq" id="u1" />篮球
						<input type="checkbox" name="hobby" value="zq" id="u2" />足球
						<!-- label标签使用户点击文字也可以选择 -->
						<input type="checkbox" name="hobby" value="ymq" id="u3" /><label for="ball">羽毛球</label></div>
					</td>
					<td>
						<span id="cao"></span>
					</td>
				</tr>

				<tr>
					<td>个人描述：</td>
					<td><input type="text" style="width: 244px;height: 150px;" name="miaoshu" placeholder="请填写个人描述" id="miaoshu"
value="" onblur="checkMiaoshu()" /></td>
					<td ><span id="miaoshu1"></span></td>
				</tr>
				
				<tr align="center" >
					<td colspan="3"><input type="submit" value="注册" />
	<input type="reset" value="重置" />
	</td>
					
				</tr>
				
			</table>

		</form>
	</body>
</html>
<script>
	function checkUsername(){
	var inpusername = document.getElementById("inputusernameid").value;
	var regx = /^[a-zA-Z]{6,16}$/; 
		var f = regx.test(inpusername);
		var cc = document.getElementById("spanUsername");
		if (f) {
			cc.innerHTML = "<font color='green'>用户名规则正确✔</font >"
		} else {
			cc.innerHTML = "<font color='red'>用户名格式错误</font>"
		}
		return f;
	}
	
	function checkPassord(){
		var password=document.getElementById('psd').value;
		var regx1 = /^[a-zA-Z0-9]{8,16}$/;
				var f1 = regx1.test(password);
				var cc1 = document.getElementById("mima");
				if (f1) {
					cc1.innerHTML = "<font color='green'>密码格式正确✔</font >"
				} else {
					cc1.innerHTML = "<font color='red'>密码格式错误</font>"
				}
				return f1;
		
		
		
		
	}
	
	function checkPassord1(){
		var c1=document.getElementById('psd1').value;
		var c2 = document.getElementById("psd").value;
		var cc2 = document.getElementById("spanPassword");
				if (c1 == c2) {
					cc2.innerHTML = "<font color='green'>两次密码输入一致✔</font >"
				} else {
					cc2.innerHTML = "<font color='red'>两次密码输入不一致</font>"
				}
				return c1 == c2;		
	}
	
	
	function checkhhh() {
	var caocaox = document.getElementById("caox");
	if (document.getElementById("y1").checked == false && document.getElementById("y2").checked == false) {
				caocaox.innerHTML = "<font color='red'>请勾选您的性别</font>"} 
				else {
				caocaox.innerHTML = "<font color='green'>性别已勾选</font>"}
				//表示有一个勾选了就返回
	return !(document.getElementById("y1").checked==false &&document.getElementById("y2").checked == false);} 
	
	function checkeee() {
			var caocao = document.getElementById("cao");
			if (document.getElementById("u1").checked == false && document.getElementById("u2").checked == false && document.getElementById("u3").checked == false) {
				caocao.innerHTML = "<font color='red'>请至少勾选一项兴趣爱好</font>"
	
			} else {
				caocao.innerHTML = "<font color='green'>爱好已勾选</font>"}
	return !(document.getElementById("u1").checked == false &&document.getElementById("u2").checked == false && document.getElementById("u3").checked == false);}

function checkMiaoshu() {
		var c4 = document.getElementById("miaoshu").value;
		c4 = c4.trim();
		var cc3 = document.getElementById("miaoshu1");
		if (c4.length > 50) {
			cc3.innerHTML = "<font color='green'>个人描述合格✔</font >"} 
			else {
			cc3.innerHTML = "<font color='red'>个人描述字数小于五十字</font>"}
 return c4.length > 50;}


function checkAll() {
return checkUsername() && checkPassord() && checkPassord1() && checkhhh() && checkeee() && checkMiaoshu();}







</script>