JavaScript表單驗(yàn)證完美代碼
用原生JS寫一個(gè)簡單的表單驗(yàn)證
首先,是html部分
<div class="divAll"> <div id="titles">新用戶注冊(cè)</div> <div id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action="#" onSubmit="return checkForm()"> <div id="form-itemGroup"> <label for="userName">用戶名:</label> <input type="text" id="userName" class="userName" onBlur="checkUserName()" oninput="checkUserName()"> <span class="default" id="nameErr">請(qǐng)輸入至少3位的用戶名</span> </div> <div id="form-itemGroup"> <label for="userPasword">密碼:</label> <input type="password" id="userPasword" class="userName" onBlur="checkPassword()" oninput="checkPassword()"> <span class="default" id="passwordErr">請(qǐng)輸入4到8位的密碼</span> </div> <div id="form-itemGroup"> <label for="userConfirmPasword">確認(rèn)密碼:</label> <input type="password" id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()" oninput="ConfirmPassword()"> <span class="default" id="conPasswordErr">請(qǐng)?jiān)佥斎胍槐槊艽a</span> </div> <div id="form-itemGroup"> <label for="userPhone">手機(jī)號(hào)碼:</label> <input type="text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()"> <span class="default" id="phoneErr">請(qǐng)輸入11位手機(jī)號(hào)碼</span> </div> <div> <button type="submit" class="divBtn">注冊(cè)</button> </div> </form> </div> </div>
接著,為其加上CSS樣式
<style type="text/css"> .divAll{ width:800px; font-family:'黑體'; margin:50px auto; } #titles{ font-weight:bold; font-size:18px; height:50px; line-height:50px; background:#FFF9F3; text-align:center; border:1px solid #CCC;; } #contents{ margin-top:20px; background:#FFF9F3; border:1px solid #CCC;; } #form-itemGroup{ padding:10px; } #form-itemGroup label{ display:inline-block; width:100px; height:32px; line-height:32px; color:#666; text-align:right; } #form-itemGroup .userName{ width:200px; height:40px; line-height:40px; border:1px solid #CCC; } #form-itemGroup .default{ width:200px; height:32px; line-height:32px; color:#999; } #form-itemGroup .error{ height:32px; line-height:32px; color:#F00; } #form-itemGroup .success{ height:32px; line-height:32px; color:#096; } .divBtn{ margin-top:20px; margin-left:200px; width:100px; height:32px; line-height:32px; background-color:#F93; margin-bottom:10px; color:#ffffff; font-weight:bold; border:none; } </style>
最后是JS部分
<script type="text/javascript"> function checkForm(){ var nametip = checkUserName(); var passtip = checkPassword(); var conpasstip = ConfirmPassword(); var phonetip = checkPhone(); return nametip && passtip && conpasstip && phonetip; } //驗(yàn)證用戶名 function checkUserName(){ var username = document.getElementById('userName'); var errname = document.getElementById('nameErr'); var pattern = /^\w{3,}$/; //用戶名格式正則表達(dá)式:用戶名要至少三位 if(username.value.length == 0){ errname.innerHTML="用戶名不能為空" errname.className="error" return false; } if(!pattern.test(username.value)){ errname.innerHTML="用戶名不合規(guī)范" errname.className="error" return false; } else{ errname.innerHTML="OK" errname.className="success"; return true; } } //驗(yàn)證密碼 function checkPassword(){ var userpasswd = document.getElementById('userPasword'); var errPasswd = document.getElementById('passwordErr'); var pattern = /^\w{4,8}$/; //密碼要在4-8位 if(!pattern.test(userpasswd.value)){ errPasswd.innerHTML="密碼不合規(guī)范" errPasswd.className="error" return false; } else{ errPasswd.innerHTML="OK" errPasswd.className="success"; return true; } } //確認(rèn)密碼 function ConfirmPassword(){ var userpasswd = document.getElementById('userPasword'); var userConPassword = document.getElementById('userConfirmPasword'); var errConPasswd = document.getElementById('conPasswordErr'); if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){ errConPasswd.innerHTML="上下密碼不一致" errConPasswd.className="error" return false; } else{ errConPasswd.innerHTML="OK" errConPasswd.className="success"; return true; } } //驗(yàn)證手機(jī)號(hào) function checkPhone(){ var userphone = document.getElementById('userPhone'); var phonrErr = document.getElementById('phoneErr'); var pattern = /^1[34578]\d{9}$/; //驗(yàn)證手機(jī)號(hào)正則表達(dá)式 if(!pattern.test(userphone.value)){ phonrErr.innerHTML="手機(jī)號(hào)碼不合規(guī)范" phonrErr.className="error" return false; } else{ phonrErr.innerHTML="OK" phonrErr.className="success"; return true; } } </script>
好了,打開瀏覽器測試一下吧
填寫數(shù)據(jù),可以!
以上所述是小編給大家介紹的JavaScript表單驗(yàn)證完美代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jquery validate.js表單驗(yàn)證的基本用法入門
- js 常用正則表達(dá)式表單驗(yàn)證代碼
- JavaScript 表單驗(yàn)證正則表達(dá)式大全[推薦]
- AngularJS實(shí)現(xiàn)表單驗(yàn)證
- javascript制作的簡單注冊(cè)模塊表單驗(yàn)證
- js正則表達(dá)式注冊(cè)頁面表單驗(yàn)證
- jquery表單驗(yàn)證插件(jquery.validate.js)的3種使用方式
- JavaScript表單驗(yàn)證實(shí)例之驗(yàn)證表單項(xiàng)是否為空
- AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
- JavaScript實(shí)現(xiàn)簡單表單驗(yàn)證案例
相關(guān)文章
JavaScript判斷是否為數(shù)組的3種方法及效率比較
這篇文章主要介紹了JavaScript判斷是否為數(shù)組的3種方法及效率比較,本文直接給出運(yùn)行效果和實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04javascript實(shí)現(xiàn)簡單的進(jìn)度條
本文給大家分享2個(gè)javascript實(shí)現(xiàn)簡單的進(jìn)度條,一個(gè)是個(gè)人制作一個(gè)是網(wǎng)友實(shí)現(xiàn)的,都很不錯(cuò),這里推薦給大家。2015-07-07詳解JavaScript如何實(shí)現(xiàn)異步并發(fā)任務(wù)控制器
實(shí)現(xiàn)一個(gè)控制并發(fā)數(shù)的任務(wù)隊(duì)列?、實(shí)現(xiàn)一個(gè)異步并發(fā)任務(wù)控制器,這已經(jīng)是非常經(jīng)典的手寫題目了,因?yàn)槠渲猩婕?異步?和?并發(fā)?的內(nèi)容,所以本文就來講講到底如何實(shí)現(xiàn)呢2023-05-05js實(shí)現(xiàn)卡片式項(xiàng)目管理界面UI設(shè)計(jì)效果
這篇文章主要介紹了js實(shí)現(xiàn)卡片式項(xiàng)目管理界面UI設(shè)計(jì)效果,該UI設(shè)計(jì)中,將各個(gè)項(xiàng)目以卡片的方式堆疊排列在屏幕上,當(dāng)點(diǎn)擊了其中的某個(gè)項(xiàng)目的時(shí)候,該項(xiàng)目圖片會(huì)全屏放大,向下滾動(dòng)鼠標(biāo)可以看到該項(xiàng)目的介紹信息,需要的朋友可以參考下2015-12-12微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細(xì)步驟
這篇文章主要介紹了微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細(xì)步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09JS實(shí)現(xiàn)導(dǎo)出Excel的五種方法詳解【附源碼下載】
這篇文章主要介紹了JS實(shí)現(xiàn)導(dǎo)出Excel的五種方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了基于table表格導(dǎo)出Excel文件的相關(guān)操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下2018-03-03詳解JavaScript如何利用異步解密回調(diào)地獄
為了更好地處理這些異步操作,JavaScript?引入了異步編程的概念,這篇文章主要來和大家詳細(xì)聊聊JavaScript中異步的相關(guān)應(yīng)用,希望對(duì)大家有所幫助2024-02-02javaScript 刪除確認(rèn)實(shí)現(xiàn)方法小結(jié)
因?yàn)閷?duì)于內(nèi)容的刪除是件很重要的事,所以一般的系統(tǒng)中,都需要?jiǎng)h除確認(rèn)一下,以免誤刪,具體的方法如下,大家可以參考下。2009-12-12