js校验form表单

最新推荐文章于 2023-11-24 22:24:18 发布
最新推荐文章于 2023-11-24 22:24:18 发布
阅读量385 收藏 5
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44805105/article/details/110952575
版权

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			/*设置tr样式*/
			tr{
				height: 40px;
			}
			/*设置div样式*/
			#showdiv{
				border: solid 1px #FF0000;
				border-radius: 10px;
				width: 800px;
				margin: auto;
				margin-top: 40px;	
			}
			/*设置table*/
			table{
				margin: auto;
				color: black;	
			}
			span{
				font-size:13px;
			}
			#codeSpan{
				font-size:20px;
			}
		</style>
		<script type="text/javascript">
			//常见验证码
			function createCode(){
				//创建随机四位数
				var code =Math.floor(Math.random()*9000+1000);
				//获取元素对象
				var span=document.getElementById("codeSpan");
				//将数字存放到span中
				span.innerHTML=code;
				//将鼠标放上去变成小手
				span.style.cursor="pointer";
			}
			
			//验证用户名
			function checkUname(){
				//获取用户的用户信息
				var uname=document.getElementById("uname").value;
				//创建校验规则
				var reg=/^[\u4e00-\u9fa5]{2,4}$/
				//获取span对象
				var span=document.getElementById("unameSpan");
				//开始校验
				if(uname==""||uname==null){
					//输出校验结果
					span.innerHTML="用户名不能为空"
					span.style.color="red";
					return false;
				}else if(reg.test(uname)){
					//输出校验结果
					span.innerHTML="用户名OK";
					span.style.color="green";
					return true;
				}
				else{
					//输出校验结果
					span.innerHTML="用户名不符合规则";
					span.style.color="red";
					return false;
				}
			}
			//验证密码
			function checkPwd(){
				//获取用户密码
				var pwd=document.getElementById("pwd").value;
				//创建校验规则
				var reg=/^[a-z]\w{6,8}$/;
				//获取span对象
				var span=document.getElementById("pwdSpan");
				//开始校验
				if(pwd==""||pwd==null){
					span.innerHTML="密码不能为空";
					span.style.color="red";
					return false;
				}else if(reg.test(pwd)){
					span.innerHTML="密码可使用";
					span.style.color="green";
					return true;
				}else{
					span.innerHTML="密码不符合规则";
					span.style.color="red";
					return false;
				}
				checkPwd2();
				
			}
			//校验确认密码
			function checkPwd2(){
				//获取第一次密码
				var pwd=document.getElementById("pwd").value;
				//获取确认密码
				var pwd2=document.getElementById("pwd2").value;
				//获取span对象
				var span=document.getElementById("pwd2Span");
				//比较两次密码是否相同
				if(pwd2==""||pwd2==null){
					span.innerHTML="确认密码不能为空";
					span.style.color="red";
					return false;
				}else if(pwd==pwd2){
					span.innerHTML="密码ok";
					span.style.color="green";
					return true;
				}else{
					span.innerHTML="两次密码不一致";
					span.style.color="red";
					return false;
				}
			}
			//校验手机号
			function checkPhone(){
				return checkField("phone",/^1[3,4,5,7,8]\d{9}$/);
			}
			//校验邮箱
			function checkMail(){
				return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/)
			}
			//校验籍贯
			function checkAddress(){
				//获取用户选择的数据
				var sel=document.getElementById("address").value;
				//获取span
				var span=document.getElementById("addressSpan");
				//校验
				if(sel!=0){
					span.innerHTML="籍贯选择成功";
					span.style.color="green";
					return true;
				}else{
					span.innerHTML="籍贯不能为“请选择”";
					span.style.color="red";
					return false;
				}
			}
			
			
			//校验爱好
			function checkFav(){
					//获取所有的爱好
					var favs=document.getElementsByName("fav");
					//获取span
					var span=document.getElementById("favSpan");
					//遍历
					for(var i=0;i<favs.length;i++){
						if(favs[i].checked){
							span.innerHTML="爱好选择成功";
							span.style.color="green";
							return true;
						}
					}
					
					span.innerHTML="爱好至少选则一项";
					span.style.color="red";
					return false;
					
				}
			//校验是否同意公司协议
			function checkAgree(){
				document.getElementById("sub").disabled=!document.getElementById("agree").checked;
			}
			//提交判断
			function checkSub(){
				checkUname();
					checkPwd();
					checkPwd2();
					checkPhone();
					checkMail();
					checkAddress();
					checkFav();
					return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav();
			}
			
			
			/**********************************************************************************************************/
			//封装校验：相同的保留，不相同的传参
			function checkField(id,reg){
				//获取用户数据
				var inp=document.getElementById(id);
				var va=inp.value;
				var alt=inp.alt;
				
				//创建校验规则
				var span=document.getElementById(id+"Span");
				//开始校验
				if(va==""||va==null){
					//输出校验结果
					span.innerHTML=alt+"不能为空";
					span.style.color="red";
					return false;
				}else if(reg.test(va)){
					//输出校验结果
					span.innerHTML=alt+"OK";
					span.style.color="green";
					return true;
					
				}else{
					//输出校验结果
					span.innerHTML=alt+"不符合规则";
					span.style.color="red";
					return false;
				}
			}
			
		</script>
	</head>
	<body onload="createCode()">
		<div id="showdiv">
		<form action="#" method="get" onsubmit="return checkSub()">
			<table>
				<tr>
					<td >用户名:</td>
					<td >
						<input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名"/><span id="unameSpan">*2-4位汉字</span>
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/>
						<span id="pwdSpan"></span>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td>
						<input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/>
						<span id="pwd2Span"></span>
					</td>
				</tr>
				<tr>
					<td>手机号:</td>
					<td>
						<input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/>
						<span id="phoneSpan"></span>
					</td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td>
						<input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()"/>
						<span id="mailSpan"></span>
						
				</tr>
				<tr>
					<td>性别</td>
					<td>
						男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/>
						女 <input type="radio" name="sex" id="sex" value="1" />
					</td>
				</tr>
				<tr>
					<td>籍贯:</td>
					<td>
						<select name="address" id="address" onchange="checkAddress()">
							<option value="0">--请选择--</option>
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
						</select>
						<span id="addressSpan"></span>
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>LOL
						<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉
						<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>吃饭<br />
						<input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>打豆豆
						<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>看电影
						<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />听歌
						<span id="favSpan"></span>
					</td>
				</tr>
				<tr>
					<td>个人介绍:</td>
					<td>
						<textarea name="intro" rows="4" cols="40" id="intro"></textarea>
						
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text" name="code" id="code" value="" style="width: 100px;"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span id="codeSpan" onclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;"></span>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()"/>是否同意本公司协议</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled"/></td>
				</tr>
			</table>
		</form>
		</div>
	</body>
</html>

172行提交判断：

function checkSub(){
				checkUname();
					checkPwd();
					checkPwd2();
					checkPhone();
					checkMail();
					checkAddress();
					checkFav();
					return checkUname()&&checkPwd()&&checkPwd2()
					&&checkPhone()&&checkMail()&&checkAddress()&&checkFav();
			}

当所有信息都符合规则，即都返回true时才会提交，否则不允提交

you些话
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS经典小项目-form表单校验
05-18
原生JS经典小项目-form表单校验
javascript将异步校验表单改写为同步表单
10-24
主要介绍了javascript将异步校验表单改写为同步表单,需要的朋友可以参考下
Javascript的form表单校验输入框
最新发布
m0_71966801的博客
11-24 706
对于每个输入框，我们使用条件语句来检查其值是否满足特定要求，并在不符合要求时显示警告框并返回false以阻止表单提交。例如，如果姓名字段为空，则显示警告框并返回false。同样地，我们使用正则表达式来验证电子邮件和电话号码的格式，使用比较运算符来验证年龄的范围。的JavaScript函数，该函数用于验证表单数据。在函数中，首先获取每个输入框的值，然后逐一进行验证。在HTML部分，我们将每个输入框与相应的标签进行关联，并在表单元素上添加了。如果所有输入框的值都通过验证，将允许表单提交；否则，将阻止表单提交。
jsvalidationForm表单的验证 非常实用
09-09
实现功能里面有代码演示，注意的是如果在struts下用的时候 如果所验证的jsp文件不跟validation-framework.js文件在同一目录下 则需要在validation-framework.js 里的var ValidationRoot = "项目名/目录名/"; 切记需要项目名 因为这个花了我2个小时才找出出错的原因
js学习之校验form表单
独狼的博客
06-26 438
<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
js form表单的校验
weixin_30371469的博客
04-17 162
if(!$("#form").validate().form()){ return false;} <元素 class="required"></元素> 校验当前form表单中的必填项required是否已填，如果为填写不提交表单 转载于:https://www.cnblogs.com/2661314cn/p/10721918.html...
JavaScript(JS) Form表单验证
weixin_42098295的博客
09-19 570
Form表单验证通常在客户端输入所有必要的数据，并按下Submit按钮之后在服务器上进行。如果客户端输入的数据不正确或丢失了，服务器将不得不将所有数据发送回客户机，并请求用正确的信息重新提交Form表单。这个过程耗时也不是必要的，也给服务器带来了很大的负担。可以在客户端进行Form表单验证来解决这个问题。本文主要介绍JavaScript(JS) Form表单验证。 原文地址：JavaScript(JS) Form表单验证 ...
JavaScript的form表单验证中的身份证校验.pdf
12-16
JavaScript的form表单验证中的身份证校验
javascript检查表单数据是否改变的方法
10-27
需要检查用户是否修改了一个表单中的内容，可以使用本文提供的方法，如果修改了表单的内容则返回true，没修改则返回false，有需求的朋友可以参考下
form.js表单验证
05-15
表单验证。第一版本中有：非空验证、正则验证、ajax验证。以后的版本还会添加更多的验证方法
使layui.js form 可主动验证表单是否通过
07-22
使layui.js form 可主动验证表单是否通过。扩展layui下的form.js 。文章链接 https://blog.csdn.net/qq_17837497/article/details/107505486
js——form表单验证
a805814077的博客
12-30 1390
使用js实现简易表单验证
js 实现简单form表单校验
逆风优雅的博客
01-06 377
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
Js检验form表单数据
noShutdown的博客
03-01 780
使用js检验form表单内数据，适用于大多数，比较基本。 js代码 //封装方法，只能在差不多的input标签里使用 function check(input) { //获取元素对应的span标签 var span = document.getElementById(input.id + "Span"); ...
JavaScript进阶（四）form表单校验
jwang的博客
11-08 1615
前言       本章将学习表单的校验，作为一个前面学习的总结！ 方法 1.概念 我们知道，在学习HTML的时候，我们做了一个非常丑陋的表单，里面有文本框、单选钮、复选框等一系列表单元素。这些都是随便填写的，没有加任何的校验。也就是说正常情况下我们需要对表单进行校验，确保用户输入正确！ 2.具体思路 1）回顾一下简单的form表单的写法 &lt;!DOCTYPE html&gt; ...
JavaScript对Form表单进行校验并提交
-
07-19 545
<form id="jvForm" action="/user/register" method="post" onsubmit="return check(this)"> <input type="text" id="name" name="name"> <input type="text" id="account" name="account"> &l...
JavaScript之Form表单及表单校验完整代码
熊凯瑞的博客
09-05 714
了解基础的form表单相关知识，同时对表单校验有更深的认识，最完整的表单校验代码，可以直接使用，用纯纯的干货增长丰富的知识。
# js校验form表单大合集
cullinans的博客
08-26 1035
js校验form表单集锦 本人在工作中遇到的各种js校验表单方法大合集，希望对自己对各位同行有所帮助（目前遇到的就是这些，以后遇到其他的还会持续更新） 限定只能输入数字：
element form表单校验行内写法
09-07
element form表单校验是一种常用的前端表单校验方式，可以有效地对表单输入的内容进行验证，提高用户输入的准确性和数据的有效性。下面是element form表单校验的行内写法的解释。 Element form表单校验的行内写法主要是通过在input标签上添加相关属性来定义校验规则，实现对表单输入的校验。其中常用的属性包括：required、pattern、min、max、minlength、maxlength、type等。 首先，我们需要在input标签上添加required属性，用于设置必填项的校验规则。这样可以确保用户必须填写该字段，否则会弹出错误提示。 其次，我们可以使用pattern属性，通过正则表达式来定义输入内容的格式。例如，pattern="[a-zA-Z0-9]+"表示输入内容只能包含字母和数字。 另外，我们还可以使用min和max属性，用于限制输入的最小值和最大值。例如，min="1"和max="100"表示输入内容必须在1到100之间。 此外，如果我们需要限制输入内容的长度，可以使用minlength和maxlength属性。例如，minlength="6"和maxlength="12"表示输入内容的长度必须在6到12个字符之间。 最后，type属性可以用来指定输入内容的类型，例如email、tel、url等。这样可以对不同类型的输入进行相应的校验。 总的来说，element form表单校验的行内写法通过在input标签上添加相关属性，实现对表单输入的校验。这种写法简单方便，适用于表单校验需求简单的场景。但对于复杂的校验规则，建议使用element form表单校验的自定义写法，通过js代码来实现更灵活的校验逻辑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值