JavaScript表单验证——检验字符长度，错误次数限制锁定注册和解锁

最新推荐文章于 2021-09-24 11:06:19 发布
最新推荐文章于 2021-09-24 11:06:19 发布
阅读量896 收藏 8
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Milan__Kundera/article/details/81836459
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<form action="" method="post" onsubmit="return eg.regCheck()">
			<input type="hidden" id="errnum" value="0" /> 账户:
			<input type="text" id="name" /><br /><br /> 密码:
			<input type="password" id="pwd_a" /><br /><br /> 确认:
			<input type="password" id="pwd_b" /><br /><br /> 性别:
			<input type="radio" name="sex" value="1" checked="checked" />男
			<input type="radio" name="sex" value="0" />女<br /><br /> 年龄:
			<select id="age">
				<option value="0" selected="selected">请选择年龄段</option>
				<option value="1">18岁以下</option>
				<option value="2">18-30岁</option>
				<option value="3">30-40岁</option>
				<option value="4">40-50岁</option>
				<option value="5">50以上</option>
			</select><br /><br /> 爱好:
			<input type="checkbox" name="like" class="like" value="1" />逛街
			<input type="checkbox" name="like" class="like" value="2" />看电影
			<input type="checkbox" name="like" class="like" value="3" />运动
			<input type="checkbox" name="like" class="like" value="4" />听音乐
			<input type="checkbox" name="like" class="like" value="5" />其他<br /><br /> 简介:
			<textarea rows="4" cols="18" id="about"></textarea><br /><br />
			<input type="submit" id="regBtn" value="注册" />
			<input type="button" style="display: none;" id="regUnlock" value="解锁" onclick="eg.unlock()" />
		</form>

		<script>
			//声明一个对象
			var eg = {};

			//定义一个公共函数获取指定id
			eg.$ = function(id) {
				return document.getElementById(id);
			};

			//主要验证方法
			eg.regCheck = function() {
				var name = eg.$('name');
				var pwd_a = eg.$('pwd_a');
				var pwd_b = eg.$('pwd_b');
				var about = eg.$('about');
				var age = eg.$('age');
				var likes = document.getElementsByClassName('like');
				var likenum = 0;
				for(var n = 0; n < likes.length; n++) {
					if(likes[n].checked) {
						likenum++;
					}
				}

				if(name.value == '') {
					alert('账户不能为空');
					eg.err(); //记录错误次数
					return false;
				}
				if(pwd_a.value == '') {
					alert('密码不能为空');
					eg.err();
					return false;
				}
				if(pwd_a.value !== pwd_b.value) {
					alert('两次密码不一致');
					eg.err();
					return false;
				}
				if(age.value == '0') {
					alert('请选择年龄');
					eg.err();
					return false;
				}
				if(about.value.length > 10) {
					alert('简介字段过长');
					eg.err();
					return false;
				}
				if(likenum == 0) {
					alert('请选择一个爱好');
					eg.err();
					return false;
				}
				return true; //返回true时表单提交
			};

			//出错时记录错误次数
			eg.err = function() {
				var errs = eg.$('errnum');
				var num = errs.value;
				//将字符串转换为整数+1，并保存
				errs.value = parseInt(num) + 1;
				//判断锁定
				eg.lock();
			};

			//通过次数判断是否锁定
			eg.lock = function() {
				var errnum = eg.$('errnum');
				if(parseInt(errnum.value) > 2) {
					//输错3次锁定
					eg.$('regBtn').disabled = true;
					//显示解锁按钮
					eg.$('regUnlock').style.display = 'block';
				}
			}

			//解锁
			eg.unlock = function() {
				eg.$('regBtn').disabled = false;
				eg.$('regUnlock').style.display = 'none';
			}
		</script>
	</body>

</html>

 

Bruce_Json
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html表单判断非法字符,表单提交合法性检测
weixin_39879219的博客
06-18 699
12.1.4 表单递交的合法性检测在某些网站注册时，要求用户输入一定长度的用户名、密码和E-mail等。网站对用户名长度的检测和E-mail格式的检测就属于表单递交的合法性检测的范围。表单递交的合法性检测还包括输入信息是否包含某些字符、是否全是数字、是否全是字母等。下面定义了几个合法性检测的过程。不允许包含指定字符的检测：Function Validate(str) ...
JS表单验证
weixin_42243479的博客
09-21 113
JS表单验证-12个常用的JS表单验证    项目完结后的这段时间把常用的JS表单验证demo整理了一下，和大家一起分享~~~ 1. 长度限制 <p>1. 长度限制</p><form name=a οnsubmit="return test()"> <textarea na...
js限制用户输入（一）
encircles的博客
09-22 1180
{literal} JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) 2.只能输入数字,能输小数点. 3.数字和小数点方法二 <input type=text onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_val
JS表单验证-12个常用的JS表单验证
weixin_30853329的博客
10-18 98
JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证，小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下，和大家一起分享~~~ 1. 长度限制 <p>1. 长度限制</p><form name=a onsubmit="return test()"> <textarea name="b" cols=...
js—密码输入错误上限，倒计时禁止登录
weixin_47211345的博客
09-24 2140
登录按钮部分（禁用登录的倒计时写在这） v-on:keyup.13.native是回车键登录,响应的判断字段是写在data中的，判断的方法 <el-button v-show="disabled" disabled type="primary" :loading="loadingbtn" @click="submitForm('ruleForm')" v-on:keyup.13.native="submit">请{{timeOut}}秒后重新登录</el-button> <
用js检测表单中输入字符的长度
feilong_12的专栏
02-28 6026
总共思路可分为2部分。 1、获取表单中输入的字符 2、计算获取字符的长度 3、分析超过100个长度的给出提示。 function a(){ var hd=document.getElementById('zf').value; var cot=hd.length; if(cot>100){ document.getElementById('le').in
提交表单前判断字符长度
智在居士草堂
01-28 2171
Oracle的varchar2最多保存4000个字节的字符，我们也不想要更多的内容来保存信息。因此，在上传文字的时候，需要对textarea进行判断。这里唯一的难点是中文字符和其它字符混合存在使得判断问题。这是个js判断的函数，来解决上述问题：function updateone(atype){var s=document.postForm.content.value;var n=0;for (i
JavaScript程序设计——页面设置与表单验证实验报告.docx
11-11
实现HTML界面设计、布局的方法。 实现各种控件的使用方法。 实现对界面项目进行表单验证的方法。 实现表单标记，表单提交方式、编码方式等知识点。
Javascript的表单验证长度
10-22
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。通过本文给大家介绍Javascript的表单验证长度，需要的朋友参考下吧
使用js验证填写的字符是否符合长度
03-31
只是一个小小的实例，希望可以给各位朋友带来帮助。
使用原生javascript创建通用表单验证——更锋利的使用dom对象
12-11
首先看下效果，没什么特别，呵呵！ 调用的代码呢，则是相当简单，不需要创建其他的Label或者span标签，脚本将自动生成： 代码如下: <input type=”text” id=”txt1″ onkeyup=”checkResult(this.value == ”, ...
javascript表单验证和Window详解
12-11
一、表单验证form 1、创建一个新的表单： 代码如下: <form id=”id是唯一的，不可重复” name=“可重复”，method=”post/get”,action=”目标或地址，负责处理的服务端，将文本等传输到什么地方”> //方法1...
经典代码总结-限制登陆次数
醉挽~清风
08-23 560
js动态显示当前时间
Bruce_Json的博客
03-22 4967
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> function showTime() { nowtime = new Date(); ...
javascript获取选中单选按钮radio的值
Bruce_Json的博客
08-15 2466
&lt;th&gt;性别:&lt;/th&gt; &lt;td&gt; &lt;input type="radio" id="male" value="男" name="gender"/&gt;男 &lt;input type="radio" id="female" value="女"
JavaScript图片廊——实现点击小图片栏显示大图
Bruce_Json的博客
09-03 2016
 显示小图列表的方法是eg.showThumb(),单击小图要显示大图，需要调用eg.showBig()方法，只有单击小图片时候响应单击事件才行，所以需要用eg.addListenner()方法实现，这个方法是一个跨浏览器绑定事件函数 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click"...
h5软键盘弹出顶起页面布局问题解决
Bruce_Json的博客
07-02 1791
窗口改变时设置定位属性，窗口再次改变回来的时候要把定位属性去掉，否则 <script> var oHeight = $(document).height(); $(window).resize(function(){ if($(document).height() < oHeight){ $('#footer').css("position","static"); }else{ $('#fo
js截取字符串中汉字
Bruce_Json的博客
10-29 1679
var tutor_name = $.trim(n.text); var reg = /[\u4e00-\u9fa5]/g; var names = tutor_name.match(reg); //截取汉字 console.log(names); console.log(names.join("")) 结果如下 ：
JavaScript表单验证——为表单添加验证和绑定验证的两种方式
Bruce_Json的博客
08-16 1317
绑定验证第一种方式 &lt;form method="post"&gt; 账户: &lt;input type="text" id="name"/&gt;&lt;br /&gt;&lt;br /&gt; 密码: &lt;input type="password" id="pwd_a" /&gt;&
javascript知识训练——字符串对象
最新发布
06-28
字符串对象可以包含任何字符，包括字母、数字、符号和空格等。在JavaScript中，字符串对象是不可变的，也就是说一旦创建就不能修改。但是可以通过一些方法来操作字符串对象，如拼接、截取、替换等。常见的字符串方法...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值