绵阳梓潼网站制作公司

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

这篇文章主要介绍JS怎么使用正则表达式判断输入框失去焦点事件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

网站建设、做网站的开发，更需要了解用户，从用户角度来建设网站，获得较好的用户体验。成都创新互联公司多年互联网经验，见的多，沟通容易、能帮助客户提出的运营建议。作为成都一家网络公司，打造的就是网站建设产品直销的概念。选择成都创新互联公司，不只是建站，我们把建站作为产品，不断的更新、完善，让每位来访用户感受到浩方产品的价值服务。

效果图

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

项目的正则表达式规则

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

项目目录

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

html代码

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



	
		
		
		
		
	
	
		
			
				
					
正则表达式
用户名
密码 确认密码 邮箱 手机号 身份证号 地址 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("输入错误"); } }

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";
	}
	
}

以上是“JS怎么使用正则表达式判断输入框失去焦点事件”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


名称栏目：JS怎么使用正则表达式判断输入框失去焦点事件
路径分享：http://myzitong.com/article/gjhshg.html

其他资讯