js完美实现表单验证

最新推荐文章于 2022-05-07 16:09:21 发布
最新推荐文章于 2022-05-07 16:09:21 发布
阅读量219 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crazyFlex/article/details/103569403
版权 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>
	<div id="reg">
		<h2><img src="img/close.png" alt="关闭" class="close" />会员注册</h2>
		<form id="form" action="#" name="reg">
			<dl>
				<dd>用 &nbsp;户 &nbsp;名：<input id="uname" type="text" name="user" class="text" />
					<span id="info_user" class="info info_user">请输入用户名，2~20位，由字母、数字和下划线组成</span>
					<span id="error_user" class="error error_user">输入不合法，请重新输入!</span>
					<span id="succ_user" class="succ succ_user">可用</span>
					<span id="loading" class="loading">正在检测用户名...</span>
				</dd>
				<dd>密 &nbsp; &nbsp; &nbsp; 码：<input id="pwd" type="password" name="pass" class="text" />
					<span id="info_pass" class="info info_pass">
						<p>安全级别：<strong id="s1" class="s s1">■</strong> <strong id="s2" class="s s2">■</strong> <strong
								id="s3" class="s s3">■</strong> <strong id="s4" class="s s4"
								style="font-weight: normal;"></strong></p>
						<p><strong id="q1" style="font-weight: normal;">○</strong> 6-20个字符</p>
						<p><strong id="q2" style="font-weight: normal;">○</strong> 只能包含大小写字母、数字和非空格字符</p>
						<p><strong id="q3" style="font-weight: normal;">○</strong> 大、小写字母、数字、非空字符，2种以上</p>
					</span>
					<span id="error_pass" class="error error_pass">输入不合法，请重新输入!</span>
					<span id="succ_pass" class="succ succ_pass">可用</span>
				</dd>
				<dd>密码确认：<input type="password" name="notpass" class="text" id="pwd2" />
					<span id="info_notpass" class="info info_notpass">请再一次输入密码！</span>
					<span id="error_notpass" class="error error_notpass">密码不一致，请重新输入!</span>
					<span id="succ_notpass" class="succ succ_notpass">可用</span>
				</dd>
				<dd>提 &nbsp; &nbsp; &nbsp; 问：
					<select name="ques">
						<option value="0">----请选择----</option>
						<option value="1">--您最喜欢吃的菜</option>
						<option value="2">--您的狗狗的名字</option>
						<option value="3">--您的出生地</option>
						<option value="4">--您最喜欢的明星</option>
					</select>
					<span class="error error_ques">尚未选择提问，请选择!</span>
				</dd>
				<dd>回 &nbsp; &nbsp; &nbsp; 答：<input type="text" name="ans" class="text" />
					<span class="info info_ans">请输入回答，2~32位！</span>
					<span class="error error_ans">回答不合法，请重新输入!</span>
					<span class="succ succ_ans">可用</span>
				</dd>
				<dd>电子邮件：<input id="email" type="text" name="email" class="text" autocomplete="off" />
					<span id="info_email" class="info info_email">请输入电子邮箱！</span>
					<span id="error_email" class="error error_email">邮箱不合法，请重新输入!</span>
					<span id="succ_email" class="succ succ_email">可用</span>
					<ul id="all_email" class="all_email">
						<li><span class="emailText"></span>@qq.com</li>
						<li><span class="emailText"></span>@163.com</li>
						<li><span class="emailText"></span>@souhu.com</li>
						<li><span class="emailText"></span>@sina.com.cn</li>
						<li><span class="emailText"></span>@gmail.com</li>
						<li><span class="emailText"></span>@yahoo.com.cn</li>
						<li><span class="emailText"></span>@yeah.net</li>
					</ul>
				</dd>
				<dd class="birthday">生 &nbsp; &nbsp; &nbsp; 日：
					<select id="year" name="year">
						<option value="0">-年-</option>
					</select>-
					<select id="month" name="month">
						<option value="0">-月-</option>
					</select>-
					<select id="day" name="day">
						<option value="0">-日-</option>
					</select>
					<span class="error error_birthday">尚未全部选择，请选择!</span>
				</dd>
				<dd style="height: 105px;"><span style="vertical-align: 85px;">备 &nbsp; &nbsp; &nbsp; 注：</span><textarea
						id="tarea" name="ps"></textarea></dd>
				<dd id="okNum" style=" display: block;" class="ps">还能输入<strong id="num" class="num">200</strong>字</dd>
				<dd id="errNum" style=" display: none;" class="ps">已超过<strong id="moreNum" class="num"></strong>字，<span
						id="clear" class="clear">清尾</span></dd>
				<dd style="padding: 0 0 0 65px;"><input id="sub" type="submit" name="sub" class="submit" value="" />
				</dd>
			</dl>
		</form>
	</div>
</body>
</html>

 * 1.用户名验证
 * 		uname获取焦点时规则提示
 * 		失去焦点时，如果不符合验证要求，提示不合法信息
 * 		符合要求提示成功信息
 * 2.密码验证
 * 3.密码强度验证
 * 4.邮箱验证
 * 5.年月日三级联动
 * 6.备注实现
 * 当点击提交按钮，表单验证只要有一个未通过验证，无法提交

<script type="text/javascript">
	
	var form = $id("form");
	var sub = $id("sub");
	var uname = $id("uname");
	var info_user = $id("info_user");
	var error_user = $id("error_user");
	var succ_user = $id("succ_user");
	var loading = $id("loading");
	//表单提交
	var nameFlag = false;
	var pwdFlag = false;
	var emailFlag = false;

	form.onsubmit = function () {
		if (nameFlag == true && pswFlag == true && emailFlag == true) {
			return true;
		} else {
			// alert("验证未通过");
			return false;
		}
	}
	//用户名验证
	uname.onfocus = function () {
		succ_user.style.display = "none";
		error_user.style.display = "none";
		info_user.style.display = "block";
	}
	uname.onblur = function () {
		var reg = /^\w{2,20}$/;
		info_user.style.display = "none";
		if (reg.test(uname.value)) {
			succ_user.style.display = "block";
			nameFlag = true;
		} else {
			error_user.style.display = "block";
			nameFlag = false;
		}
	}
	//密码验证
	var pwd = $id("pwd");
	var info_pass = $id("info_pass");
	var error_pass = $id("error_pass");
	var succ_pass = $id("succ_pass");

	pwd.onfocus = function () {
		succ_pass.style.display = "none";
		error_pass.style.display = "none";
		info_pass.style.display = "block";
	}
	pwd.onblur = function () {
		var reg = /^\S{6,20}$/;
		info_pass.style.display = "none";
		if (reg.test(pwd.value)) {
			succ_pass.style.display = "block";
			nameFlag = true;
		} else {
			error_pass.style.display = "block";
			pwdFlag = false;
		}
	}
	//密码强度验证；
	var s1 = $id("s1");
	var s2 = $id("s2");
	var s3 = $id("s3");
	var s4 = $id("s4");
	var q1 = $id("q1");
	var q2 = $id("q2");
	var q3 = $id("q3");

	pwd.onkeyup = function () {
		if (pwd.value.length <= 20 && pwd.value.length >= 6) {
			q1.innerHTML = "●";
		} else {
			q1.innerHTML = "○";
		}
		if (/^\S+$/.test(pwd.value)) {
			q2.innerHTML = "●";
		} else {
			q2.innerHTML = "○";
		}
		//   字母/[a-zA-Z]/    数字/\d/   非空符号/[^0-9a-zA-Z ]/
		if ((pwd.value.search(/\d/) != -1 && pwd.value.search(/[^0-9a-zA-Z ]/) != -1) || (pwd.value.search(/[^0-9a-zA-Z ]/) != -1 && pwd.value.search(/[a-zA-Z]/) != -1) || (pwd.value.search(/\d/) != -1 && pwd.value.search(/[a-zA-Z]/) != -1)) {
			q3.innerHTML = "●";
		} else {
			q3.innerHTML = "○";
		}
		if (pwd.value.length < 6) {
			s4.innerHTML = "";
		}
		if (pwd.value.length >= 6) {
			s1.style.color = "black";
			s4.innerHTML = " 初级";
		} else {
			s1.style.color = "#ccc";
		}
		if (pwd.value.length >= 10) {
			s2.style.color = "black";
			s4.innerHTML = " 中级";
		} else {
			s2.style.color = "#ccc";
		}
		if (pwd.value.length >= 15) {
			s3.style.color = "black";
			s4.innerHTML = " 高级";
		} else {
			s3.style.color = "#ccc";
		}
	}
	//密码确认
	var pwd2 = $id("pwd2");
	var info_notpass = $id("info_notpass");
	var error_notpass = $id("error_notpass");
	var succ_notpass = $id("succ_notpass");

	pwd2.onfocus = function () {
		succ_notpass.style.display = "none";
		error_notpass.style.display = "none";
		info_notpass.style.display = "block";
	}
	pwd2.onblur = function () {
		info_notpass.style.display = "none";
		if (pwd2.value == pwd.value) {
			succ_notpass.style.display = "block";
			pwdFlag = true;
		} else {
			error_notpass.style.display = "block";
			pwdFlag = false;
		}
	}
	//邮箱
	var email = $id("email");
	var info_email = $id("info_email");
	var error_email = $id("error_email");
	var succ_email = $id("succ_email");
	var all_email = $id("all_email");
	var all_email_li = all_email.children;
	var emailText = document.getElementsByClassName("emailText");
	var index = -1;
	//邮箱补全
	email.onkeyup = function (eve) {
		var e = eve || event;
		var code = e.keyCode || e.which || e.charCode;

		all_email.style.display = "block";
		for (var i = 0; i < emailText.length; i++) {
			emailText[i].innerHTML = this.value;
		}
		for (var i = 0; i < all_email_li.length; i++) {
			all_email_li[i].style.background = "white";
		}
		if (code === 13) {
			email.value = all_email_li[index].innerText;
			document.onclick();
			email.onblur();
		}
		if (code === 38) {
			index--;
			if (index == -1) {
				index = 6;
			}
			all_email_li[index].style.background = "#ccc";
		}
		if (code === 40) {
			index++;
			if (index == 7) {
				index = 0;
			}
			all_email_li[index].style.background = "#ccc";
		}

	}
	all_email.onmousemove = function (eve) {
		var e = eve || event;
		var target = e.target || e.srcElement;
		for (var i = 0; i < all_email_li.length; i++) {
			all_email_li[i].style.background = "white";
		}
		if (target.nodeName === "LI") {
			for (var i = 0; i < all_email_li.length; i++) {
				all_email_li[i].style.background = "white";
			}
			target.style.background = "#ccc";
			target.onclick = function () {
				email.value = target.innerText;
				all_email.style.display = "none";
			}
		}
	}
	document.onclick = function () {
		all_email.style.display = "none";
	}
	//邮箱验证
	email.onfocus = function () {
		succ_email.style.display = "none";
		error_email.style.display = "none";
		info_email.style.display = "block";

	}
	email.onblur = function () {

		var reg = /^\w{3,20}@[0-9a-zA-Z]{2,6}(\.[a-zA-Z]{2,3}){1,2}$/
		info_email.style.display = "none";
		if (reg.test(email.value)) {
			succ_email.style.display = "block";
			emailFlag = true;
		} else {
			error_email.style.display = "block";
			emailFlag = false;
		}
	}
	// 日历
	function scjd(p) {//删除p所有子元素节点，剩第一个
		for (var i = p.children.length-1; i>0; i--) {
			if (p.children.length > 1) {
				p.removeChild(p.lastElementChild);
			}
		}
	}
	function runnian(num) {//判断闰年
		if (num % 4 == 0 && num % 100 != 0 || num % 400 == 0) { return true } else { return false }
	};
	var year = $id("year");
	var month = $id("month");
	var day = $id("day");

	for (var i = 2020; i > 1900; i--) {
		year.innerHTML += '<option value="' + i + '">' + i + '</option>';
	}
	year.onchange = function () {
		scjd(month);
		for (var i = 1; i < 13; i++) {
			month.innerHTML += '<option value="' + i + '">' + i + '</option>';
		}
	}
	month.onchange = function () {
		if (year.value != 0 && month.value != 0) {
			if (month.value == 1 || month.value == 3 || month.value == 5 || month.value == 7 || month.value == 8 || month.value == 10 || month.value == 12) {
				scjd(day);
				for (var i = 1; i < 32; i++) {
					day.innerHTML += '<option value="' + i + '">' + i + '</option>';
				}
			}
			if (month.value == 4 || month.value == 6 || month.value == 9 || month.value == 11) {
				scjd(day);
				for (var i = 1; i < 31; i++) {
					day.innerHTML += '<option value="' + i + '">' + i + '</option>';
				}
			}
			if (month.value == 2) {
				if (runnian(year.value)) {
					scjd(day);
					for (var i = 1; i < 30; i++) {
						day.innerHTML += '<option value="' + i + '">' + i + '</option>';
					}
				} else {
					scjd(day);
					for (var i = 1; i < 29; i++) {
						day.innerHTML += '<option value="' + i + '">' + i + '</option>';
					}
				}
			}
		}
	}
	//备注
	var tarea = $id("tarea");
	var okNum = $id("okNum");
	var errNum = $id("errNum");
	var num = $id("num");
	var moreNum = $id("moreNum");
	var clear = $id("clear");
	tarea.onkeyup = function () {
		if (tarea.value.length <= 200) {
			num.innerHTML = 200 - tarea.value.length;
			okNum.style.display = "block";
			errNum.style.display = "none";
			clear.style.display = "none";
		}
		if (tarea.value.length > 200) {
			okNum.style.display = "none";
			errNum.style.display = "block";
			clear.style.display = "block";
			moreNum.innerHTML = tarea.value.length - 200;
		}
	}
	clear.onclick = function () {
		tarea.value = tarea.value.substring(0, 200);
		tarea.onkeydown();
	}
</script>
crazyFlex
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js表单注册验证
不吃鱼的猫
04-14 1476
简单的js登录 javascript代码 function checkname(){ na=form1.yourname.value; if( na.length 12) { divname.innerHTML='长度是1~12个字符'; }else
JS 注册表单验证
weixin_57156683的博客
07-27 912
JS 注册表单验证
JS注册表单验证
10-15
网上常见的用JS编写的注册表单验证的代码，非常实用哦
js注册表单验证
flynetcn的专栏
12-28 5844
      function IsDigit(cCheck)       {       return ((0 }            function IsAlpha(cCheck)       {       return (((a }                    function IsChinese(cCheck)     {   var re=/^[/u4E00
在网站开发中经常用到的javascript技术总结[2]
热门推荐
10-11 1万+
2 >表单提交验证类 2.1 表单项不能为空function CheckForm(){if (document.form.name.value.length == 0) {   alert("请输入您姓名!");   document.form.name.focus();   return false;}   return true;}-->2.2 比较两个表单项的值是否相同function Ch
JavaScript表单验证完美代码
10-20
在讲解JavaScript表单验证的完美代码之前，首先需要了解在前端开发中表单验证的重要性。表单验证是确保用户输入数据的正确性和完整性的重要手段，它能够防止无效或恶意的数据对后端服务器造成损害。JavaScript表单...
一个完美的js表单验证案例
10-21
"一个完美的js表单验证案例"利用JavaScript（特别是jQuery库）实现了这一功能，提供了高效、用户友好的验证机制。 JavaScript作为客户端脚本语言，可以直接在用户的浏览器上运行，这使得表单验证可以实时进行，减少...
利用layer实现表单完美验证的方法
10-16
本篇文章将详细讲解如何利用layer框架实现表单的完美验证。 layer是一个轻量级的JavaScript弹层插件，提供了丰富的对话框、提示等页面元素操作功能。它具有高度可定制性，易于使用，可以方便地与各种前端框架（如...
JavaScript通过正则表达式实现表单验证电话号码
10-26
本知识点主要讲述如何使用JavaScript通过正则表达式实现电话号码的表单验证。电话号码一般具有一定的格式，如：区号、号码、分隔符等，而正则表达式能够帮助我们准确地定义电话号码应该遵循的模式。 示例中提供的...
js正则表达式注册页面表单验证
10-21
主要为大家详细介绍了js正则表达式注册页面表单验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS-表单验证提交
DcTbnk的博客
04-02 233
<body> <!-- 表单提交 --> <form action="./01_复习.html"> 注册账号 : <input type="text" maxlength="16"> <span></span> <br> 注册密码 : <input type="...
js实现注册表单验证
zhangvalue的博客
09-10 5871
js实现注册表单验证 验证用户名必须为：要求6-20位，只能有大小写字母和数字，并且大小写字母和数字都要有 var name_re=/[0-9a-zA-Z]{3,8}/; var pwd_re=/^\S{6,20}$/; <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js实现注册表单验证</title> </head> <b
注册页面中的 JS 表单验证
疯魔coding君的博客
01-19 556
在大多数网站上都需要进行账号的注册，而如何使用户输入合法的账号注册信息，就需要用到 Javascript 来进行注册页面各项表单的动态验证。 使用如下 html 框架来进行注册页面的验证： <!--注册页面.html--> <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>注册页面</title> </h
注册表单js验证功能
PJ_boy的博客
06-13 431
代码如下 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> </head> <body> <style> #div1{ width:400px; border:1px solid black;
AngularJS 注册表单验证
人走丿茶凉
10-15 519
案例: 注册表单验证dui.gif： cuo.gif：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery.1.12.4.js"></script> <!--jquery样式--
js在表单提交时的验证
心有猛虎 细嗅蔷薇
10-09 324
第一种： 复制代码代码如下:          function check(form) {           if(form.userId.value=='') {                 alert("请输入用户帐号!");                 form.userId.focus();                 return fa
js表单验证注册
qq_44190259的博客
09-27 546
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言代码实现部分 前言 js表单验证是js里面较为基础的操作。 代码实现部分 代码如下： <!DOCTYPE html> <html > <head> <meta charset="utf-8"> <title>表单验证</title> <style type="text/css"> span{ color:red;
JS实现：注册页面表单验证
kuaixiao0217的博客
05-07 4162
JS实现注册页面表单验证
HTML5介绍：完美版资料、特点、新特性、趋势、优势
3. 表单改进：HTML5提供了一些新的表单元素和属性，如、等，使表单的创建和验证变得更加简单。它还提供了更好的表单样式和自定义选项功能。 4. Canvas绘图：HTML5引入了元素，可以通过JavaScript绘制图形和动画。它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值