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 相关文章推荐
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
jquery实现图片轮播器
May 23 jQuery
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
小程序实现搜索框
Jun 19 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
JavaScript 异步时序问题
Nov 20 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
PHP 第三节 变量介绍
2012/04/28 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
Position属性之relative用法
2015/12/14 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
django 将model转换为字典的方法示例
2018/10/16 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python中的插入排序的简单用法
2021/01/19 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
电大学习个人自我评价范文
2013/10/04 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
老公保证书范文
2014/04/29 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
支行行长竞聘报告
2014/11/06 职场文书
如何写好闭幕词
2019/04/02 职场文书