快捷導(dǎo)航

javascript使用正則表達(dá)式實現(xiàn)注冊登入校驗

更新時間：2020年09月23日 14:38:51 作者：于珂琛。

這篇文章主要為大家詳細(xì)介紹了javascript使用正則表達(dá)式實現(xiàn)注冊登入校驗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了用正則表達(dá)式的方式實現(xiàn)注冊登入的校驗，供大家參考，具體內(nèi)容如下

表單驗證：

1、用戶名：6–18位數(shù)字,字母,下劃線_，文本域獲取焦點和失去焦點出現(xiàn)提示文字。
2、登入密碼：請輸入6–20位數(shù)字,字母,任意字符，文本域獲取焦點和失去焦點出現(xiàn)提示文字。（效果同上）
3、確認(rèn)密碼：內(nèi)容與登入密碼必須一致。
4、姓名：2-5位中文字。
5、身份證號：開頭為1234568，中間16位為數(shù)字，結(jié)尾為數(shù)字或Xx。
6、郵箱：常規(guī)驗證如下
7、手機號：為1開頭是11位數(shù)字
8、提交是驗證為一項是否填寫正確，并彈框提示。
確認(rèn)已閱讀選項是否選中，并彈框提示。

頁面效果：

1、提交是驗證為一項是否填寫正確，并彈框提示。
2、確認(rèn)已閱讀選項是否選中，并彈框提示。

源代碼：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>
 <!-- 內(nèi)容 -->
 <section>
 <div>
 <label>用戶名：</label>
 <input type="text" id="userName" name="userName" placeholder="用戶設(shè)置成功后不可修改" />
 <span></span>
 <p></p>
 </div>
 <div>
 <label>登陸密碼：</label>
 <input type="password" id="password" placeholder="6-20位字母，數(shù)字或符號"/>
 <span></span>
 <p></p>
 </div>
 <div>
 <label>確認(rèn)密碼：</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>
 <!-- 結(jié)尾 -->
 <footer>
 <hr/>
 <input id="choose" type="checkbox"/>
 <label for="choose">我已閱讀并同意遵守規(guī)定</label>
 <input class="btn" type="submit" value="確認(rèn)提交"/>
 </footer>
 </form>
</body>
</html>

css

*{
 margin: 0;
 padding: 0;
}
/*內(nèi)外邊距*/
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;
}
/*寬；高；絕對定位；右；上；削圓；邊框；內(nèi)邊距*/
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;
}
/*寬；高；下邊框；行高；內(nèi)邊距；絕對定位，上；字體大小*/
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');//文字提示標(biāo)簽數(shù)組
 var span = document.getElementsByTagName('span');//文字提示標(biāo)簽數(shù)組
 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');//確認(rèn)密碼
 var theName = document.getElementById('theName');//姓名
 var identity = document.getElementById('identity');//身份證號
 var mailbox = document.getElementById('mailbox');//郵箱
 var phone = document.getElementById('phone');//電話號碼

 //正則表達(dá)式
 var reg1 = /^[\w]{6,18}$/,//用戶名 6--18位數(shù)字,字母,下劃線_
 reg2 = /^[\W\da-zA-Z_]{6,20}$/,//密碼 6--20位數(shù)字,字母,任意字符
 reg3 = /^[\u4e00-\u9fa5]{2,5}$/,//姓名 2-5為的漢子
 reg4 = /^[1234568][\d]{16}[\dxX]$/,
 //身份證號 第一個數(shù)字1234568，中間任意數(shù)字16位，結(jié)尾任意數(shù)字或者xX；
 reg5 = /^[a-z1-9](?:\w|\-)+@[a-z\d]+\.[a-z]{2,4}$/i,
 //郵箱 以字母或者數(shù)字1-9開頭+(任意個數(shù)字字母下劃線\-)+@+(任意字母數(shù)字)+.+(2-4個字母)
 reg6 = /^[1][\d]{10}$/;//手機號 首個數(shù)字為1，后面10為任意數(shù)字

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

 //用戶名獲得焦點時
 userName.onfocus = function(){
 span[0].innerHTML = '請輸入6--18位數(shù)字,字母,下劃線_';
 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位數(shù)字,字母,下劃線_';
 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位數(shù)字,字母,任意字符';
 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位數(shù)字,字母,任意字符';
 span[1].style.color = 'red';
 } else {
 span[1].innerHTML = '格式正確!';
 span[1].style.color = 'green';
 return n2 = true;
 }
 }

 //確認(rèn)密碼獲得焦點時
 passwordTwos.onfocus = function(){
 span[2].innerHTML = '請確認(rèn)兩次密碼一致';
 span[2].style.color = 'green';
 }
 //確認(rèn)密碼離開焦點時
 passwordTwos.onblur = function(){
 if(this.value == ''){
 span[2].innerHTML = '確認(rèn)密碼不能為空！';
 span[2].style.color = 'red';
 } else if(this.value != password.value){
 span[2].innerHTML = '兩次密碼不相同';
 span[2].style.color = 'red';
 } else {
 span[2].innerHTML = '確認(rèn)密碼正確!';
 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(){
 //正則表達(dá)式判斷
 // 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('請 先 點 擊 確 認(rèn) 已 閱 讀 按 鈕 ！');
 return false;
 } else {
 alert('登 記 成 功 ！');
 window.open("http://www.baidu.com");
 return true;
 }
 }
 

}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: