表单验证后提交

已于 2022-02-14 13:49:56 修改
阅读量679 收藏 6
点赞数
分类专栏： 前端 文章标签： javascript 前端 html 表单提交
于 2022-02-14 13:48:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taw19960426/article/details/122922901
版权

需求

（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息
（8）最终表单中所有项均合法方可提交

结果演示

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		<style type="text/css">
			span{
				font-size: 12px;
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- 思路
		写出用户名+密码+确认密码+提交的表单
		用户名失去焦点就检测是否正确，错误在旁边span显示
			不为空+6-14位之间+数字和字母组成
		确认密码失去焦点就验证是否和第一次是密码一致，错误在旁边span显示
		提交表单
			上述都正确后再提交
		 -->
		<script type="text/javascript">
			/* 
			（1）用户名不能为空
			（2）用户名必须在6-14位之间
			（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
			（4）密码和确认密码一致
			（5）统一失去焦点验证
			（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
			（7）文本框再次获得焦点后，清空错误提示信息
			（8）最终表单中所有项均合法方可提交
			 */
			
			window.onload=function(){
				//console.log(11111)
// 				用户名失去焦点就检测是否正确，错误在旁边span显示
// 					不为空+6-14位之间+数字和字母组成
				var myUseName=document.getElementById("useName");
				var myUseNameSpan=document.getElementById("usenameSpan");
				myUseName.onblur=function(){
					//console.log(11111)
					// 去除掉前后空白
					var nameArr=myUseName.value.trim();
					//console.log(nameArr);
					//（1）用户名不能为空
					if(nameArr==""){
						myUseNameSpan.innerHTML="用户名不能为空";
					}
					else{
						//（2）用户名必须在6-14位之间
						if(nameArr.length>14||nameArr.length<6){
							myUseNameSpan.innerHTML="用户名必须在6-14位之间";
						}
						else{
							//（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
							var zhengZeUseName=/^[a-zA-Z0-9]+$/;
							var ok=zhengZeUseName.test(nameArr);
							if(!ok){
								myUseNameSpan.innerHTML="用户名只能有数字和字母组成";
							}
							else{
								myUseNameSpan.innerHTML="";
							}
						}
					}
				}
				
				// 确认密码失去焦点就验证是否和第一次是密码一致，错误在旁边span显示
				var myConPassword=document.getElementById("conPassword");
				var myConPasswordSpan=document.getElementById("conPasswordSpan");
				myConPassword.onblur=function(){
					//拿到之前的密码
					var firstPassword=document.getElementById("password").value;
					//console.log(firstPassword);
					//验证是否和第一次是密码一致
					if(firstPassword!=myConPassword.value){
						myConPasswordSpan.innerHTML="密码和确认密码不一致";
					}
					else{
						myConPasswordSpan.innerHTML="";
					}
				}
				
				//用户名或者确认密码有焦点的时候,旁边的span为空
				myUseName.onfocus=function(){
					myUseNameSpan.innerHTML="";
				}
				myConPassword.onfocus=function(){
					myConPasswordSpan.innerHTML="";
				}
				
// 				提交表单
// 					上述都正确后再提交
				//让用户名+确认密码都失去焦点,重新验证一下
				//判断两个span是否为空
				document.getElementById("tiJiaoButton").onclick=function(){
					//先获取焦点才能再失去
					myUseName.focus();//触发文本框的获取焦点事件
					myUseName.blur();//触发文本框的失去焦点事件
					
					// 验证密码,怎么验证密码？让确认密码失去焦点
					myConPassword.focus();
					myConPassword.blur();
					
					console.log("用户名span的值="+myUseNameSpan.innerHTML);
					console.log("确认密码span的值="+myConPasswordSpan.innerHTML);
					//判断两个span是否为空
					if(myUseNameSpan.innerHTML==""&&myConPasswordSpan.innerHTML==""){
						//提交
						document.getElementById("myForm").submit();
					}
				}
				
			}
		</script>
		
		<!-- 思路
		写出用户名+密码+确认密码+提交的表单
		用户名失去焦点就检测是否正确，错误在旁边span显示
			不为空+6-14位之间+数字和字母组成
		确认密码失去焦点就验证是否和第一次是密码一致，错误在旁边span显示
		提交表单
			上述都正确后再提交
		 -->
		 
		 <!-- 写出用户名+密码+确认密码+提交的表单 -->
		 <form id="myForm" action="http://localhost:8080/oa/save" >
		 	用户名：<input type="text" name="useName" id="useName" /> <span id="usenameSpan"></span>
		 	<br>
		 	 密 码 ：<input type="password" name="password" id="password" />
		 	<br>
		 	确认密码：<input type="password" name="conPassword" id="conPassword" /> <span id="conPasswordSpan"></span>
			<br>
		 	<input type="button" value="提交" id="tiJiaoButton"/>
		 </form>
		 
	</body>
</html>
唐维康
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JQuery实现表单完全验证通过后提交表单（包括手机验证，邮编验证）
12-03
很多时候我们在提交表单时都需要对提交的数据进行校验，例如：用户名是否为空，手机格式是否正确...,如果有一项或多项验证不通过，就会给出提示，并不允许表单提交。本人还是初级王，代码写的水平不高，但是还是能实现功能的。
Html form 表单提交前验证
weixin_34072159的博客
08-16 870
可以使用form表单的onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。 onsubmit指定的方法返回true，则提交数据；返回false不提交数据。 直接看下面的代码： 1 &lt;HTML&gt; 2 &lt;head&gt; 3 &lt;meta http-equiv="Content-Type" content="t...
html中form异步验证,【译】表单数据校验
weixin_39906878的博客
06-17 345
当你需要经常在服务器上校验数据时，在Web页面上的另加校验就有诸多好处。多数情况下，用户会被表单惹恼。而当用户填完表单时就校验数据，既有助于用户立即发现他们犯的错误，也能减少等待HTTP响应的时间、并减少服务器对错误表单输入的处理。本文介绍的，就是如何在表单所在页面对表单数据进行校验。使用浏览器内置的表单校验HTML5的一大特性，就是在不依赖脚本的情况下校验大多数的用户数据。该特性是通过使用表单元...
提交表单的时候验证手机号码和身份证号码
祈澈菇凉
08-05 5791
需求：在提交表单的时候，验证手机号码和身份证号码，如果不填写手机号码和身份证号码，就无需验证，如果填写手机号码和身份证号码，必须要填写正确的格式，如果不正确，则没有办法通过验证，出现弹框提示。 <!DOCTYPE HTML> <html> <head> <title></titl...
vue 表单验证并提交
xfz610614的博客
04-17 3792
vue 表单验证并提交 一、常用验证方式1.data 中验证data 数据： 2.行内验证3.引入外部定义的规则 二、表单提交时验证1.表单的提交按钮2.ethods 方法 一、常用验证方式 vue 中表单字段验证的写法和方式有多种，常用的验证方式有3种...
jsp验证表单后再提交
13东倍
07-20 2190
在提交表单时，我们常常需要验证核实表单内容，若都不为空时，方能提交；若有文本框为空则不提交，并获取鼠标焦点到文本框上 ,所以我们可以利用onsubmit的方法来做，请看下面例子：   function yan(){    if(frm.stuname.value==""){     alert("姓名不得为空！");//弹出提示框     document.frm.stunam
前端实践（4）——表单验证（密码重复输入检查）
Arcgiser的博客
01-28 2098
表单验证 表单元素具有可以处理以执行验证的 onsubmit 事件。创建一个带有两个输入框和一个按钮的窗体。两个字段中的文本应该相同，不能为空，才可通过验证,否则会有弹窗提示。 <!-- 表单验证 --> <p>用户注册</p> <form onsubmit="return validate()" method="post"> 请输入账号: <input type="text" name="num" id="num
表单验证后提交 两种方式 2016/07/10
..G的博客
07-10 9626
————————————————前面比较啰嗦，具体方法在最后———————————— 今天使用ajax，在增加用户，点击保存后，先不提交，先判断填写的信息，然后确定是否提交。 这是做的第一个练手的项目，之前跟着视频学习，学到项目视频被加密了，只有项目第一天的视频可以看，不过第一天收获也很大，项目刚开始时候使用S2SH怎么一步步整合。都是先看一遍，再看着写一遍，再自己写一遍。学到的挺多的。 尽
Js校验表单数据后提交表单的3种方法
热门推荐
让编程改变世界
11-03 1万+
在现在的网站开发过程中，对表单数据进行验证是非常必须的，通过Js将表单数据在客户端进行校验验证不仅速度很快，而且还有一个更大的好处就是缓解服务器压力。如果我们不在客户端进行数据校验，无论什么数据全部都提交到后台服务器，让服务器来进行处理，这个对服务器的浪费是非常大的。故而今天本篇博文讲在浏览器客户端使用Js对表单数据校验后后提交表单的3种方法。 1、方法一 HTML代码：
html表单验证后提交,js校验表单后提交表单的三种方法总结
weixin_29752563的博客
06-30 338
第一种：function check(form) {if(form.userId.value=='') {alert("请输入用户帐号!");form.userId.focus();return false;}if(form.password.value==''){alert("请输入登录密码!");form.password.focus();return false;}return true;}...
layui插件表单验证提交触发提交的例子
10-16
今天小编就为大家分享一篇layui插件表单验证提交触发提交的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于jQuery实现表单提交验证
10-25
本文给大家分享的是一段基于jQuery的实现简单的表单提交验证的代码，非常简单实用，推荐给有相同需求的小伙伴们参考下。
表单提交验证类
01-19
>屏蔽功能类 1.1 屏蔽键盘所有键 [removed] <!– function [removed](){ event.keyCode = 0; event.returnvalue = false; } –> [removed] 1.2 屏蔽鼠标右键 在body标签里加上oncontextmenu=self.event....
Javascript的表单验证-提交表单
10-22
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。通过本文给大家介绍Javascript的表单验证-提交表单，对javascript表单验证，提交表单相关知识感兴趣的朋友一起学习吧
EasyUI中在表单提交之前进行验证
09-02
主要介绍了EasyUI中在表单提交之前进行验证的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 416
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1009
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 521
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 304
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
jquery表单验证提交
11-29
以下是一个简单的jQuery表单验证和提交的例子： ```html <form id="myform"> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <input type="checkbox" id="allow" name="allow" checked> <label for="allow">同意协议</label><br> <button type="submit">提交</button> </form> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { var $username = $('#username'); var $password = $('#password'); var $allow = $('#allow'); var $form = $('#myform'); // 验证用户名 function validateUsername() { var value = $username.val(); if (!value) { alert('用户名不能为空'); return false; } return true; } // 验证密码 function validatePassword() { var value = $password.val(); if (!value) { alert('密码不能为空'); return false; } return true; } // 验证同意协议 function validateAllow() { if (!$allow.prop('checked')) { alert('请同意协议'); return false; } return true; } // 提交表单 function submitForm() { alert('提交成功'); $form.submit(); } // 绑定提交事件 $form.submit(function(event) { event.preventDefault(); // 阻止默认提交行为 if (validateUsername() && validatePassword() && validateAllow()) { submitForm(); } }); }); </script> ``` 该例子中，我们使用jQuery选择器获取表单元素，并定义了三个验证函数：`validateUsername()`、`validatePassword()`和`validateAllow()`，分别用于验证用户名、密码和同意协议是否勾选。在提交表单时，我们通过`event.preventDefault()`阻止了默认的表单提交行为，并在验证通过后调用`submitForm()`函数提交表单。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

唐维康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值