JS表單驗證
HTML部分代碼：css
CSS樣式：html
消息提示框樣式：正則表達式
JS正則表達式代碼：bootstrap
電話：post
郵箱：this
密碼：spa
再次輸入密碼驗證：3d
整個表單頁面驗證：orm
完整代碼：htm
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>註冊練習</title> <link rel="stylesheet" href="dist/css/bootstrap.min.css"/> <style> .err{ color: red; font-size: 12px; height: 16px; padding-left: 40px; margin-top: 10px; } </style></head><body> <div> <h3>註冊</h3> <form action="#" method="post" id="myform"> <p> 手機：<input type="text" name="mobile" id="phone" onblur="mobiles(this)" /><span class="err" id="mobile"></span> </p> <p> 郵箱：<input type="text" name="email" id="email" onblur="emails(this)"/><span class="err" id="youxiang"></span> </p> <p> 密碼： <input type="password" name="password" id="pwd" onblur="pass(this)"/><span class="err" id="mima"></span> </p> <p> 肯定密碼： <input type="password" name="passwd" id="password" onblur="pwds(this)"/><span class="err" id="pwds"></span> </p> <button onclick="btn()" type="button">註冊</button> </form> </div> <script>// //手機驗證 var mobile = /^1[3578]\d{9}$/; //obj獲取當前對象 function mobiles(obj){ if(mobile.test(obj.value)){ //nextSibling：獲取下一個元素 obj.nextSibling.innerHTML = '正確'; }else{ obj.nextSibling.innerHTML='手機號碼格式輸入錯誤'; } } //郵箱驗證 /^\w+@\w+(.\w+)+$/ var youxiang = /^([a-z0-9_\.-])+@([\da-z\.-]+)\.([a-z\.]{2,6})$/; function emails(obj){ if(youxiang.test(obj.value)){ obj.nextSibling.innerHTML = '正確'; }else{ obj.nextSibling.innerHTML = '郵箱格式輸入錯誤,例如2314562354@qq.com'; } } //密碼驗證 var mima = /^[a-zA-Z_0-9]{6,18}$/; function pass(obj){// alert("bahsbdha"); if(mima.test(obj.value)){// alert("hahah"); obj.nextSibling.innerHTML = '正確'; }else{ obj.nextSibling.innerHTML='密碼只能爲大小寫字母,數字或者下劃線，長度爲6--18'; } } //第二次密碼輸入驗證 function pwds(obj){ if(obj.value==""){ obj.nextSibling.innerHTML = '輸入不能爲空'; }else{ if (obj.value!=document.getElementById("pwd").value) { obj.nextSibling.innerHTML='兩次輸入的密碼不一致'; }else{ obj.nextSibling.innerHTML='ok'; } } } //判斷所有表單內容 function btn(){ //定義一個變量，判斷驗證正確或失敗 var num = 0; //匹配正則表達式test if(mobile.test(document.getElementById("phone").value)){ document.getElementById("phone").nextSibling.innerHTML = '正確'; num ++; }else{ document.getElementById("phone").nextSibling.innerHTML='手機號碼格式輸入錯誤'; } if(youxiang.test(document.getElementById("email").value)){ document.getElementById("email").nextSibling.innerHTML = '正確'; num ++; //驗證經過德華，num就+1 }else{ document.getElementById("email").nextSibling.innerHTML = '郵箱格式輸入錯誤,例如2314562354@qq.com'; } if(mima.test(document.getElementById("pwd").value)){ document.getElementById("pwd").nextSibling.innerHTML = '正確'; }else{ document.getElementById("pwd").nextSibling.innerHTML='密碼只能爲大小寫字母,數字或者下劃線，長度爲6--18'; } if(document.getElementById("password").value==""){ alert('bahsb'); document.getElementById("password").nextSibling.innerHTML = '輸入不能爲空'; }else{ if (document.getElementById("password").value!=document.getElementById("pwd").value) { document.getElementById("password").nextSibling.innerHTML='兩次輸入的密碼不一致'; }else{ document.getElementById("password").nextSibling.innerHTML='ok'; num++; } } if(num == 3) { alert('成功'); } } </script></body></html>
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。