js之表单校验

最新推荐文章于 2020-06-26 16:34:46 发布
最新推荐文章于 2020-06-26 16:34:46 发布
阅读量325 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 表单校验 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lys1695227550/article/details/78008634
版权
记录我学习的完整过程，需要者自行借鉴。

本文主要按模块讲解表单校验的原理，几种常见的js表单校验（非空、正则、限长、等值），只有先砌墙，才能装修。
下面的action="time.html"可以自行更改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script>
function $(id) {
var Eid = document.getElementById(id);
return Eid;
}
function check() {
var Eusername = $("username");
if(Eusername.value == "") {
return false;
}
return true;
}
</script>
<body>
<form name="biaodang" action="time.html" οnsubmit="return check();">
<input id="username" type="text" name="name" id="id" />
<input type="submit" value="提交" />
</form>
</body>
</html>
总结：校验实现的关键是οnsubmit="return check();中check（）的返回的bool值，true则通过，false反之。function $(id) 中$只是函数名（ 命名来自网络，觉得好用就跟着用）

非空校验无法满足各种形形色色的需求，所以进一步使用正则表达式来校验。下例子为中文校验

function check() {
var Eusername = $("username");
var username=Eusername.value.trim();
if(username == "") {
return false;
}else if(!reg.test(username))//校验中文，如果是中文返回false
{
return false;
}
return true;
}
在表单校验中的需求
例如用户名、密码等等的长度有限制
function check() {
var Eusername = $("username");
var username = Eusername.value.trim();
var length=username.length;
if(username == "") {
return false;
} else if(length>3) //用户名非空、长度不能大于3
{
return false;
}
return true;
}

密码与确认密码必须一致
function check() {
var Epassword = $("password");
var password = Epassword.value;
var Erepassword = $("repassword");
var repassword = Erepassword.value;
if(password == "") {
return false;
} else if(password!=repassword) //密码与确认密码必须一致
{
return false;
}
return true;
}
在熟悉以上基础的校验后，必须学会整合整个表单的校验，在此贴上本人的一次实验题，效果如下图所示：
代码如下： 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>lailai的js表单校验(一)</title>
	</head>
	<script>
		//id选择器
		function $(id) {
			var Eid = document.getElementById(id);
			return Eid;
		}
		//校验主函数
		function check() {
			if(!checkUsername()) {
				return false;
			}
			if(!checkPassword()) {
				return false;
			}
			if(!checkRepassword()) {
				return false;
			}
			if(!checkEmail()) {
				return false;
			}
			if(!checkAccept()) {
				return false;
			}
			return true;
		}
		//校验用户名由字母开头，后跟字母、数字、或者下划线！
		function checkUsername() {
			var Eusername = $("username");
			var username = Eusername.value.trim();
			var sername = username.slice(1);
			//alert(sername);
			if(username == "") {
				return false;
			} else if(/^[0-9]{1,20}$/.test(username[0])) {
				return false;
			} else if((!/^\w+$/.test(sername)) && username.length > 1) {
				return false;
			}
			return true;
		}
		//校验设置登入密码至少6位！
		function checkPassword() {
			var Epassword = $("password");
			var password = Epassword.value;
			var length = password.length;
			if(password == "") {
				return false;
			} else if(length <= 6) //密码长度必须大于6位
			{
				return false;
			}
			return true;
		}
		//校验 重复密码输入与密码值相同
		function checkRepassword() {
			var Epassword = $("password");
			var password = Epassword.value;
			var Erepassword = $("repassword");
			var repassword = Erepassword.value;
			//alert(password);
			//alert(repassword);
			if(password != repassword) //密码与确认密码必须一致
			{
				return false;
			}
			return true;
		}
		//校验邮箱格式
		function checkEmail() {
			var Eemail = $("email");
			var email = Eemail.value.trim();
			if(email == "") {
				return false;
			} else if(!/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g.test(email)) //校验是否为有效邮箱
			{
				return false;
			}
			return true;
		}
		//校验用户协议被勾选
		function checkAccept() {
			var Eaccept = $("accept");
			if(!Eaccept.checked) {
				return false;
			}
			return true;
		}
	</script>

	<body>
		<div>
			<h1 align="center" style="color: cornflowerblue;">用户注册</h1>
			<form name="form" action="time.html" οnsubmit="return check();">
				<table border="1px" align="center">
					<tr>
						<td align="right"><strong>用户名：*</strong> <input type="text" id="username" name="username" maxlengtd="" size="6" value="" style="width: 150px;" /></td>
						<td>用户名由字母开头，后跟字母、数字、或者下划线！</td>
					</tr>
					<tr>
						<td align="right"><strong>密码：*</strong><input type="password" id="password" name="password" maxlengtd="" size="4" value="" style="width: 150px;" /></td>
						<td>设置登入密码至少6位！</td>
					</tr>
					<tr>
						<td align="right"><strong>确认密码：*</strong><input type="password" id="repassword" name="repassword" maxlengtd="" size="4" value="" style="width: 150px;" /></td>
						<td>
							请再次输入你的密码！</td>
					</tr>
					<tr>
						<td align="center" colspan="2"><strong>性别：*</strong><input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女</td>

					</tr>
					<tr>
						<td><strong>邮箱地址：*</strong><input type="text" id="email" name="email" maxlengtd="" size="4" value="" style="width: 150px;" /></td>
						<td>请填写您的常用邮箱，可以 用此邮箱找回密码！</td>
					</tr>
					<tr>
						<td colspan="2" align="center"><strong>基本情况：*</strong><textarea name="info" rows="" cols=""></textarea></td>
					</tr>
					<tr>
						<td colspan="2" align="center"><input type="checkbox" id="accept" name="sex" checked="checked" /> 我已经仔细阅读并同意接受用户使用协议
						</td>

					</tr>
					<tr>
						<td align="center"><input type="submit" value="确认" /><br /> </td>
						<td align="center"><input type="reset" value="取消" /><br /></td>
					</tr>

				</table>
			</form>
		</div>
	</body>

</html>
 

 

 
 
 

 

 
 以上的不足之处：我实现的是一次提交，校验全部校验项，如果符合全部要求则，跳转到time.html,否则拒绝提交。这样的用户体验
 不够好，需要一项一项进行校验并给出错误提示。
  

 

 
 代码： 

 

 
 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>lailai的js表单校验(二)</title>
		<link rel="stylesheet" href="css/checkInfo.css" />
	</head>
	<script>
		//id选择器
		function $(id) {
			var Eid = document.getElementById(id);
			return Eid;
		}
		//校验主函数
		function check() {
			if(!checkUsername()) {
				return false;
			}
			if(!checkPassword()) {
				return false;
			}
			if(!checkRepassword()) {
				return false;
			}
			if(!checkEmail()) {
				return false;
			}
			if(!checkAccept()) {
				return false;
			}
			return true;
		}
		//校验用户名由字母开头，后跟字母、数字、或者下划线！
		function checkUsername() {
			var Eusername = $("username");
			var username = Eusername.value.trim();
			var sername = username.slice(1);
			if(username == "") {
				return false;
			} else if(/^[0-9]{1,20}$/.test(username[0])) {
				return false;
			} else if((!/^\w+$/.test(sername)) && username.length > 1) {
				return false;
			}
			return true;
		}
		//校验设置登入密码至少6位！
		function checkPassword() {
			var Epassword = $("password");
			var password = Epassword.value;
			var length = password.length;
			if(password == "") {
				return false;
			} else if(length <= 6) //密码长度必须大于6位
			{
				return false;
			}
			return true;
		}
		//校验 重复密码输入与密码值相同
		function checkRepassword() {
			var Epassword = $("password");
			var password = Epassword.value;
			var Erepassword = $("repassword");
			var repassword = Erepassword.value;
			if(password != repassword) //密码与确认密码必须一致
			{
				return false;
			}
			return true;
		}
		//校验邮箱格式
		function checkEmail() {
			var Eemail = $("email");
			var email = Eemail.value.trim();
			if(email == "") {
				return false;
			} else if(!/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g.test(email)) //校验是否为有效邮箱
			{
				return false;
			}
			return true;
		}
		//校验用户协议被勾选
		function checkAccept() {
			var Eaccept = $("accept");
			EusernameInfo = $("accept_info");
			if(!Eaccept.checked) {
				EusernameInfo.className = "error_prompt";
				return false;
			}
			return true;
		}
	</script>
	<script>
		function username_onfocus() {
			EusernameInfo = $("username_info");
			EusernameInfo.innerHTML = "用户名由字母开头，后跟字母、数字、或者下划线!";
			EusernameInfo.className = "import_prompt";
		}

		function username_onblur() {
			if(!checkUsername()) {
				EusernameInfo.className = "error_prompt";
			}
		}

		function password_onfocus() {
			EpasswordInfo = $("password_info");
			EpasswordInfo.innerHTML = "设置登入密码至少6位！";
			EpasswordInfo.className = "import_prompt";
		}

		function password_onblur() {
			if(!checkPassword()) {
				EpasswordInfo.className = "error_prompt";
			}
		}

		function repassword_onfocus() {
			ErepasswordInfo = $("repassword_info");
			ErepasswordInfo.innerHTML = "请再次输入你的密码！";
			ErepasswordInfo.className = "import_prompt";
		}

		function repassword_onblur() {
			if(!checkRepassword()) {
				ErepasswordInfo.className = "error_prompt";
			}
		}

		function email_onfocus() {
			EemailInfo = $("email_info");
			EemailInfo.innerHTML = "请填写您的常用邮箱，可以 用此邮箱找回密码！";
			EemailInfo.className = "import_prompt";
		}

		function email_onblur() {
			if(!checkEmail()) {
				EemailInfo.className = "error_prompt";
			}
		}
	</script>

	<body>
		<div>
			<h1 align="center" style="color: cornflowerblue;">用户注册</h1>
			<form name="form" action="time.html" οnsubmit="return check();">
				<table border="1px" align="center">
					<tr>
						<td align="right"><strong>用户名：*</strong> <input type="text" id="username" name="username" οnfοcus="username_onfocus()" οnblur="username_onblur()" maxlengtd="" size="6" value="" style="width: 150px;" /></td>
						<td>
							<div id="username_info"></div>
						</td>
					</tr>
					<tr>
						<td align="right"><strong>密码：*</strong><input type="password" id="password" name="password" οnfοcus="password_onfocus()" οnblur="password_onblur()" maxlengtd="" size="4" value="" style="width: 150px;" /></td>
						<td>
							<div id="password_info"></div>
						</td>
					</tr>
					<tr>
						<td align="right"><strong>确认密码：*</strong><input type="password" id="repassword" οnfοcus="repassword_onfocus()" οnblur="repassword_onblur()" name="repassword" maxlengtd="" size="4" value="" style="width: 150px;" /></td>
						<td>
							<div id="repassword_info"></div>
						</td>
					</tr>
					<tr>
						<td align="center"><strong>性别：*</strong><input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女</td>
						<td><strong>基本情况：*</strong><textarea name="info" rows="" cols=""></textarea></td>
					</tr>
					<tr>
						<td><strong>邮箱地址：*</strong><input type="text" id="email" name="email" οnfοcus="email_onfocus()" οnblur="email_onblur()" maxlengtd="" size="4" value="" style="width: 150px;" /></td>
						<td>
							<div id="email_info"></div>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center"><input type="checkbox" id="accept" name="sex" checked="checked" />
							<div id="accept_info" style="display: inline-block;">我已经仔细阅读并同意接受用户使用协议</div>
						</td>

					</tr>
					<tr>
						<td align="center"><input type="submit" value="确认" /><br /> </td>
						<td align="center"><input type="reset" value="取消" /><br /></td>
					</tr>

				</table>
			</form>
		</div>
	</body>

</html>
 
 

   其中引入的css文件  checkInfo.css  代码如下 
 
 
 
 
  
		/*当鼠标放到文本框时，提示文本的样式*/
		
		.import_prompt {
			border: solid 1px #ffcd00;
			background-color: #ffffda;
			padding-left: 5px;
			padding-right: 5px;
			line-height: 20px;
		}
		/*当文本框内容不符合要求时，提示文本的样式*/
		
		.error_prompt {
			border: solid 1px #ff3300;
			background-color: #fff2e5;
			background-repeat: no-repeat;
			background-position: 5px 2px;
			padding: 2px 5px 0px 25px;
			line-height: 20px;
		}
 
   
  
 
   
  
  
 效果如下图： 
 
 
 
 
  
  
 
 
 
 
  
  
 
 
 
 
         至此，对于js的表单手写验证到此为止，接下来时间允许的话，笔者会往插件方向涉及，感兴趣的朋友关注我，文章还在继续编写中。。。。。。。。 
 
 
 
 


                

        

        

    

  


    

      

        

            

              
                
                  cherish_lailai
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
Javascript实现统一的表单验证

				
			

			

				

					雾空
				

				

					02-08
					
					2183
					
				

			

		

		

			
				

  在许多项目中，表单验证都是不可或缺的一环，比如注册、登录以及上传资料等等，但是每个人写代码的风格不一，如果没有一致而优雅的风格，没有方便的配置，代码很容易变得混乱，所以本文将用较统一的方式来实现验证。


如果平常的代码不加整理，大概会如下：



if(username == ''){
    alert('username不能为空');
    return false;
}else i...

			
		

	



                

              
                



	

		

			

				
					
JavaScript实现表单校验的代码和思路分析

				
			

			

				

					Java码农ing的博客
				

				

					02-27
					
					348
					
				

			

		

		

			
				
JavaScript实现表单校验的代码和思路分析

思路分析

写个checkName函数,用正则校验用户名,返回校验结果,结果要么为fasle,要么为true
给用户名输入框绑定失去焦点的onblur事件,事件中调用已定义好的checkName函数
给表单form绑定onsubmit事件,事件中直接调用并返回checkName函数的结果,由结果来决定是否提交表单’


代码示例
<!DOC...

			
		

	



                


  
              

                


	

		

			

				
					
js统一验证表单的合法性(修改很容易)

				
			

			

				

					10-09
				

			

		

		

			
				
js统一验证表单的合法性(修改很容易)js统一验证表单的合法性(修改很容易)js统一验证表单的合法性(修改很容易)js统一验证表单的合法性(修改很容易)js统一验证表单的合法性(修改很容易)js统一验证表单的合法性(修改很容易)js统一验证表单的合法性(修改很容易)

			
		

	





	

		

			

				
					
js学习之校验form表单

				
			

			

				

					独狼的博客
				

				

					06-26
					
					471
					
				

			

		

		

			
				
<html>
	<head>
		<title>js校验form表单</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			/*设置背景图片*/
			body{
				background-image: url(img/b.jpg);
			}
			/*设置tr样式*/
			tr{
				height: 40

			
		

	



		

			
		



	

		

			

				
					
提交表单之前对表单进行检查的方法 onsubmit="return checkSubmit();"

				
			

			

				

					自强不息
				

				

					12-01
					
					504
					
				

			

		

		

			
				
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;met

			
		

	





	

		

			

				
					
原生JS经典小项目-form表单校验

				
			

			

				

					05-18
				

			

		

		

			
				
通过这个原生JS的小项目，你可以深入理解表单校验的原理，掌握如何使用JavaScript实现高效且友好的表单验证机制。这不仅提高了网页应用的安全性，还能提升用户的操作体验。在实际开发中，这样的技能是必不可少的。

			
		

	





	

		

			

				
					
使用JavaScript进行表单校验功能

				
			

			

				

					10-19
				

			

		

		

			
				
利用JavaScript进行表单校验是一种常见的做法，因为JavaScript在客户端执行，可以提高用户体验，减少无效提交到服务器。下面，我们就详细介绍如何使用JavaScript实现表单校验的功能。  首先，我们要了解表单校验的...

			
		

	





	

		

			

				
					
Vue.js 表单校验插件

				
			

			

				

					10-21
				

			

		

		

			
				
使用Vue.js进行表单校验时，开发者往往需要引入专门的插件来简化开发工作，提高开发效率和用户体验。  Vuerify是一款为Vue.js设计的轻量级表单校验插件，它提供了一套简单的API，使得开发者能够轻松地为表单输入添加...

			
		

	





	

		

			

				
					
vue elementUI 表单校验功能之数组多层嵌套

				
			

			

				

					10-16
				

			

		

		

			
				
本文将深入探讨如何在 Vue Element UI 中实现针对这种数据结构的表单校验。  在 Vue Element UI 中，`el-form` 和 `el-form-item` 组件用于创建表单和表单项，并且通过 `v-model` 和 `prop` 属性进行数据绑定和验证...

			
		

	





	

		

			

				
					
JavaScript 完成注册页面表单校验的实例

				
			

			

				

					12-10
				

			

		

		

			
				
1、步骤分析   第一步：确定事件(onsubmit)并为其绑定一个函数 第二步：书写这个函数(获取用户输入的数据&...2、完成注册页面表单校验  <!DOCTYPE html> <html>  <head>  <meta charset="UTF-8">

			
		

	





	

		

			

				
					
表单提交验证onsubmit=" return checkForm()"无效，（验证用户名和密码是否为空）

				
			

			

				

					weixin_42713628的博客
				

				

					08-24
					
					1万+
					
				

			

		

		

			
				
今天我做了一个jsp&amp;servlet的小项目用于登录，在jsp界面，我用form中的onsubmit属性进行提交验证，其中使用jquery获取页面中的值，但是不行，没有验证到：经过我的不断调试，这种情况可以分为以下几种:

1.onsubmit的格式写错:正确格式--&gt;  &lt;form action="login" method="post" onsubmit="return c...

			
		

	





	

		

			

				
					
form的onsubmit事件--表单提交前的验证最佳实现方式

				
			

			

				

					笔记
				

				

					11-11
					
					8647
					
				

			

		

		

			
				
form的onsubmit事件--表单提交前的验证最佳实现方式



   今天遇到了一个问题，页面中include了很多的公共页面（都是没有form的），并且里面好多的地方都是自行提交的（页面中加入一个type=“submit”域，然后js中写入sumbit.click来执行提交的）。但我需要在每次提交前都要验证一下表单中的填写是否符合要求，如果我给每个提交的地方都添加验证函数的调用，那

			
		

	





	

		

			

				
					
onsubmit=“return check() 给form加onsubmit 验证所有表单后再提交，可以用返回false 来阻止submit提交

					
热门推荐

				
			

			

				

					笔记
				

				

					11-11
					
					1万+
					
				

			

		

		

			
				
onsubmit="return check() 给form加onsubmit 验证所有表单后再提交，可以用返回false

			
		

	





	

		

			

				
					
表单提交前触发函数

				
			

			

				

					iteye_8029的博客
				

				

					03-11
					
					707
					
				

			

		

		

			
				
直接看代码
&lt;form id="payForm" action="yeepaypay.html" target="_blank"method="post"
onsubmit="return checkform();"&gt;  
例子中的onsubmit函数即为表单提交前触发的函数
function checkform() {var value = $("input[n

			
		

	





	

		

			

				
					
提交form表单之前处理数据

				
			

			

				

					回忆的夏天
				

				

					07-14
					
					5732
					
				

			

		

		

			
				

适用情况：前端页面做好表单信息未填点提交或保存出现的问题
当信息为空时，一般我们肯定不能让它提交到数据库，应该提示信息没填或为空，这一步可以由前端或后端来完成，不过为了减轻服务器的负担，建议是由前端来完成判断




function check(){
   var name = document.getElementById("name").value;
   if(name ==  null...

			
		

	





	

		

			

				
					
关于form表单提交

				
			

			

				

					谭先森的博客
				

				

					07-05
					
					2521
					
				

			

		

		

			
				

&lt;!--HTML--&gt;
&lt;form id='test_form' action='' method='' onsubmit='return checkForm()'&gt;
    &lt;input type='text' name='username' value=''/&gt;
    &lt;input type='password'  id='input_pwd' v...

			
		

	





	

		

			

				
					
【JS】关于表单提交前验证的方法和可能遇到的问题总结

				
			

			

				

					weixin_39068791的博客
				

				

					12-12
					
					2047
					
				

			

		

		

			
				
1).onsubmit=“return check()”中的return一定要加上，不然check的返回值哪怕是false，仍然提交。也就是说，onsubmit=“return false”为不执行提交；onsubmit=“return true”或onsubmit=“false”都执行提交。


2).对是否为空时的判断语句，若是只写"myname==null"，漏掉myname==' '的话，也是会在返回值为false时提交！！！

			
		

	





	

		

			

				
					
表单提交总结(一)：表单的提交及验证方法

				
			

			

				

					菜鸟的自我积累
				

				

					10-29
					
					3116
					
				

			

		

		

			
				
关于表单提交,相信每个做过web开发的小伙伴,随随便便都能写出来。但是需求不同,采取的方法也会有所差别，每当遇到稍微复杂一点的提交问题，自己总会搜索一番资料，费时费力。在这里总结出一些常用的表单提交案例，方便日后查阅。

1.使用onsubmit方法进行验证.

　　在提交表单之前，对表单或者网页中的数据进行检验。onsubmit指定的方法返回true，则提交数据；返回false不提交数据。 
j

			
		

	





	

		

			

				
					
form表单的onsubmit() return问题

				
			

			

				

					siying8419的博客
				

				

					04-23
					
					1477
					
				

			

		

		

			
				
以前在项目中为一个表单（from）编写onsubmit()脚本的时候，经常需要验证表单中数据的合法性，所以常会写道：，试图在validateForm()中return false来阻止表单的提交。实际上的效果是即使return false 表单 还是会提交。后来发现 onsubmit=”return validateForm()”就没有问题了，当时也没有多想就继续做其它事情了。

 直到今天看到一...

			
		

	





	

		

			

				
					
javascript同步表单校验技术解析

				
			

			

				

					
				

			

		

		

			
				
"本文档探讨了如何将JavaScript中的异步表单校验转换为同步方式，以改善用户体验和减少服务器负担。"  在Web开发中，表单校验是不可或缺的一部分，它确保用户提交的数据符合预期格式和规则。传统的同步表单校验在...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值