原生js综合表单验证

最新推荐文章于 2024-04-20 14:59:10 发布
最新推荐文章于 2024-04-20 14:59:10 发布
阅读量707 收藏 5
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mcyhero/article/details/91041697
版权 
 要求：
	 	1、使用失去焦点事件完成表单验证  每一项验证失去焦点时都可以即时验证
	 	2、姓名： 单词字符组成  6--10为 ，不能用数字开头
	 	      年龄： 只能由数字组成  年龄不能为负数
	 	      密码：6--18位字符组成       有密码强弱验证 
	 	3、确认密码和密码相同
	 	4、手机号： 15  13  18 开头
	 	5、qq ： 5--12位数字  第一位不能是0
	 	6、邮箱： 必须有@符号
	 	7、邮编：6为数字
	 	8、身份证： 18位   最后一位考虑有x
	 	9、验证码  
	 		输入的验证码必须和红色框中的相同，  点击看不清可以实现验证码的切换
	 		验证码由字母  数字组成
	 	10、爱好和性别必选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title> New Document </title>
		<meta name="Generator" content="EditPlus">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
	</head>

	<body>
		<form action="http://www.baidu.com" method="get" id="mf">
			<table width="449" height="530" border="1" align='center'>
				<tr>
					<td colspan="2" align="center">用户名注册</td>
				</tr>
				<tr>
					<td width="116" align="right">姓名：</td>
					<td width="323"><label>
							<input type="text" name="" id="name" />
							<span id="nameSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
				<tr>
					<td width="116" align="right">性别：</td>
					<td width="323"><label>
							<input type="radio" name="rad" class="sex" />男
							<input type="radio" name="rad" class="sex" />女
							<span id="sexSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
				<tr>
					<td align="right">年龄：</td>
					<td><label>
							<input type="text" name="" id="age" />
							<span id="ageSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
				<tr>
					<td align="right">密码：</td>
					<td><label>
							<input type="password" name="" id="pwd" />
							<span id="pwdSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
				<tr>
					<td align="right">确认密码：</td>
					<td><label>
							<input type="password" name="" id="qpwd" />
							<span id="qpwdSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
				<tr>
					<td align="right">手机：</td>
					<td><label>
							<input type="text" name="" id="tel" />
							<span id="telSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
				<tr>
					<td align="right">QQ：</td>
					<td><label>
							<input type="text" name="" id="qq" />
							<span id="qqSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
				<tr>
					<td align="right">邮箱：</td>
					<td><label>
							<input type="text" name="" id="email" />
							<span id="emailSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
				<tr>
					<td align="right">邮编：</td>
					<td><label>
							<input type="text" name="" id="eml" />
							<span id="emlSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
				<tr>
					<td align="right">身份证：</td>
					<td><label>
							<input type="text" name="" id="sname" />
							<span id="snameSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
				<tr>
					<td align="right">验证码：</td>
					<td><label>
							<input type="text" id="yzm" />
							<span id="yzmName" style="width:60px;height: 15px;border: 1px solid red;display: inline-block;font-size: 12px;"></span>
							<a href="#" id="look" style="font-size: 12px;">看不清</a>
							<span id="yzmSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
				<tr>
					<td align="right">爱好：</td>
					     <td><label>
							<input type="checkbox" name="a" id="c1">
							足球
							<input type="checkbox" name="a" id="c2">
							篮球
							<input type="checkbox" name="a" id="c3">
							排球
							<input type="checkbox" name="a" id="c4">
							网球<span id="aSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
				<tr>
					<td height="36" colspan="2" align="center"><label>
							<input type="submit" value="注册" id="sbt" />
							<span id="sbtSpan" style="color: red;font-size: 12px;"></span>
						</label></td>
				</tr>
			</table>
		</form>
	</body>
</html>
//姓名	 
	var _name = document.getElementById("name");
	var nameSpan = document.getElementById("nameSpan");
	var flagname = false;
	_name.onblur = function() {
		var reg = /^\D[a-zA-Z]{6,10}$/i;
		var str = _name.value;
		if (!reg.test(str)) {
			nameSpan.innerText = "请输入正确格式";
			flagname = false;
		} else {
			nameSpan.innerText = "";
			flagname = true;
		}
	}

	//年龄
	var _age = document.getElementById("age");
	var ageSpan = document.getElementById("ageSpan");
	var flagage = false;
	_age.onblur = function() {
		var reg = /^\d{1,3}$/;
		var str = _age.value;
		if (!reg.test(str)) {
			ageSpan.innerText = "请输入正确格式";
			flagage = false;
		} else {
			ageSpan.innerText = "";
			flagage = true;
		}
	}

	//密码
	var pwd = document.getElementById("pwd");
	var pwdSpan = document.getElementById("pwdSpan");
	var flagpwd = null;
	pwd.onblur = function() {
		var str = pwd.value;
		var regpwd = /^.{6,18}$/;
		var _regNum = /\d+/; //字符串中包含至少一个数字
		var _regLetter = /[a-zA-Z]+/; //至少包含一个字母
		var _regChar = /[!@#$%]+/; //至少包含一个其他字符		
		//纯
		var regNum = /^\d+$/;
		var regLetter = /^[a-zA-Z]+$/;
		var regChar = /^[!@#$%]+$/;
		if (regpwd.test(str)) {
			flagpwd = true;
			if (regNum.test(str) || regLetter.test(str) || regChar.test(str)) {
				pwdSpan.innerText = "密码强度：弱";
			} else if (_regNum.test(str) && _regLetter.test(str) && _regChar.test(str)) {
				pwdSpan.innerText = "密码强度：强";
			} else {
				pwdSpan.innerText = "密码强度：中";
			}
		} else {
			flagpwd = false;
			pwdSpan.innerText = "密码格式不正确";
		}
	}

	//确认密码
	var _qpwd = document.getElementById("qpwd");
	var qpwdSpan = document.getElementById("qpwdSpan");
	var flagqpwd = false;
	_qpwd.onblur = function() {
		var str = _qpwd.value;
		if (str == pwd.value) {
			qpwdSpan.innerText = "";
			flagqpwd = true;
		} else {
			qpwdSpan.innerText = "请确认密码";
			flagqpwd = false;
		}
	}

	//手机
	var _tel = document.getElementById("tel");
	var telSpan = document.getElementById("telSpan");
	var flagtel = false;
	_tel.onblur = function() {
		var reg = /^1(5|3|8){1}\d{9}$/;
		var str = _tel.value;
		if (reg.test(str)) {
			telSpan.innerText = "";
			flagtel = true;
		} else {
			telSpan.innerText = "请输入正确的电话号码";
			flagtel = false;
		}
	}

	// QQ
	var _qq = document.getElementById("qq");
	var qqSpan = document.getElementById("qqSpan");
	var flagqq = false;
	_qq.onblur = function() {
		var reg = /^\D{1}\d{4,11}$/;
		var str = _qq.value;
		if (reg.test(str)) {
			qqSpan.innerText = "";
			flagqq = true;
		} else {
			qqSpan.innerText = "请输入正确的QQ";
			flagqq = false;
		}
	}

	//邮箱
	var _email = document.getElementById("email");
	var emailSpan = document.getElementById("emailSpan");
	var flagemail = false;
	_email.onblur = function() {
		var reg = /^\w+@\w+(\.\w+)+$/
		var str = _email.value;
		if (reg.test(str)) {
			emailSpan.innerText = "";
			flagemail = true;
		} else {
			emailSpan.innerText = "请输入正确的邮箱";
			flagemail = false;
		}
	}

	//邮编
	var _eml = document.getElementById("eml");
	var emlSpan = document.getElementById("emlSpan");
	var flageml = false;
	_eml.onblur = function() {
		var reg = /^[^0]{1}\d{5}$/;
		var str = _eml.value;
		if (reg.test(str)) {
			emlSpan.innerText = "";
			flageml = true;
		} else {
			emlSpan.innerText = "请输入正确的邮编";
			flageml = false;
		}
	}

	//身份证
	var _sname = document.getElementById("sname");
	var snameSpan = document.getElementById("snameSpan");
	var flagsname = false;
	_sname.onblur = function() {
		var reg = /^\d{17}(\d|x)$/;
		var str = _sname.value;
		if (reg.test(str)) {
			snameSpan.innerText = "";
			flagsname = true;
		} else {
			snameSpan.innerText = "请输入正确的身份证号";
			flagsname = false;
		}
	}

	//验证码
	var yzmname = document.getElementById("yzmName");
	var yzmSpan = document.getElementById("yzmSpan");
	var yzm = document.getElementById("yzm");
	var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'a', 'b', 'c', 'd', 'e', 'f', 1, 2, 3, 
		'q', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'
	];
	var sum = "";
	for (var i = 0; i < 4; i++) {
		var index = parseInt(Math.random() * a.length);
		sum += a[index];
	}
	yzmname.innerHTML = sum;
	var look = document.getElementById("look"); //看不清
	look.onclick = function(){
		var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'a', 'b', 'c', 'd', 'e', 'f', 1, 2, 3, 
			'q', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'
		];
		var sum = "";
		for (var i = 0; i < 4; i++) {
			var index = parseInt(Math.random() * a.length);
			sum += a[index];
		}
		yzmname.innerHTML = sum;
		yzm.value = "";
	}
	var flagyzm = false;
	yzm.onblur = function() {
		if (yzm.value == yzmname.innerHTML) {
			yzmSpan.innerText = "";
			flagyzm = true;
		} else {
			yzmSpan.innerText = "不正确";
			flagyzm = false;
		}
	}

	//性别必选项
	var sex = document.getElementsByName("rad");
	var sexSpan = document.getElementById("sexSpan");
	for (var i = 0; i < sex.length; i++) {
        var flagsex = false;		
        if(sex[i].checked ==false){
			sexSpan.innerHTML = "至少选择一项";
		}else{
		  }
		sex[i].onclick = function(){
			sexSpan.innerHTML = "";
		}
	}

	//爱好必选项
    var aspan = document.getElementById("aSpan");
    var hob = document.getElementsByName("a");
     for(var i =0;i<hob.length;i++){
          if(hob[i].checked ==false){
			  aspan.innerHTML = "至少选择一项";
		  }
		  hob[i].onclick = function(){
			  aspan.innerHTML = "";
			 
		  }
	 }

	//提交
	mf.onsubmit = function() {
		if (flagyzm && flagqpwd && flagage && flagname && flagpwd && flagsname && 
		flageml && flagemail && flagqq && flagtel && flagyzm) {
			return true;
		} else {
			return false;
		}
	}

 

马晨宇
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现表单验证（基于正则表达式）
m0_70274918的博客
04-29 574
在静态表单的基础上，我们想一下要做的效果 我们想实现的效果： 1. 实现单击获取验证码时的倒计时效果😄 2. 通过正则表达式判断输入的姓名和电话号是否符合规范🙋 3. 如果符合规范会在后面打绿色的对号，不符合规范会在输入框里提示红色的提示字样🐶 4. 当姓名或手机号有不符合规范的时候点击提交会弹出不正确的提示框，二者都符合规范时点击提交弹出提交成功对话框💣 我们一个一个效果来完成，先看一下倒计时效果： 首先我们点击获取验证码这里，会立刻进入一个三秒钟的倒计时，然后里面的文字变成了倒计时秒数，并且在进入倒计
原生JS实现表单验证
weixin_45732235的博客
11-27 198
原生表单验证
原生JS经典小项目-form表单校验
05-18
原生JS经典小项目-form表单校验
原生js —— 表单验证
我的博客
09-02 1638
表单验证示例 知识点： ① form标签的action属性为提交地址，method属性为提交方式，取值有get和post。若想禁止点击type=submit//button按钮后提交表单内容，可通过form对象.onsubmit=function（）{return false}/对象.onsubmit="return false;""来禁止。默认是return true的。故默认是直接提交的。 ...
JavaScript表单验证表单验证
最新发布
zzb_lly的博客
04-20 403
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了频率,提高了效率.在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等。验证邮箱时是否为邮箱格式，是否添加@与符合标准的后缀名等。· 验证用户名与密码为指定格式。· 验证单选框所选内容。
原生js的表单认证
weixin_57219176的博客
09-16 269
原生js的表单验证
《原生javascript表单验证实例教程》源码
04-02
本文件属于文章《原生javascript表单验证实例教程》的完整代码，在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中直接使用。
原生js实现表单验证（提交后验证）
08-29
原生JavaScript实现的表单验证可以避免对第三方库的依赖，使得代码更加轻量级且易于理解和维护。下面将详细介绍如何使用JavaScript进行表单验证，并通过一个具体的实例来阐述这一过程。 首先，我们需要创建一个HTML...
基于原生js的from表单验证插件
05-01
本文将深入探讨“基于原生js的from表单验证插件”的核心概念、工作原理以及如何使用。 首先，表单验证的基本原理是检查用户在表单字段中输入的数据是否满足预定义的规则。这些规则可以包括但不限于：非空验证、电子...
js-实现原生表单提交验证.zip
07-11
原生js表单提交验证代码下载。原生JavaScript实现，适合新手学习js。用户填写完成后，点击提交按钮，判断填写的信息是否符合要求，如不符合将弹出相应的修改信息要求，引导用户正确填写表单。
js表单验证（简单）
11-07
js表单验证（简单）
原生js实现获取form表单数据代码实例
01-19
本文实例为大家分享了原生js实现获取form表单数据的具体代码，供大家参考，具体内容如下 //获取指定form中的所有的<input>对象 function getElements(formId) { var form = document.getElementById(formId); var elements = new Array(); var tagElements = form.getElementsByTagName('input'); for (var j = 0; j < tagElements.length; j++){ elements.push
原生js简单的登录表单验证代码
10-05
以下是对"原生js简单的登录表单验证代码"的详细解释： 1. **表单元素**：首先，我们需要在HTML中创建一个登录表单，包含用户名(input[type="text"])和密码(input[type="password"])字段，以及提交按钮(input[type=...
JavaScript表单验证
weixin_52629592的博客
06-14 1万+
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了IO的频率,提高了效率.在表单验证中,我们通常使用如下的验证功能:验证用户名与密码为指定格式在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等验证单选框所选内容最常见的验证单选框就是验证
JS学习——表单验证
weixin_51963604的博客
05-26 4074
JS(JavaScript),最先听到的时候以为是和java一样，必须要学的，但是后来接触到后，才发现是不一样的，JS一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果（来源百度百科）。 本文主要是讲将JS如何嵌入HTML中实现表单的验证，会简单介绍下HTML、CSS、JS的内容，以及正则表达式，由于笔者还是个初学者，所以不会很深入，很多地方也是有点模糊不清，不对之处，还望多多指教，觉得不错还请点个赞！ 互联网的三大基石 URL(
JavaScript之表单验证
热门推荐
weixin_64938628的博客
03-06 1万+
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。 目录 一.简单的表单验证 验证方式一: 验证方式二： 二.正则验证 一.正则的规则 内容 次数 二.正则的注意事项 三.二级联动 一.简单的表单验证 验证方式一: <html> <head> <meta charset="UTF-8"> <title>Title&...
JS表单验证
weixin_44870681的博客
09-23 798
12个常用的JS表单验证 1. 长度限制 <p>1. 长度限制</p> <form name="a" onsubmit="return test()"> <textarea name="b" cols="40" rows="6" placeholder="不能超过50个字符！"></textarea> <br /> ...
js 几种常用的表单输入判断
ZetaChow
12-22 971
//函数名：chksafe//功能介绍：检查是否含有"",//,"/"//参数说明：要检查的字符串//返回值：0：是  1：不是function chksafe(a){  return 1;/* fibdn = new Array ("" ,"//", "、", ",", ";", "/"); i=fibdn.length; j=a.length; for (ii=0;ii { for (
注册 原生js验证 博客园
05-16
注册原生js验证博客园可以通过以下步骤实现： ...总之，注册原生js验证博客园需要前端开发人员编写JavaScript代码来验证用户输入数据，并结合后端进行账户验证和保存。通过以上步骤可以实现一个基本的注册系统。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值