javascript使⽤正则表达式实现注册登⼊校验本⽂实例为⼤家分享了⽤正则表达式的⽅式实现注册登⼊的校验，供⼤家参考，具体内容如下
表单验证：
1、⽤户名：6–18位数字，字母，下划线_，⽂本域获取焦点和失去焦点出现提⽰⽂字。
2、登⼊密码：请输⼊6–20位数字，字母，任意字符，⽂本域获取焦点和失去焦点出现提⽰⽂字。（效果同上）
3、确认密码：内容与登⼊密码必须⼀致。
4、姓名：2-5位中⽂字。
5、⾝份证号：开头为1234568，中间16位为数字，结尾为数字或Xx。
6、邮箱：常规验证如下
7、⼿机号：为1开头是11位数字
8、提交是验证为⼀项是否填写正确，并弹框提⽰。
确认已阅读选项是否选中，并弹框提⽰。
页⾯效果：
1、提交是验证为⼀项是否填写正确，并弹框提⽰。
2、确认已阅读选项是否选中，并弹框提⽰。
源代码：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;
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
var btn = ElementById('btn');//提交按钮
var p = ElementsByTagName('p');//⽂字提⽰标签数组
var span = ElementsByTagName('span');//⽂字提⽰标签数组
var forms = ElementById('forms');//表单
var choose = ElementById('choose');//选择框
var userName = ElementById('userName');//⽤户名
var password = ElementById('password');//密码
var passwordTwos = ElementById('passwordTwos');//确认密码
var theName = ElementById('theName');//姓名
var identity = ElementById('identity');//⾝份证号
var mailbox = ElementById('mailbox');//邮箱
var phone = ElementById('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;
//⽤户名获得焦点时
span[0].innerHTML = '请输⼊6--18位数字，字母，下划线_';
span[0].lor = 'green';
}
//⽤户名离开焦点时
if(this.value == ''){
span[0].innerHTML = '⽤户名不能为空！';
span[0].lor = 'red';
} else if(!st(this.value)){
span[0].innerHTML = '请输⼊6--18位数字，字母，下划线_';
span[0].lor = 'red';
} else {
span[0].innerHTML = '格式正确!';
span[0].lor = 'green';
return n1 = true;
}
}
//密码获得焦点时
span[1].innerHTML = '请输⼊6--20位数字，字母，任意字符';
span[1].lor = 'green';
}
//密码离开焦点时
if(this.value == ''){
span[1].innerHTML = '密码不能为空！';
span[1].lor = 'red';
} else if(!st(this.value)){
span[1].innerHTML = '请输⼊6--20位数字，字母，任意字符';
span[1].lor = 'red';
} else {
span[1].innerHTML = '格式正确!';
span[1].lor = 'green';
return n2 = true;
}
}
//确认密码获得焦点时
span[2].innerHTML = '请确认两次密码⼀致';
span[2].lor = 'green';
}
//确认密码离开焦点时
span[2].innerHTML = '确认密码不能为空！';
span[2].lor = 'red';
} else if(this.value != password.value){
span[2].innerHTML = '两次密码不相同';
span[2].lor = 'red';
} else {
span[2].innerHTML = '确认密码正确!';
span[2].lor = 'green';
return n3 = true;
}
}
//姓名获得焦点时
span[3].innerHTML = '请输⼊中⽂姓名';
span[3].lor = 'green';
}
/
/姓名离开焦点时
if(this.value == ''){
span[3].innerHTML = '姓名不能为空';
span[3].lor = 'red';
} else if(!st(this.value)){
span[3].innerHTML = '请输⼊正确的中⽂姓名';
span[3].lor = 'red';
} else {
span[3].innerHTML = '姓名正确！';
span[3].lor = 'green';
return n4 = true;
}
}
//⾝份证号获得焦点时
span[4].innerHTML = '请输⼊您的⾝份证号';
span[4].lor = 'green';
}
//⾝份证号离开焦点时
if(this.value == ''){
span[4].innerHTML = '⾝份证号不能为空';
span[4].lor = 'red';
} else if(!st(this.value)){
span[4].innerHTML = '⾝份证号格式不对';
span[4].lor = 'red';
} else {
span[4].innerHTML = '⾝份证正确！';
span[4].lor = 'green';
return n5 = true;
}
}
/
/邮箱获得焦点时
span[5].innerHTML = '请输⼊您的邮箱';
span[5].lor = 'green';
}
//邮箱离开焦点时
javascript登录注册界面if(this.value == ''){
span[5].innerHTML = '邮箱不能为空';
span[5].lor = 'red';
} else if(!st(this.value)){
span[5].innerHTML = '邮箱格式不对';
span[5].lor = 'red';
} else {
span[5].innerHTML = '邮箱正确！';
span[5].lor = 'green';
return n6 = true;
}
}
//⼿机号获得焦点时
span[6].innerHTML = '请输⼊您的⼿机号';
span[6].lor = 'green';
}
//⼿机号离开焦点时
if(this.value == ''){
span[6].innerHTML = '⼿机号不能为空';
span[6].lor = 'red';
} else if(!st(this.value)){
span[6].innerHTML = '⼿机号格式不对';
span[6].lor = 'red';
} else {
span[6].innerHTML = '⼿机号正确！';
span[6].lor = 'green';
return n7 = true;
}
}
//提交按钮
//正则表达式判断
// var regs = !st(userName.value)||!st(password.value)||password.value != passwordTwos.value||!st(theName.value)||!st(identity.value)||!st(mailbox.value)||!st(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("www.baidu");
return true;
}
}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。