首页
所有分类
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 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
理解javascript回调函数
Dec 28 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
AngularJS转换响应内容
Jan 27 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 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
SeaTable(1) MutationObserver(1) tree shaking(1) GPU(1) OOP(1) kubernetes(1) Three.js(1) 条形码(1) 分布式追踪(1) HBuilder(1)
You might like
php 安全过滤函数代码
2011/05/07 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
js实现贪吃蛇小游戏（容易理解）
2017/01/22 Javascript
SVG描边动画
2017/02/23 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
JS实现按钮颜色切换效果
2020/09/05 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
树莓派采用socket方式文件传输（python）
2019/06/22 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
高中运动会入场词
2014/02/14 职场文书
建筑安全标语
2014/06/07 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
法律意见书范文
2015/05/20 职场文书