首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript使用正则表达式实现注册登入校验

Posted in Javascript onSeptember 23, 2020

本文实例为大家分享了用正则表达式的方式实现注册登入的校验，供大家参考，具体内容如下

表单验证：

1、用户名：6?18位数字,字母,下划线_，文本域获取焦点和失去焦点出现提示文字。
2、登入密码：请输入6?20位数字,字母,任意字符，文本域获取焦点和失去焦点出现提示文字。（效果同上）
3、确认密码：内容与登入密码必须一致。
4、姓名：2-5位中文字。
5、身份证号：开头为1234568，中间16位为数字，结尾为数字或Xx。
6、邮箱：常规验证如下
7、手机号：为1开头是11位数字
8、提交是验证为一项是否填写正确，并弹框提示。
确认已阅读选项是否选中，并弹框提示。

页面效果：

1、提交是验证为一项是否填写正确，并弹框提示。
2、确认已阅读选项是否选中，并弹框提示。

javascript使用正则表达式实现注册登入校验

源代码：html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>用户登入界面</title>
 <link rel="stylesheet" type="text/css" href="demo.css" >
 <script type="text/javascript" src="demo.js"></script>
</head>
<body>
 <form id="forms" method="post" action="#">
 <!-- 头部 -->
 <header>--账户信息--</header>
 <!-- 内容 -->
 <section>
 <div>
 <label>用户名：</label>
 <input type="text" id="userName" name="userName" placeholder="用户设置成功后不可修改" />
 <span></span>
 <p></p>
 </div>
 <div>
 <label>登陆密码：</label>
 <input type="password" id="password" placeholder="6-20位字母，数字或符号"/>
 <span></span>
 <p></p>
 </div>
 <div>
 <label>确认密码：</label>
 <input type="password" id="passwordTwos" placeholder="请再次输入密码"/>
 <span></span>
 <p></p>
 </div>
 <div>
 <label>姓名：</label>
 <input type="text" id="theName" placeholder="请输入姓名，中文且最多五位" />
 <span></span>
 <p></p>
 </div>
 <div>
 <label>身份证号：</label>
 <input type="text" id="identity" placeholder="请输入身份证号" />
 <span></span>
 <p></p>
 </div>
 <div>
 <label>邮箱：</label>
 <input type="email" id="mailbox" placeholder="请输入正确邮箱格式" />
 <span></span>
 <p></p>
 </div>
 <div>
 <label>手机号码:</label>
 <input type="text" id="phone" placeholder="请输入手机号码" />
 <span></span>
 <p></p>
 </div>
 </section>
 <!-- 结尾 -->
 <footer>
 <hr/>
 <input id="choose" type="checkbox"/>
 <label for="choose">我已阅读并同意遵守规定</label>
 <input class="btn" type="submit" value="确认提交"/>
 </footer>
 </form>
</body>
</html>

css

*{
 margin: 0;
 padding: 0;
}
/*内外边距*/
body{
 background-color: #f2f2f2;
}
/*背景颜色*/
form{
 width: 1200px;
 margin: 50px auto;
 border-radius: 10px;
 background-color: #fff;
 box-shadow: 0px 0px 5px 5px #ccc;
}
/*宽，外边距；削圆；背景颜色；盒子阴影*/
header{
 width: 1200px;
 height: 50px;
 background-color: #7B68EE;
 border-radius: 10px 10px 0 0;
 color: #fff;
 font-size: 20px;
 line-height: 50px;
 text-align: center;
 font-weight: bold;
 letter-spacing: 10px;
}
/*宽，高，背景颜色，削圆，字体颜色，大小；行高；文本居中，加粗，字符间距*/
div{
 height: 120px;
 width: 1200px;
 margin-left: 50px;
 position: relative;
}
/*高，宽，左边距，相对定位*/
div>label{
 font-weight: bold;
 font-size: 18px;
 position: absolute;
 top: 50px;
}
/*加粗，字体大小，绝对定位，上*/
div>label::before{
 content: '* ';
 color: #00f;
}
/*在前面添加文本，字体颜色*/
div>input{
 width: 595px;
 height: 40px;
 position: absolute;
 right: 420px;
 top: 40px;
 border-radius: 5px;
 border: 1px solid #ccc;
 padding-left: 5px;
}
/*宽；高；绝对定位；右；上；削圆；边框；内边距*/
div>input:focus{
 outline: none;
 box-shadow: 0px 0px 8px 3px #7B68EE;
 transition-duration: 0.5s;
}
/*清除激活后的边框；盒子阴影；过度事件0.5s；*/
div>p{
 width: 60%;
 height: 30px;
 border-bottom: .5px solid #7B68EE;
 line-height: 30px;
 padding-left: 15px;
 position: absolute;
 font-size: 14px;
 top: 86px;
}
/*宽；高；下边框；行高；内边距；绝对定位，上；字体大小*/
div>span{
 position: absolute;
 left: 790px;
 line-height: 120px;
}
/*绝对定位，左，行高*/
footer{
 margin-top: 20px;
 height: 50px;
 text-align: center;
 line-height: 50px;
}
/*上边距；高；文本居中；行高*/
footer>label{
 margin: 0 10px;
 cursor:pointer;
}
/*外边距；小手*/
footer>.btn{
 width: 120px;
 height: 30px;
 background-color: #6495ED; 
 border-radius: 5px;
 border: none;
 color: #fff;
 font-size: 14px;
 cursor:pointer;
}
/*宽；高；背景颜色；削圆；边框；字体颜色；大小；小手*/

js

window.onload = function(){

 var btn = document.getElementById('btn');//提交按钮
 var p = document.getElementsByTagName('p');//文字提示标签数组
 var span = document.getElementsByTagName('span');//文字提示标签数组
 var forms = document.getElementById('forms');//表单
 var choose = document.getElementById('choose');//选择框
 var userName = document.getElementById('userName');//用户名
 var password = document.getElementById('password');//密码
 var passwordTwos = document.getElementById('passwordTwos');//确认密码
 var theName = document.getElementById('theName');//姓名
 var identity = document.getElementById('identity');//身份证号
 var mailbox = document.getElementById('mailbox');//邮箱
 var phone = document.getElementById('phone');//电话号码

 //正则表达式
 var reg1 = /^[\w]{6,18}$/,//用户名 6--18位数字,字母,下划线_
 reg2 = /^[\W\da-zA-Z_]{6,20}$/,//密码 6--20位数字,字母,任意字符
 reg3 = /^[\u4e00-\u9fa5]{2,5}$/,//姓名 2-5为的汉子
 reg4 = /^[1234568][\d]{16}[\dxX]$/,
 //身份证号 第一个数字1234568，中间任意数字16位，结尾任意数字或者xX；
 reg5 = /^[a-z1-9](?:\w|\-)+@[a-z\d]+\.[a-z]{2,4}$/i,
 //邮箱 以字母或者数字1-9开头+(任意个数字字母下划线\-)+@+(任意字母数字)+.+(2-4个字母)
 reg6 = /^[1][\d]{10}$/;//手机号 首个数字为1，后面10为任意数字

 //校验
 var n1 = false,
 n2 = false,
 n3 = false,
 n4 = false,
 n5 = false,
 n6 = false,
 n7 = false;

 //用户名获得焦点时
 userName.onfocus = function(){
 span[0].innerHTML = '请输入6--18位数字,字母,下划线_';
 span[0].style.color = 'green';
 }
 //用户名离开焦点时
 userName.onblur = function(){
 if(this.value == ''){
 span[0].innerHTML = '用户名不能为空！';
 span[0].style.color = 'red';
 } else if(!reg1.test(this.value)){
 span[0].innerHTML = '请输入6--18位数字,字母,下划线_';
 span[0].style.color = 'red';
 } else {
 span[0].innerHTML = '格式正确!';
 span[0].style.color = 'green';
 return n1 = true;
 }
 }

 //密码获得焦点时
 password.onfocus = function(){
 span[1].innerHTML = '请输入6--20位数字,字母,任意字符';
 span[1].style.color = 'green';
 }
 //密码离开焦点时
 password.onblur = function(){
 if(this.value == ''){
 span[1].innerHTML = '密码不能为空！';
 span[1].style.color = 'red';
 } else if(!reg2.test(this.value)){
 span[1].innerHTML = '请输入6--20位数字,字母,任意字符';
 span[1].style.color = 'red';
 } else {
 span[1].innerHTML = '格式正确!';
 span[1].style.color = 'green';
 return n2 = true;
 }
 }

 //确认密码获得焦点时
 passwordTwos.onfocus = function(){
 span[2].innerHTML = '请确认两次密码一致';
 span[2].style.color = 'green';
 }
 //确认密码离开焦点时
 passwordTwos.onblur = function(){
 if(this.value == ''){
 span[2].innerHTML = '确认密码不能为空！';
 span[2].style.color = 'red';
 } else if(this.value != password.value){
 span[2].innerHTML = '两次密码不相同';
 span[2].style.color = 'red';
 } else {
 span[2].innerHTML = '确认密码正确!';
 span[2].style.color = 'green';
 return n3 = true;
 }
 }

 //姓名获得焦点时
 theName.onfocus = function(){
 span[3].innerHTML = '请输入中文姓名';
 span[3].style.color = 'green';
 }
 //姓名离开焦点时
 theName.onblur = function(){
 if(this.value == ''){
 span[3].innerHTML = '姓名不能为空';
 span[3].style.color = 'red';
 } else if(!reg3.test(this.value)){
 span[3].innerHTML = '请输入正确的中文姓名';
 span[3].style.color = 'red';
 } else {
 span[3].innerHTML = '姓名正确！';
 span[3].style.color = 'green';
 return n4 = true;
 }
 }

 //身份证号获得焦点时
 identity.onfocus = function(){
 span[4].innerHTML = '请输入您的身份证号';
 span[4].style.color = 'green';
 }
 //身份证号离开焦点时
 identity.onblur = function(){
 if(this.value == ''){
 span[4].innerHTML = '身份证号不能为空';
 span[4].style.color = 'red';
 } else if(!reg4.test(this.value)){
 span[4].innerHTML = '身份证号格式不对';
 span[4].style.color = 'red';
 } else {
 span[4].innerHTML = '身份证正确！';
 span[4].style.color = 'green';
 return n5 = true;
 }
 }

 //邮箱获得焦点时
 mailbox.onfocus = function(){
 span[5].innerHTML = '请输入您的邮箱';
 span[5].style.color = 'green';
 }
 //邮箱离开焦点时
 mailbox.onblur = function(){
 if(this.value == ''){
 span[5].innerHTML = '邮箱不能为空';
 span[5].style.color = 'red';
 } else if(!reg5.test(this.value)){
 span[5].innerHTML = '邮箱格式不对';
 span[5].style.color = 'red';
 } else {
 span[5].innerHTML = '邮箱正确！';
 span[5].style.color = 'green';
 return n6 = true;
 }
 }


 //手机号获得焦点时
 phone.onfocus = function(){
 span[6].innerHTML = '请输入您的手机号';
 span[6].style.color = 'green';
 }
 //手机号离开焦点时
 phone.onblur = function(){
 if(this.value == ''){
 span[6].innerHTML = '手机号不能为空';
 span[6].style.color = 'red';
 } else if(!reg6.test(this.value)){
 span[6].innerHTML = '手机号格式不对';
 span[6].style.color = 'red'; 
 } else {
 span[6].innerHTML = '手机号正确！';
 span[6].style.color = 'green';
 return n7 = true;
 }
 }

 //提交按钮
 forms.onsubmit = function(){
 //正则表达式判断
 // var regs = !reg1.test(userName.value)||!reg2.test(password.value)||password.value != passwordTwos.value||!reg3.test(theName.value)||!reg4.test(identity.value)||!reg5.test(mailbox.value)||!reg6.test(phone.value);
 //变量判断
 var regs = n1==false||n2==false||n3==false||n4==false||n5==false||n6==false||n7==false;
 console.log(regs);
 if(!regs == false){
 alert('您 填 写 的 信 息 有 误 !');
 return false;
 } else if(choose.checked == false){
 alert('请 先 点 击 确 认 已 阅 读 按 钮 ！');
 return false;
 } else {
 alert('登 记 成 功 ！');
 window.open("http://www.baidu.com");
 return true;
 }
 }
 

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

javascript使用正则表达式实现注册登入校验

- Author -

于珂琛。

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 #Javascript
Vue3为什么这么快
Sep 23 #Javascript
Angular短信模板校验代码
Sep 23 #Javascript
JavaScript实现单点登录的示例
Sep 23 #Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 #Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 #Javascript
js实现三角形粒子运动
Sep 22 #Javascript
请假条(31) 决心书(42) 寄语(276) 责任书(145) 感谢信(72) 制度(225) 倡议书(159) 评语(336) 保证书(97) 活动总结(790)
You might like
用php实现选择排序的解决方法
2013/05/04 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
php之readdir函数用法实例
2014/11/13 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
jquery获取节点名称
2015/04/26 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
python生成式的send()方法(详解)
2017/05/08 Python
Python实现的密码强度检测器示例
2017/08/23 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
意大利专业化妆品品牌：KIKO MILANO
2017/02/01 全球购物
马来西亚网上花店：FlowerAdvisor马来西亚
2020/01/03 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
商务英语本科生的自我评价分享
2013/11/15 职场文书
毕业自我评价范文
2013/11/17 职场文书
庆八一活动方案
2014/01/25 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
教师评语大全
2014/04/28 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
教师工作表现评语
2014/12/31 职场文书