本文實(shí)例為大家分享了js表單驗(yàn)證的實(shí)現(xiàn)方法,供大家參考,具體內(nèi)容如下
成都創(chuàng)新互聯(lián)專(zhuān)注于忻州網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供忻州營(yíng)銷(xiāo)型網(wǎng)站建設(shè),忻州網(wǎng)站制作、忻州網(wǎng)頁(yè)設(shè)計(jì)、忻州網(wǎng)站官網(wǎng)定制、小程序制作服務(wù),打造忻州網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供忻州網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。
第一種:js表單驗(yàn)證
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注冊(cè)-個(gè)人用戶(hù)</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script> <style> body { font-family: Arial, "宋體", Lucida, Verdana, Helvetica, sans-serif; font-size: 12px; color: #333; line-height: 150%; background: #f2f2f2; } .hide{display:none;} .focus,.error { color: #e4393c; line-height: 36px; height: 36px; position: absolute; top: 0px; width: 260px; padding: 0 5px; background: #FFEBEB; border: 1px solid #ffbdbe; } .error span,.focus span { padding: 5px 0; line-height: 13px; display: block; } .focus { color: #666; width: 260px;; line-height: 36px; background: #f7f7f7; border: 1px solid #dddddd; } .regist { width: 990px; padding: 0; margin: 0 auto; zoom: 1; } .mc { padding: 30px 0 20px; border: solid #dddddd; border-width : 0px 1px 1px; background: #FFF; overflow: hidden; zoom: 1; border-width: 0px 1px 1px; } .form { float: left; width: 750px; font-size: 12px; } .form label,.form input,.form select,.form textarea,.form button,.form .label { float: left; font-size: 12px; } .item { padding-top: 9px; height: 60px; line-height: 34px; position: relative; z-index: 1; } .label { float: left; width: 190px; text-align: right; font-size: 14px; color: #999; padding-right: 10px; } .input { float: left; position: relative; width: 270px; overflow: visible; } .text { float: none; width: 275px; height: 37px; line-height: 32px; border: 1px solid #cccccc; font-size: 14px; font-family: arial, "宋體"; overflow: hidden; } </style> </head> <body> <div class="regist"> <div class="mc"> <form id="personRegForm" class="form" action="login.html" method="POST" onsubmit="return validateForm();"> <div class="item"> <span class="label">用戶(hù)名:</span> <div class="input"> <input type="text" id="username" name="username" class="text"> <label id="username_msg" class="hide"></label> </div> </div> <div class="item"> <span class="label">請(qǐng)?jiān)O(shè)置密碼:</span> <div class="input"> <input type="password" id="password" name="password" class="text"> <label id="pwd_msg" class="hide"></label> </div> </div> <div class="item"> <span class="label">請(qǐng)確認(rèn)密碼:</span> <div class="input"> <input type="password" id="pwdRepeat" name="pwdRepeat" class="text"> <label id="pwdRepeat_msg" class="hide"></label> </div> </div> <div class="item"> <span class="label">驗(yàn)證郵箱:</span> <div class="input"> <input type="text" id="mail" name="mail" class="text"> <label id="mail_msg" class="hide"></label> </div> </div> <div class="item"> <span class="label"> </span> <input type="submit" class="btn-img" id="registsubmit" value="立即注冊(cè)" /> </div> </form> </div> </div> <script> window.onload = function(){ // 1. 用戶(hù)名 $("#username").focus(function(){ /* 獲取焦點(diǎn) var username_msg = $("#username_msg"); username_msg.text("4-20位字符,支持英文、數(shù)字及'-'、'_'組合"); username_msg.attr("class","focus"); */ elemFocus("username_msg","4-20位字符,支持英文、數(shù)字及'-'、'_'組合"); }).blur(userValidator); // 2. 密碼 $("#password").focus(function(){ elemFocus("pwd_msg","6-20位字符,可使用字母、數(shù)字的組合"); }).blur(pwdValidator); // 3. 確認(rèn)密碼 $("#pwdRepeat").focus(function(){ elemFocus("pwdRepeat_msg","6-20位字符,可使用字母、數(shù)字的組合"); }).blur(pwdRepeatValidator); // 4. Email $("#mail").focus(function(){ elemFocus("mail_msg","完成驗(yàn)證后,可以使用該郵箱登錄和找回密碼"); }).blur(emailValidator); } // 定義函數(shù) - 通用的信息提示 function elemFocus(eleId,text){ var ele_msg = $("#"+eleId); ele_msg.text(text); ele_msg.attr("class","focus"); } // 定義驗(yàn)證用戶(hù)名的函數(shù) function userValidator(){ // 獲取用戶(hù)名輸入的值 var value = $("#username").val(); // 獲取用于顯示提示信息的元素 var username_msg = $("#username_msg"); // 驗(yàn)證邏輯 if(value==""||value==null){ username_msg.text("用戶(hù)名不能為空"); username_msg.attr("class","error"); return false; }else if(value.length<4||value.length>20){ username_msg.text("用戶(hù)名的長(zhǎng)度不正確"); username_msg.attr("class","error"); return false; }else if(!/^[a-zA-Z0-9-_]{4,20}$/.test(value)){ username_msg.text("用戶(hù)名輸入不正確"); username_msg.attr("class","error"); return false; } // 驗(yàn)證通過(guò)修改正確樣式 if(!username_msg.hasClass("hide")){ username_msg.text(""); username_msg.attr("class","hide"); } return true; } // 定義驗(yàn)證密碼的函數(shù) function pwdValidator(){ var value = $("#password").val(); var pwd_msg = $("#pwd_msg"); if(value==""||value==null){ pwd_msg.text("密碼不能為空"); pwd_msg.attr("class","error"); return false; }else if(value.length<6||value.length>20){ pwd_msg.text("密碼的長(zhǎng)度不正確"); pwd_msg.attr("class","error"); return false; }else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){ pwd_msg.text("密碼輸入不正確"); pwd_msg.attr("class","error"); return false; } if(!pwd_msg.hasClass("hide")){ pwd_msg.text(""); pwd_msg.attr("class","hide"); } return true; } // 定義確認(rèn)密碼驗(yàn)證的函數(shù) function pwdRepeatValidator(){ var value = $("#pwdRepeat").val(); var pwdRepeat_msg = $("#pwdRepeat_msg"); var pwd = $("#password").val(); if(value==""||value==null){ pwdRepeat_msg.text("密碼不能為空"); pwdRepeat_msg.attr("class","error"); return false; }else if(value.length<6||value.length>20){ pwdRepeat_msg.text("密碼的長(zhǎng)度不正確"); pwdRepeat_msg.attr("class","error"); return false; }else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){ pwdRepeat_msg.text("密碼輸入不正確"); pwdRepeat_msg.attr("class","error"); return false; }else if(value != pwd){ pwdRepeat_msg.text("兩次密碼輸入不一致"); pwdRepeat_msg.attr("class","error"); return false; } if(!pwdRepeat_msg.hasClass("hide")){ pwdRepeat_msg.text(""); pwdRepeat_msg.attr("class","hide"); } return true; } // 定義Email驗(yàn)證的函數(shù) function emailValidator(){ var value = $("#mail").val(); var email_msg = $("#mail_msg"); if(value==""||value==null){ email_msg.text("Email不能為空"); email_msg.attr("class","error"); return false; }else if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)){ email_msg.text("Email格式不正確"); email_msg.attr("class","error"); return false; } if(!email_msg.hasClass("hide")){ email_msg.text(""); email_msg.attr("class","hide"); } return true; } function validateForm(){ if(!userValidator()||!pwdValidator()||!pwdRepeatValidator()||!emailValidator()){ return false; } return true; } </script> </body> </html>
第二種:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> * { padding: 0; margin: 0; } form { width: 570px; height: 300px; margin: 100px auto; } label { width: 64px; float: left; clear: left; height: 36px; line-height: 36px; margin-top: 10px; } input { width: 300px; height: 36px; line-height: 36px; margin-top: 10px; text-indent: 8px; font-size: 16px; font-family: "微軟雅黑"; border: 1px solid #ccc; float: left; } #sub { width: 302px; height: 40px; border: 1px solid #ccc; background: #888; color: #fff; font-size: 18px; text-indent: 0; } .spa { height: 36px; line-height: 36px; width: 204px; display: inline-block; float: left; font-size: 12px; color: #BD362F; text-indent: 10px; margin-top: 10px; } </style> </head> <body> <form action="" method="post"> <label id="name">姓 名:</label><input type="text" name="username" id="username" value="" placeholder="請(qǐng)輸入姓名" /><span class="spa spa1"></span><br /> <label id="phone">手機(jī)號(hào):</label><input type="text" name="userphone" id="userphone" value="" placeholder="請(qǐng)輸入手機(jī)號(hào)" /><span class="spa spa2"></span><br /> <label id="address">地 址:</label><input type="text" name="useraddress" id="useraddress" value="" placeholder="請(qǐng)輸入地址" /><span class="spa spa3"></span><br /> <label> </label><input type="submit" value="注冊(cè)" id="sub" /> </form> <script src="http://code.jquery.com/jquery-1.4.1.js"></script> <script type="text/javascript"> window.onload = function() { $("#username").focus() } /************************ 失焦判斷 **********************************/ $("input").blur(function() { $(".spa").css("color", "#BD362F") if($(this).is("#username")) { //姓名判斷 var na = /^[\u4E00-\u9FA5]{2,4}$/ if($("#username").val() != "") { if(!(na.test($("#username").val()))) { $(".spa1").text("請(qǐng)輸入2-4個(gè)漢字"); $(this).css("border", "1px solid #BD362F") return false; } else if(na) { $(".spa1").text(""); return true; } } else { $(".spa1").text(""); } } if($(this).is("#userphone")) { //手機(jī)號(hào)判斷 var ph = /^1[3|5|7|8|][0-9]{9}$/ if($("#userphone").val() != "") { if(!(ph.test($("#userphone").val()))) { $(".spa2").text("請(qǐng)輸入正確手機(jī)號(hào)"); $(this).css("border", "1px solid #BD362F") return false; } else if(ph) { $(".spa2").text(""); return true; } } else { $(".spa2").text(""); } } if($(this).is("#useraddress")) { //地址判斷 var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/; if($("#useraddress").val() != "") { if(!(ad.test($("#useraddress").val()))) { $(".spa3").text("請(qǐng)輸入正確地址"); $(this).css("border", "1px solid #BD362F") return false; } else if(ad) { $(".spa3").text(""); return true; } } else { $(".spa3").text(""); } } }) /********************** 聚焦提示 ************************/ $("input").focus(function() { if($(this).is("#username")) { $(".spa1").text("四個(gè)漢字").css("color", "#aaa") $(this).css("border", "1px solid #aaa") } if($(this).is("#userphone")) { $(".spa2").text("11位手機(jī)號(hào)碼").css("color", "#aaa") $(this).css("border", "1px solid #aaa") } if($(this).is("#useraddress")) { $(".spa3").text("最少8個(gè)字符(漢字、字母和數(shù)字)").css("color", "#aaa") $(this).css("border", "1px solid #aaa") } }) /*********************** 提交驗(yàn)證 ***************************/ $("#sub").click(function() { var na = /^[\u4E00-\u9FA5]{2,4}$/; //姓名正則 var ph = /^1[3|5|7|8|][0-9]{9}$/; //手機(jī)號(hào)正則 var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/; //地址正則 if(na.test($("#username").val()) && ph.test($("#userphone").val()) && ad.test($("#useraddress").val())) { return true; } else { if($("#username").val() == "") { $(".spa1").text('請(qǐng)你填寫(xiě)用戶(hù)名') } if($("#userphone").val() == "") { $(".spa2").text('請(qǐng)你填寫(xiě)手機(jī)號(hào)') } if($("#useraddress").val() == "") { $(".spa3").text('請(qǐng)你填寫(xiě)地址') } return false; } }) </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站欄目:JavaScript表單驗(yàn)證的兩種實(shí)現(xiàn)方法
網(wǎng)站地址:http://bm7419.com/article36/pcejsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、用戶(hù)體驗(yàn)、軟件開(kāi)發(fā)、建站公司、定制網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
網(wǎng)頁(yè)設(shè)計(jì)公司知識(shí)