JavaScript 表单校验

最新推荐文章于 2023-12-05 16:42:45 发布
最新推荐文章于 2023-12-05 16:42:45 发布
阅读量283 收藏
点赞数
分类专栏： html 文章标签： html JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/melody_92/article/details/103166719
版权

JavaScript 表单校验

这里对于JS的表单校验做一下整理。

基础html素材

register.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<center>
		<h3>注册页面</h3>
		<hr />
		<form action="" method="get" >
		<table>
			<tr height="35px">
				<td width="150px">用户名：</td>
				<td width="400px">
					<input type="text" name="uname" id="uname" value="" alt="用户名" />
				    <span id="uname_span"></span>
				</td>
			</tr>
			<tr height="35px">
				<td>密码：</td>
				<td>
					<input type="password" name="pwd" id="pwd" value="" alt="密码" />
					<span id="pwd_span"></span>
					
				</td>
			</tr>
			<tr height="35px">
				<td>手机号：</td>
				<td>
					<input type="text" name="phone" id="phone" value="" alt="手机号" />
					<span id="phone_span"></span>
				</td>
			</tr>
			<tr height="35px">
				<td>邮箱：</td>
				<td>
					<input type="text" name="email" id="email" value="" alt="邮箱"  />
				    <span id="email_span"></span>
				</td>
			</tr>
			<tr height="35px">
				<td>性别：</td>
				<td>
					男：<input type="radio" name="sex" id="" value="1" />
					女：<input type="radio" name="sex" id="" value="0" />
					
					<span id="sex_span">
						
					</span>
				</td>
			</tr>
			<tr height="35px">
				<td>爱好：</td>
				<td>
					<input type="checkbox" name="fav" id="" value="1" />唱歌
					<input type="checkbox" name="fav" id="" value="2" />睡觉
					<input type="checkbox" name="fav" id="" value="3"  />LOL<br />
					<input type="checkbox" name="fav" id="" value="4"  />旅游
					<input type="checkbox" name="fav" id="" value="5" />高尔夫
					<input type="checkbox" name="fav" id="" value="6" />篮球
					
				</td>
			</tr>
			<tr height="35px">
				<td>籍贯：</td>
				<td>
					<select name="adress" id="sel" >
						<option value="0">--请选择--</option>
						<option value="1">河南</option>
						<option value="2">湖南</option>
						<option value="3">海南</option>
						<option value="4">云南</option>
					</select>
					
					<span id="sel_span"></span>
				</td>
			</tr>
			
			<tr height="35px">
				<td>验证码</td>
				<td>
					<input type="number" name="" id="yzm" value="" />
					<span id="yzm_span"></span>
					<span id="yzm2_span"></span>
				</td>
			</tr>
			
			<tr height="35px">
				<td>个人介绍：</td>
				<td>
					<textarea name="intro" rows="8" cols="30"></textarea>
				</td>
			</tr>
			
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="checkbox" name="" id="check" value="" />是否同一本公司协议
				</td>
			</tr>
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="submit" id="sub" value="注册" />
				</td>
			</tr>
		</table>
		</form>
		</center>		
	</body>
</html>

界面如下图所示，由于这里要测试是否可以提交，所以提交方式暂时设置为 GET方式。
这是基础的注册页面

用户名校验

需求：用户名必须是3-5位的汉字；在用户输入完离开当前输入框就提示是否校验成功。
操作：

  1. 添加友好提示：<span id="uname_span">*用户名必须是3-5位的汉字</span>
  2. 定义JS的校验函数:
function  checkName(){
			
				//获得用户名的值
				var  uname=document.getElementById("uname").value;
				
				//获得span对象
				var span =document.getElementById("uname_span");
				
				
				//汉字的正则表达式
				var  reg=/^[\u4e00-\u9fa5]{3,5}$/;
				

				if(uname==null||uname==""){
					
					span.innerText="×用户名不能为空";
					
					span.style.color="red";
					
					
				}else if(reg.test(uname)){
					
					span.innerText="√用户名合法";
					
					span.style.color="green";
					
				}else{
					span.innerText="×用户名不合法";
					
					span.style.color="red";

				}
			}
  1. 将函数绑定到用户名的input标签上
<input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkName()"/>

密码校验

需求和步骤，与用户名校验类似。所以用上面的代码修修改改即可
<span id="pwd_span">*密码为3-6位数字</span>

function  checkPwd(){
			
				//获得密码的值
				var  pwd =document.getElementById("pwd").value;
				
				//获得span对象
				var span =document.getElementById("pwd_span");
					
				//密码的正则表达式
				var  reg=/^\d{3,6}$/;

				if(pwd==null||pwd==""){
					
					span.innerText="×密码不能为空";
					
					span.style.color="red";
					
					
				}else if(reg.test(pwd)){
					
					span.innerText="√密码合法";
					
					span.style.color="green";
					
				}else{
					span.innerText="×密码不合法";
					
					span.style.color="red";

				}
			}

<input type="password" name="pwd" id="pwd" value="" alt="密码" onblur="checkPwd()" />

发现前面校验的两个函数非常相似，这里就可以将公共部分提取出来。

抽取公共方法

function  check(id,reg){
			
				//获得校验对象的值
				var  obj=document.getElementById(id);
				
				var  val=obj.value;
				
				//获得alt属性
				var  alt=obj.alt;
				
				//获得span对象
				var span =document.getElementById(id+"_span");
				
				if(val==null||val==""){
					
					
					span.innerText="×"+alt+"不能为空";
					
					span.style.color="red";
					
				}else if(reg.test(val)){
					
					span.innerText="√"+alt+"合法";
					
					span.style.color="green";
					
				}else{
					span.innerText="×"+alt+"不合法";
					
					span.style.color="red";
					
				}
			}

此时上面两个校验方法就可简化为：

function  checkName(){
				
				//汉字的正则表达式
				var  reg=/^[\u4e00-\u9fa5]{3,5}$/;
			    
			    return check("uname",reg);
			}
			
			
function  checkPwd(){
					
				//密码的正则表达式
				var  reg=/^\d{3,6}$/;

				return	check("pwd",reg);
			}

效果展示：
用户名密码校验效果
手机号与邮箱校验与上面类似，就不再说明。

性别校验

需求：未选择性别，提示“请选择性别！”；已选择后提示所“性别选择成功”。
步骤：

  1. 友好提示“请选择性别！” <span id="sex_span">*请选择性别！</span>
  2. 性别选择校验
function  checkSex(){
				
				//获得所有的性别对象
				var  sex=document.getElementsByName("sex");
				
				//获得span对象
				
				var span =document.getElementById("sex_span");
				for(var  i in sex){
					
					
					if(sex[i].checked){
						
						span.innerHTML="性别选择成功";
						
						span.style.color="green";
					}
					
				}
				
				
				span.innerHTML="请选择性别";
						
				span.style.color="red";
			}
  1. 绑定事件
<td>
	男：<input type="radio" name="sex" id="" value="1" onclick="checkSex()"/>
	女：<input type="radio" name="sex" id="" value="0" onclick="checkSex()"/>
					
	<span id="sex_span">*请选择性别！</span>
</td>

效果展示：
性别校验

爱好与性别类似，不再赘述。

籍贯校验

直接上代码

/*********籍贯校验***********/
function  checkAdress(){
				
				var  sel=document.getElementById("sel").value;
				
				var  span =document.getElementById("sel_span");
				
				if(sel==0){
					
					span.style.color="red";
					span.innerText="请选择籍贯"
				}else {
					
					span.style.color="green";
					span.innerText="籍贯选择成功";
				}				
			}

<td>籍贯：</td>
<td>
	<select name="adress" id="sel" onchange="checkAdress()">
						<option value="0">--请选择--</option>
						<option value="1">河南</option>
						<option value="2">湖南</option>
						<option value="3">海南</option>
						<option value="4">云南</option>
	</select>
					
	<span id="sel_span">*请选择籍贯</span>
</td>

验证码校验

function  checkYZM(){
				
				//获得自己输入的验证码
				var  yzm=document.getElementById("yzm").value;
				
				//获得span标签
				var  span =document.getElementById("yzm2_span");
				
				if(ran==yzm){
					
					span.style.color="green";
					span.innerText="验证码正确";
					
					return true;
					
				}else {
					
					span.style.color="red";
					span.innerText="验证码不正确";
				}	
			}	

<td>验证码</td>
<td>
	<input type="number" name="" id="yzm" value="" onblur="checkYZM()"/>
	<span id="yzm_span"></span>
	<span id="yzm2_span"></span>
</td>

是否同意本公司协议

/*******是否同意协议**********/
function  checkAgree(){
				//同意框
				var  check=document.getElementById("check");
				//提交
				var  sub=document.getElementById("sub");
				
				sub.disabled=!check.checked;	
			}

<input type="checkbox" name="" id="check" value="" onclick="checkAgree()">是否同一本公司协议

注册提交按钮校验

做这一步之前，需要在之前的校验中通过的return true;不通过的 return false。 在验证码校验里已经添加，可以参考。这里只写了部分校验方法，实际应用中需要全部校验通过在提交。

function zong(){
				
	var  flag=checkName()&&checkPwd()&&checkPhone()&&checkEmail()&&checkSex()&&checkYZM()&&checkAgree();
					
		     return flag;		
			}
			

<input type="submit" id="sub" value="注册" disabled="true"/>
๑ღ memory ღ๑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html网页用户注册表单验证校验JavaScript源码代码
05-02
html网页用户注册表单验证校验JavaScript源码代码，完整代码已经打包，还迎下载，代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id得到input标签节点 var str=usernameNode.value;//获取到input标签框框里面输入的值，是一个字符串 var regExp = new RegExp("^\\w*$","gm");//一定要写上开头^和结尾$不然匹配上后，没办法排除别的，要打上*号，表示可以0个以上匹配的字符 var ismacth=regExp.test(str);//获得的字符串跟正则表达式做比较 if(str.length !==0){//字符串的长度不等于0则判断字符串是否匹配正则表达式 if(ismacth){//输入的用户名不为空时 document.getElementById("username1").innerHTML="√";//正确时候输出√ document.getElementById("username1").setAttribute("class","duitishi");//设置div标签的class属性为对提示，让它正确的时候显示绿色 }else{//输入的用户名不为空但是有不合法字符时 document.getElementById("username1").innerHTML="× 只能包含数字，字母，下划线"; document.getElementById("username1").setAttribute("class","cuotishi");//设置div标签的class属性为错提示，让它错误的时候显示红色 } }else{//输入的用户名为空时 document.getElementById("username1").innerHTML="请输入用户名"; document.getElementById("username1").setAttribute("class","cuotishi"); } }
javascript表单校验
04-15
校验表单的脚本，全面详实
JavaScript：使用JavaScript 实现注册表单的校验
weixin_34310127的博客
07-31 391
说明：在点击提交时进行表单校验，具体要求如下： 1）用户名为3~16个字符，且不能包含”@”和”#”字符； 2）密码和校验密码必须一致，且长度在8个字符到16个字符； 3）兴趣爱好至少选择一项； 4）政治面貌必须为党员； 5) 所有输入符合要求后提示“注册成功”。   HTML代码为：在（register.html中） &lt;!DOCTYPE html&gt; &lt;ht...
注册表单校验 js java,JavaScript表单验证完美代码
weixin_32946431的博客
03-27 954
用原生JS写一个简单的表单验证首先，是html部分新用户注册基本信息用户名：请输入至少3位的用户名密码：请输入4到8位的密码确认密码：请再输入一遍密码手机号码：请输入11位手机号码注册接着，为其加上CSS样式.divAll{width:800px;font-family:'黑体';margin:50px auto;}#titles{font-weight:bold;font-size:18px;h...
使用javaScript实现注册表单验证
weixin_30243533的博客
12-05 375
当用户在注册表单中未填必填项或者是填写错误的时候可以使用javaScript对用户进行弹窗提示 比如当前页面中的用户名和密码是必填的 就可以建立一个function进行条件验证，如果条件不满足的点击提交的时候是不会把表单的内容提交到下一个页面当中 script要定义在<head>标签的<script type="text/javascript">标签当中 ...
JavaScript 登录注册表单验证（含正则表达式）
阿博的博客
07-25 2216
JavaScript 登录注册表单验证（含正则表达式）
javascript表单校验2
04-15
另一个表单校验脚本，详细完整
使用JavaScript进行表单校验功能
10-19
最近在学习JavaScript，因此想到使用js实现表单校验。下面通过本文给大家分享使用javascript实现表单校验功能的步骤，需要的的朋友参考下吧
JavaScript 完成注册页面表单校验的实例
10-19
本实例主要介绍如何使用JavaScript来完成一个注册页面的表单校验。 首先，我们需要了解表单验证的基本流程： 1. **确定事件(onsubmit)**: 在HTML的标签中，我们可以设置`onsubmit`事件监听器，当用户尝试提交表单...
JavaScript 数据校验 用户登录 示例代码
最新发布
07-03
JavaScript 数据校验 用户登录 示例代码JavaScript 数据校验 用户登录 示例代码JavaScript 数据校验 用户登录 示例代码JavaScript 数据校验 用户登录 示例代码JavaScript 数据校验 用户登录 示例代码JavaScript 数据...
网页用户注册表单校验JavaScript脚本代码源码下载
05-02
简单的网页用户注册表单的校验，提供给大家学习，借鉴，完整代码已经打包，欢迎下载。截取一部分代码，如下： function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id得到input标签节点 var str=usernameNode.value;//获取到input标签框框里面输入的值，是一个字符串 var regExp = new RegExp("^\\w*$","gm");//一定要写上开头^和结尾$不然匹配上后，没办法排除别的，要打上*号，表示可以0个以上匹配的字符 var ismacth=regExp.test(str);//获得的字符串跟正则表达式做比较 if(str.length !==0){//字符串的长度不等于0则判断字符串是否匹配正则表达式 if(ismacth){//输入的用户名不为空时 document.getElementById("username1").innerHTML="√";//正确时候输出√ document.getElementById("username1").setAttribute("class","duitishi");//设置div标签的class属性为对提示，让它正确的时候显示绿色 }else{//输入的用户名不为空但是有不合法字符时 document.getElementById("username1").innerHTML="× 只能包含数字，字母，下划线"; document.getElementById("username1").setAttribute("class","cuotishi");//设置div标签的class属性为错提示，让它错误的时候显示红色 } }else{//输入的用户名为空时 document.getElementById("username1").innerHTML="请输入用户名"; document.getElementById("username1").setAttribute("class","cuotishi"); } }
JS注册表单验证
10-15
网上常见的用JS编写的注册表单验证的代码，非常实用哦
js简单的注册表单密码验证代码
11-01
js简单的注册表单密码验证代码
注册表单验证
03-29
一个简单的注册页面，其中包括了一些简单的函数，可以判断输入的信息是否合法
使用JavaScript实现页面注册表单文本框验证方法
阿猫故乡的博客
12-05 578
classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false。添加类 .icon-queren2 则是默认选中样式 可以使用 toggle切换类。如果上面input表单 只要有模块，返回的是 false 则 阻止提交。只要上面有一个input验证不通过就不同意提交。正则 /^[a-zA-Z0-9-_]{6,20}如果没有勾选同意协议，则提示 需要勾选。Ø 如果没有勾选同意，则提示要勾选。Ø required 属性不能为空。③： 勾选已经阅读同意模块。
javascript注册表单验证实现
gfdonx的专栏
11-02 468
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> function check(){ var username = document.getElementById("username"); var userpass = docume
JavaScript 登录注册表单验证
阿博的博客
07-24 4462
JavaScript 表单验证
javascript表单校验注册页面
老王玩编程
05-04 2120
一个简单的HTML页面 利用javascript知识点 和正则表达公式 练习巩固一下 然后突发奇想 仿制一下QQ的注册页面(仅校验部分)
JavaScript实现注册表单校验功能
爱酷码的博客
12-29 1416
如图，要求输入用户名失去焦点后用户名不得为空或者小于6个字符，否则就显示提示，密码同理，第二个确认密码只需判断与上一个密码框输入是否一致即可，否则显示两次密码输入不一致，在没有完成校验点击提交按钮跳转不要，都满足校验方可跳转提交，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单校验</title> </..
elementplus 表单校验 单项
03-02
其中，Element Plus 表单校验是指对表单中的输入内容进行验证，确保用户输入的数据符合预期的格式和要求。 在 Element Plus 中，表单校验是通过给表单元素添加校验规则来实现的。可以通过以下步骤来进行单项表单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值