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

Javascript 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
拖动时防止选中
Feb 03 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 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
You might like
织梦模板标记简介
2007/03/11 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
浅谈Python中的数据类型
2015/05/05 Python
python 字典(dict)按键和值排序
2016/06/28 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
C++是不是类型安全的
2014/02/18 面试题
毕业生求职的求职信
2013/12/05 职场文书
学生期末评语大全
2014/04/30 职场文书
专题组织生活会方案
2014/06/15 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
Python if else条件语句形式详解
2022/03/24 Python