翻译

项目的正则表达式规则

1:用户名：大写字母的首6-20个字符(不允许使用符号，但允许使用_个)2:密码大写首字母混合8-15位数字3:确认密码大写首字母混合8-15位数字4:邮箱格式53360手机号码格式63360身份证号码格式73360地址中文首字母数字-字母中文混合

项目目录

Html代码

因为无法上传bootstrap.min.css，需要去官网下载bootstrap中文网站。

！DOCTYPE html html heartheta charset=' utf-8 ' title/title link rel='样式表href=' CSS/bootstrap。量滴CSS '/script src=' http : js/reg。js '/script/head dyform class=' form-水平col-md-offset-3 '角色=' form ' div class=' form-group ' div class=' col-MD-offset-3 ' H2正则表达式/H2/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=' pwd ' 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=' affirmPwd ' 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=' CEll ' name=' CEll ' onfocusout=' verify(CEll)'/div span id=' CEll PHONES ' 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=' identity card ' name=' identity card ' type=' text ' onfocusout=' verify(identity card)'/div span id=' identity card ' 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 class=' form-group ' div class=' col-LG-3 col-MD-offset-3 '输入类型=' button ' class=' BTN BTN-初选BTN-LG ' value='校验OnClick=' OnClick()'/div/div/formscript type=' text/JavaScript ' var ID=' '；函数验证(ID) {//设置一个身份用来传参开关（标识){//根据传过来的投入的'身份证'判断进行不同的正则表达式验证//用户名验证案例用户名：//用户名的正则表达式var usernamerule=/^[a-z][a-za-z0-9_]{6,20}$/；//调用下面的编写的射流研究…方法，传入投入的编号和正则表达式reg('UserName '，UserNameRule)；打破；案例pwd://密码验证var pwdrule=/^[a-z][a-za-z0-9_]{8,15}$/；reg('pwd '，pwdRule)；打破；案件affirmPwd://密码确认验证var affirmpwdrule=/^[a-z][a-za-z0-9_]{8,15}$/；reg('affirmPwd '，affirmPwdRule)；打破；案例email://邮箱验证var电子邮件规则=/^[a-z0-9][emailprotected][a-z0-9]。com $/；reg('email '，电子邮件规则)；打破；案例手机：//手机号验证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('手机，CellPhoneRule)；打破；案例标识卡：//身份证号验证var身份证规则=/^([1-9]){1}[0-9]{17}|[1-9]{1}[0-9]{16}(x|x)？$/;reg('identityCard '，身份证规则)；打破；case site://地址验证var站点规则=/^[u4e00-u9fa5][ u4e 00- u9 fa 5a-za-z0-9 _]$/；reg('site '，SiteRule)；打破；//设置特殊情况default:alert('操作错误！请关闭网页)中断；}}//提交验证判断是否都符合正则表达式函数OnClick(){//获取所有的跨度标签var a=文档。getelementsbytagname(' span ')；var str=//循环获取跨度的内容for(var I=0；一。长度；i ) {str=a[i].inner text } if(str='){ alert('输入正确');}else{alert('输入错误');} }/脚本/正文/htmljs代码

//输入框验证/* *输入框验证消息显示区的ID必须动态添加消息显示标签var input value=document . getelementbyid(eleid)。根据eleid ' * @ param { object } eleid * @ param { object }规则*/functionreg (eleid，rule){//；var result=rule . test(inputvalue . trim())；if(结果输入值！=' '){ 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代码风格

喜欢的朋友可以点击下面的链接了解一下

Hbuilder官方网站

自举中文网

如果你需要我的风格，请导入bootstrap.min.css

摘要

以上是边肖介绍的JS，用正则表达式来判断输入框失焦的事件。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！