首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS使用正则表达式判断输入框失去焦点事件

Posted in Javascript onOctober 16, 2019

效果图

JS使用正则表达式判断输入框失去焦点事件

项目的正则表达式规则

1:用户名: 大写字母开头 6-20位字符(不允许有符号但是允许有_)
2:密码 大写开头 数字字母符号混合 8-15位
3:确认密码 大写开头 数字字母符号混合 8-15位
4:邮箱 邮箱格式
5:手机号 手机号格式
6:身份证号 身份证号格式
7:地址 中文开头 数字 - 字母 中文混合

项目目录

JS使用正则表达式判断输入框失去焦点事件

html代码

由于无法上传bootstrap.min.css
需要样式的需要前往官网下载
bootstrap中文网

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="js/reg.js"></script>
	</head>
	<body>
		<form class="form-horizontal col-md-offset-3" role="form">
			<div class="form-group">
				<div class="col-md-offset-3">
					<h2>正则表达式</h2>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">用户名</label>
				<div class="col-lg-3">
					<input class="form-control" id="UserName" name="UserName" type="text" onfocusout="verify(UserName)">
				</div>
				<span id="UserNames" style="font-size: 16pt;"></span>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">密码</label>
				<div class="col-lg-3">
					<input class="form-control" id="pwd" name="pwd" type="text" onfocusout="verify(pwd)">
				</div>
				<span id="pwds" style="font-size: 16pt;"></span>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">确认密码</label>
				<div class="col-lg-3">
					<input class="form-control" id="affirmPwd" name="affirmPwd" type="text" onfocusout="verify(affirmPwd)">
				</div>
				<span id="affirmPwds" style="font-size: 16pt;"></span>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">邮箱</label>
				<div class="col-lg-3">
					<input class="form-control" type="text" id="email" name="email" onfocusout="verify(email)">
				</div>
				<span id="emails" style="font-size: 16pt;"></span>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">手机号</label>
				<div class="col-lg-3">
					<input class="form-control" type="text" id="cellPhone" name="cellPhone" onfocusout="verify(cellPhone)">
				</div>
				<span id="cellPhones" style="font-size: 16pt;"></span>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">身份证号</label>
				<div class="col-lg-3">
					<input class="form-control" id="identityCard" name="identityCard" type="text" onfocusout="verify(identityCard)">
				</div>
				<span id="identityCards" style="font-size: 16pt;"></span>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">地址</label>
				<div class="col-lg-3">
					<input class="form-control" id="site" name="site" type="text" onfocusout="verify(site)">
				</div>
				<span id="sites" style="font-size: 16pt;"></span>
			</div>
			<div class="form-group">
				<div class="col-lg-3 col-md-offset-3">
					<input type="button" class="btn btn-primary btn-lg" value="校验" onclick="OnClick()">
				</div>
			</div>
		</form>
		<script type="text/javascript">
			
			var ID = "";
			function verify(ID) {
			//设置一个ID用来传参
				switch (ID) {
				//根据传过来的input的"ID"判断进行不同的正则表达式验证
					//用户名验证
					case UserName:
						//用户名的正则表达式
						var UserNameRule = /^[A-Z][a-zA-Z0-9_]{6,20}$/;
						//调用下面的编写的js方法,传入input的id和正则表达式
						reg("UserName", UserNameRule);
						break;

					case pwd:
						//密码验证
						var pwdRule = /^[A-Z][a-zA-Z0-9_]{8,15}$/;
						reg("pwd", pwdRule);
						break;

					case affirmPwd:
						//密码确认验证
						var affirmPwdRule = /^[A-Z][a-zA-Z0-9_]{8,15}$/;
						reg("affirmPwd", affirmPwdRule);
						break;

					case email:
						//邮箱验证
						var emailRule = /^[A-z0-9]+@[a-z0-9]+.com$/;
						reg("email", emailRule);
						break;

					case cellPhone:
						// 手机号验证
						var cellPhoneRule = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
						reg("cellPhone", cellPhoneRule);
						break;

					case identityCard:
						//身份证号验证
						var identityCardRule = /^([1-9]){1}[0-9]{17}|[1-9]{1}[0-9]{16}(x|X)?$/;
						reg("identityCard", identityCardRule);
						break;

					case site:
						//地址验证
						var siteRule = /^[\u4e00-\u9fa5]+[\u4E00-\u9FA5A-Za-z0-9_]+$/;
						reg("site", siteRule);
						break;
					//设置特殊情况
					default:
						alert("操作错误！请关闭网页")
						break;
				}
			}
			//提交验证判断是否都符合正则表达式
			function OnClick(){			
			//获取所有的span标签
				var a = document.getElementsByTagName("span");
				var str = "";		
			//循环获取span的内容
				for (var i = 0; i < a.length; i++) {		
					str+=a[i].innerText;				
				}	
				if(str == "√√√√√√√"){
					alert("输入正确");
				}else{
					alert("输入错误");
				}
			}		
		</script>
	</body>
</html>

js代码

//输入框的校验
/**输入框的校验 消息显示区域的ID 必须按照eleId+"s"
 * @param {Object} eleId
 * @param {Object} rule
 */

function reg(eleId,rule){
	
	//动态的添加一个消息显示标签
	var inputValue = document.getElementById(eleId).value;
	var result = rule.test(inputValue.trim());
	if(result && inputValue != ""){
		document.getElementById(eleId+"s").innerHTML="√";
		document.getElementById(eleId+"s").style.color="green";
	}else{
		document.getElementById(eleId+"s").innerHTML="×";
		document.getElementById(eleId+"s").style.color="red";
	}
	
}

补充说明

我目前使用的开发工具是 HBuilder X
代码风格偏向于bootstrap前端框架

有喜欢的朋友可以点击下方链接了解

Hbuilder官网

bootstrap中文网

如果需要我的样式请导入bootstrap.min.css

总结

以上所述是小编给大家介绍的JS使用正则表达式判断输入框失去焦点事件,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

JS使用正则表达式判断输入框失去焦点事件

- Author -

白鸽探长

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
vue-star评星组件开发实例
Mar 01 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 #Javascript
JS回调函数深入理解
Oct 16 #Javascript
JS页面获取 session 值，作用域和闭包学习笔记
Oct 16 #Javascript
js实现图片跟随鼠标移动效果
Oct 16 #Javascript
vue实现鼠标经过动画
Oct 16 #Javascript
javascript实现动态时钟的启动和停止
Jul 29 #Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 #Javascript
全表扫描(1) sql模式(1) 逻辑备份(1) 轮询锁(1) into outfile(1) 异步机制(1) 索引树扫描(1) 远程连接(2) springCloud(6) 限流器(1)
You might like
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
node 版本切换的实现
2020/02/02 Javascript
python网络编程之文件下载实例分析
2015/05/20 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Django返回json数据用法示例
2016/09/18 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
python开发入门——set的使用
2020/09/03 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
物业管理应届生求职信
2013/10/28 职场文书
上学迟到的检讨书
2014/01/11 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android