當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript 登录注册表单验证
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 登录注册表单验证
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. 驗(yàn)證用戶名是否符合規(guī)則（idea2021 CTRL+R 修改替換）
1.1 獲取用戶名的輸入框
1.2 綁定onblur事件? 》》》 當(dāng)元素失去焦點(diǎn)時(shí)發(fā)生此事件
1.3 獲取用戶在username輸入框中輸入的信息，排除掉空白字符
1.4 判斷username的值是否符合規(guī)則
2. 驗(yàn)證密碼是否符合規(guī)則（idea2021 CTRL+R 修改替換）
2.1 獲取密碼的輸入框
2.2 綁定onblur事件? 》》》 當(dāng)元素失去焦點(diǎn)時(shí)發(fā)生此事件
2.3 獲取用戶在password輸入框中輸入的信息，排除掉空白字符
2.4 判斷password的值是否符合規(guī)則
3. 驗(yàn)證手機(jī)號是否符合規(guī)則（idea2021 CTRL+R 修改替換）
3.1 獲取手機(jī)號的輸入框
3.2 綁定onblur事件? 》》》 當(dāng)元素失去焦點(diǎn)時(shí)發(fā)生此事件
3.3 獲取用戶在tel輸入框中輸入的信息，排除掉空白字符
3.4 判斷tel的值是否符合規(guī)則
4.form表單的提交
4.1獲取表單的對象
4.2為表單對象綁定onsubmit
html文件代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>歡迎注冊</title><link href="css/register.css" rel="stylesheet"> </head> <body><div class="form-div"><div class="reg-content"><h1>歡迎注冊</h1><span>已有帳號？</span> <a href="#">登錄</a></div><form id="reg-form" action="#" method="get"><table><tr><td>用戶名</td><td class="inputs"><input name="username" type="text" id="username"><br><!--這里是被隱藏的提示信息--><span id="username_err" class="err_msg" style="display:none">用戶名不合乎規(guī)則</span></td></tr><tr><td>密碼</td><td class="inputs"><input name="password" type="password" id="password"><br><!--這里是被隱藏的提示信息--><span id="password_err" class="err_msg" style="display: none">密碼格式有誤</span></td></tr><tr><td>手機(jī)號</td><td class="inputs"><input name="tel" type="text" id="tel"><br><!--這里是被隱藏的提示信息--><span id="tel_err" class="err_msg" style="display: none">手機(jī)號格式有誤</span></td></tr></table><div class="buttons"><input value="注 冊" type="submit" id="reg_btn"></div><br class="clear"></form></div> </body> </html>?JavaScript文件代碼（HTML文件中沒有引用，自己引用就好了）
<script>//1. 驗(yàn)證用戶名是否符合規(guī)則//1.1 獲取用戶名的輸入框var username = document.getElementById("username");//1.2 綁定onblur事件 》》》 當(dāng)元素失去焦點(diǎn)時(shí)發(fā)生此事件username.onblur =judgeUserName;function judgeUserName(){//1.3 獲取用戶在username輸入框中輸入的信息，排除掉空白字符var usernameValue = username.value.trim();//1.4 判斷username的值是否符合規(guī)則var flag = usernameValue.length>=6&&usernameValue.length<=12;if (flag){document.getElementById("username_err").style.display="none";}else{document.getElementById("username_err").style.display="";}return flag;}//2. 驗(yàn)證密碼是否符合規(guī)則（CTRL+R 修改替換）//2.1 獲取密碼的輸入框var password = document.getElementById("password");//2.2 綁定onblur事件 》》》 當(dāng)元素失去焦點(diǎn)時(shí)發(fā)生此事件password.onblur =judgePassword;function judgePassword(){//2.3 獲取用戶在password輸入框中輸入的信息，排除掉空白字符var passwordValue = password.value.trim();//2.4 判斷password的值是否符合規(guī)則var flag = passwordValue.length>=6&&passwordValue.length<=12;if (flag){document.getElementById("password_err").style.display="none";}else{document.getElementById("password_err").style.display="";}return flag;}//3. 驗(yàn)證手機(jī)號是否符合規(guī)則//3.1 獲取手機(jī)號的輸入框var tel = document.getElementById("tel");//3.2 綁定onblur事件 》》》 當(dāng)元素失去焦點(diǎn)時(shí)發(fā)生此事件tel.onblur =judgeTel;function judgeTel(){//3.3 獲取用戶在tel輸入框中輸入的信息，排除掉空白字符var telValue = tel.value.trim();//3.4 判斷tel的值是否符合規(guī)則var flag = telValue.length ==11 ;if (flag){document.getElementById("tel_err").style.display="none";}else{document.getElementById("tel_err").style.display="";}return flag;}//4.form表單的提交//4.1獲取表單的對象var regForm = document.getElementById("reg-form");//4.2為表單對象綁定onsubmitregForm.onsubmit = function (){var flag = judgeUserName()&&judgePassword()&&judgeTel();if (flag){return true;}else {return false;}} </script>?css文件代碼
* {margin: 0;padding: 0;list-style-type: none; } .reg-content{padding: 30px;margin: 3px; } a, img {border: 0; }body {background-image: url("imgs/reg_bg_min.jpg") ;text-align: center; }table {border-collapse: collapse;border-spacing: 0; }td, th {padding: 0;height: 90px;} .inputs{vertical-align: top; }.clear {clear: both; }.clear:before, .clear:after {content: "";display: table; }.clear:after {clear: both; }.form-div {background-color: rgba(255, 255, 255, 0.27);border-radius: 10px;border: 1px solid #aaa;width: 424px;margin-top: 150px;margin-left:1050px;padding: 30px 0 20px 0px;font-size: 16px;box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);text-align: left; }.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {width: 268px;margin: 10px;line-height: 20px;font-size: 16px; }.form-div input[type="checkbox"] {margin: 20px 0 20px 10px; }.form-div input[type="button"], .form-div input[type="submit"] {margin: 10px 20px 0 0; }.form-div table {margin: 0 auto;text-align: right;color: rgba(64, 64, 64, 1.00); }.form-div table img {vertical-align: middle;margin: 0 0 5px 0; }.footer {color: rgba(64, 64, 64, 1.00);font-size: 12px;margin-top: 30px; }.form-div .buttons {float: right; }input[type="text"], input[type="password"], input[type="email"] {border-radius: 8px;box-shadow: inset 0 2px 5px #eee;padding: 10px;border: 1px solid #D4D4D4;color: #333333;margin-top: 5px; }input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {border: 1px solid #50afeb;outline: none; }input[type="button"], input[type="submit"] {padding: 7px 15px;background-color: #3c6db0;text-align: center;border-radius: 5px;overflow: hidden;min-width: 80px;border: none;color: #FFF;box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3); }input[type="button"]:hover, input[type="submit"]:hover {background-color: #5a88c8; }input[type="button"]:active, input[type="submit"]:active {background-color: #5a88c8; } .err_msg{color: red;padding-right: 170px; } #password_err,#tel_err{padding-right: 195px; }#reg_btn{margin-right:50px; width: 285px; height: 45px; margin-top:20px; }圖片自取：
效果：
總結(jié)
以上是生活随笔為你收集整理的JavaScript 登录注册表单验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阿里巴巴Java开发手册（详尽PDF版）
- 下一篇： java实现打开新窗口_[Java教程]