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

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

表单验证:

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="http://www.cppcns.com/wangluo/javascript/demo.css" >
 <script type="text/javascript" src="http://www.cppcns.com/wangluo/javascript/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="http://www.cppcns.com/wangluo/javascript/确认提交"/>
 </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;
}
/*宽;高;背景颜色;削圆;边框;字体颜色;大小;小手*/

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

扫一扫手机访问