javascript使用正則表示式實現註冊登入校驗
阿新 • • 發佈：2020-09-24
本文例項為大家分享了用正則表示式的方式實現註冊登入的校驗，供大家參考，具體內容如下
表單驗證：
1、使用者名稱：6–18位數字,字母,下劃線_，文字域獲取焦點和失去焦點出現提示文字。
2、登入密碼：請輸入6–20位數字,任意字元，文字域獲取焦點和失去焦點出現提示文字。（效果同上）
3、確認密碼：內容與登入密碼必須一致。
4、姓名：2-5位中文字。
5、身份證號：開頭為1234568，中間16位為數字，結尾為數字或Xx。
6、郵箱：常規驗證如下
7、手機號：為1開頭是11位數字
8、提交是驗證為一項是否填寫正確，並彈框提示。
確認已閱讀選項是否選中，並彈框提示。
頁面效果：
1、提交是驗證為一項是否填寫正確，並彈框提示。
原始碼：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;
}
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。