javascript使用正則表達式實現(xiàn)注冊登入校驗
更新時間：2020年09月23日 14:38:51 作者：于珂琛。
這篇文章主要為大家詳細介紹了javascript使用正則表達式實現(xiàn)注冊登入校驗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了用正則表達式的方式實現(xiàn)注冊登入的校驗，供大家參考，具體內(nèi)容如下
表單驗證：
1、用戶名：6–18位數(shù)字,字母,下劃線_，文本域獲取焦點和失去焦點出現(xiàn)提示文字。
2、登入密碼：請輸入6–20位數(shù)字,字母,任意字符，文本域獲取焦點和失去焦點出現(xiàn)提示文字。（效果同上）
3、確認密碼：內(nèi)容與登入密碼必須一致。
4、姓名：2-5位中文字。
5、身份證號：開頭為1234568，中間16位為數(shù)字，結(jié)尾為數(shù)字或Xx。
6、郵箱：常規(guī)驗證如下
7、手機號：為1開頭是11位數(shù)字
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> <!-- 內(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>確認密碼：</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="確認提交"/> </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');//文字提示標簽數(shù)組
var span = document.getElementsByTagName('span');//文字提示標簽數(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');//確認密碼
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位數(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;
}
}
//確認密碼獲得焦點時
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;
}
}
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了微信小程序之五種頁面跳轉(zhuǎn)方法小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要為大家詳細介紹了JavaScript制作頁面倒計時器的實現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要為大家詳細介紹了JS實現(xiàn)按比例縮小圖片寬高，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細介紹了JavaScript原型鏈，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2023-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)網(wǎng)頁換膚功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
當頁面設(shè)計好后需要打印出來,如網(wǎng)頁的的打印瀏覽和打印功能,有些公司需要讓前端開發(fā)好頁面打印出來或者轉(zhuǎn)為pdf格式的文檔,下面這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)打印功能的兩種方法,需要的朋友可以參考下2023-01-01
2008-01-01
JS俄羅斯方塊完美注釋版 v 1.01 從學c語言那一會兒都想寫一個俄羅斯方塊,可是每次動起手總覺得難度太大. 今天終于用了大約4個小時寫出來了. 其中在涉及到方塊變型的時候還咨詢了2008-11-11
本篇文章主要介紹了微信小程序開發(fā)之麥克風動畫：幀動畫、放大、淡出的相關(guān)資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
D3.js中data(), enter() 和 exit()的問題詳解
相信大多數(shù)人對D3.js并不陌生。這是一個由紐約時報可視化編輯 Mike Bostock與他斯坦福的教授和同學合作開發(fā)的數(shù)據(jù)文件處理的JavaScript Library，全稱叫做Data-Driven Documents，在d3.js中data(), enter() 和 exit()比較常見，下面給大家就這方面的知識給大家詳解2015-08-08