JavaScript表單驗證完美代碼
用原生JS寫一個簡單的表單驗證
首先,是html部分
<div class="divAll"> <div id="titles">新用戶注冊</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">請輸入至少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">請輸入4到8位的密碼</span> </div> <div id="form-itemGroup"> <label for="userConfirmPasword">確認密碼:</label> <input type="password" id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()" oninput="ConfirmPassword()"> <span class="default" id="conPasswordErr">請再輸入一遍密碼</span> </div> <div id="form-itemGroup"> <label for="userPhone">手機號碼:</label> <input type="text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()"> <span class="default" id="phoneErr">請輸入11位手機號碼</span> </div> <div> <button type="submit" class="divBtn">注冊</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; } //驗證用戶名 function checkUserName(){ var username = document.getElementById('userName'); var errname = document.getElementById('nameErr'); var pattern = /^\w{3,}$/; //用戶名格式正則表達式:用戶名要至少三位 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; } } //驗證密碼 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; } } //確認密碼 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; } } //驗證手機號 function checkPhone(){ var userphone = document.getElementById('userPhone'); var phonrErr = document.getElementById('phoneErr'); var pattern = /^1[34578]\d{9}$/; //驗證手機號正則表達式 if(!pattern.test(userphone.value)){ phonrErr.innerHTML="手機號碼不合規(guī)范" phonrErr.className="error" return false; } else{ phonrErr.innerHTML="OK" phonrErr.className="success"; return true; } } </script>
好了,打開瀏覽器測試一下吧
填寫數(shù)據(jù),可以!
以上所述是小編給大家介紹的JavaScript表單驗證完美代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript判斷是否為數(shù)組的3種方法及效率比較
這篇文章主要介紹了JavaScript判斷是否為數(shù)組的3種方法及效率比較,本文直接給出運行效果和實現(xiàn)代碼,需要的朋友可以參考下2015-04-04詳解JavaScript如何實現(xiàn)異步并發(fā)任務(wù)控制器
實現(xiàn)一個控制并發(fā)數(shù)的任務(wù)隊列?、實現(xiàn)一個異步并發(fā)任務(wù)控制器,這已經(jīng)是非常經(jīng)典的手寫題目了,因為其中涉及?異步?和?并發(fā)?的內(nèi)容,所以本文就來講講到底如何實現(xiàn)呢2023-05-05js實現(xiàn)卡片式項目管理界面UI設(shè)計效果
這篇文章主要介紹了js實現(xiàn)卡片式項目管理界面UI設(shè)計效果,該UI設(shè)計中,將各個項目以卡片的方式堆疊排列在屏幕上,當點擊了其中的某個項目的時候,該項目圖片會全屏放大,向下滾動鼠標可以看到該項目的介紹信息,需要的朋友可以參考下2015-12-12微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細步驟
這篇文章主要介紹了微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09JS實現(xiàn)導(dǎo)出Excel的五種方法詳解【附源碼下載】
這篇文章主要介紹了JS實現(xiàn)導(dǎo)出Excel的五種方法,結(jié)合實例形式較為詳細的分析了基于table表格導(dǎo)出Excel文件的相關(guān)操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下2018-03-03詳解JavaScript如何利用異步解密回調(diào)地獄
為了更好地處理這些異步操作,JavaScript?引入了異步編程的概念,這篇文章主要來和大家詳細聊聊JavaScript中異步的相關(guān)應(yīng)用,希望對大家有所幫助2024-02-02javaScript 刪除確認實現(xiàn)方法小結(jié)
因為對于內(nèi)容的刪除是件很重要的事,所以一般的系統(tǒng)中,都需要刪除確認一下,以免誤刪,具體的方法如下,大家可以參考下。2009-12-12