JS表單驗(yàn)證的代碼(常用)
最近沒(méi)有項(xiàng)目做,有點(diǎn)空余時(shí)間,小編把日常比較常用的js表單驗(yàn)證代碼整理分享到腳本之家平臺(tái),供大家學(xué)習(xí),需要的朋友參考下吧!
注冊(cè)驗(yàn)證:
<script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script> //驗(yàn)證表單 function vailForm(){ var form = jQuery("#editForm"); if(!vailNickName())return; if(!vailPhone())return; if(!vailPwd())return; if(!vailConfirmPwd())return; if(!vailEmail())return; if(!vailCode())return; if(!vailAgree())return; form.submit(); } //驗(yàn)證昵稱(chēng) function vailNickName(){ var nickName = jQuery("#nickName").val(); var flag = false; var message = ""; var patrn=/^\d+$/; var length = getNickNameLength(); if(nickName == ''){ message = "昵稱(chēng)不能為空!"; }else if(length<4||length>16){ message = "昵稱(chēng)為4-16個(gè)字符!"; } else if(checkNickNameIsExist()){ message = "該昵稱(chēng)已經(jīng)存在,請(qǐng)重新輸入!"; }else{ flag = true; } if(!flag){ jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#nickNameP").html(""); jQuery("#nickNameP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#nickName").focus(); }else{ jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#nickNameP").html(""); jQuery("#nickNameP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該昵稱(chēng)可用"); } return flag; } //計(jì)算昵稱(chēng)長(zhǎng)度 function getNickNameLength(){ var nickName = jQuery("#nickName").val(); var len = 0; for (var i = 0; i < nickName.length; i++) { var a = nickName.charAt(i); //函數(shù)格式:stringObj.match(rgExp) stringObj為字符串必選 rgExp為正則表達(dá)式必選項(xiàng) //返回值:如果能匹配則返回結(jié)果數(shù)組,如果不能匹配返回null if (a.match(/[^\x00-\xff]/ig) != null){ len += 2; }else{ len += 1; } } return len; } //驗(yàn)證昵稱(chēng)是否存在 function checkNickNameIsExist(){ var nickName = jQuery("#nickName").val(); var flag = false; jQuery.ajax( { url: "checkNickName?t=" + (new Date()).getTime(), data:{nickName:nickName}, dataType:"json", type:"GET", async:false, success:function(data) { var status = data.status; if(status == "1"){ flag = true; } } }); return flag; } //驗(yàn)證手機(jī)號(hào) function vailPhone(){ var phone = jQuery("#phone").val(); var flag = false; var message = ""; //var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/; var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-3]{1})|(18[5-9]{1}))+\d{8})$/; if(phone == ''){ message = "手機(jī)號(hào)碼不能為空!"; }else if(phone.length !=11){ message = "請(qǐng)輸入有效的手機(jī)號(hào)碼!"; }else if(!myreg.test(phone)){ message = "請(qǐng)輸入有效的手機(jī)號(hào)碼!"; }else if(checkPhoneIsExist()){ message = "該手機(jī)號(hào)碼已經(jīng)被綁定!"; }else{ flag = true; } if(!flag){ jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#phoneP").html(""); jQuery("#phoneP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#phone").focus(); }else{ jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#phoneP").html(""); jQuery("#phoneP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該手機(jī)號(hào)碼可用"); } return flag; } //驗(yàn)證手機(jī)號(hào)是否存在 function checkPhoneIsExist(){ var phone = jQuery("#phone").val(); var flag = true; jQuery.ajax( { url: "checkPhone?t=" + (new Date()).getTime(), data:{phone:phone}, dataType:"json", type:"GET", async:false, success:function(data) { var status = data.status; if(status == "0"){ flag = false; } } }); return flag; } //驗(yàn)證密碼 function vailPwd(){ var password = jQuery("#password").val(); var flag = false; var message = ""; var patrn=/^\d+$/; if(password ==''){ message = "密碼不能為空!"; }else if(password.length<6 || password.length>16){ message = "密碼6-16位!"; }else if(patrn.test(password)){ message = "密碼不能全是數(shù)字!"; }else{ flag = true; } if(!flag){ jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#passwordP").html(""); jQuery("#passwordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#password").focus(); }else{ jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#passwordP").html(""); jQuery("#passwordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該密碼可用"); } return flag; } //驗(yàn)證確認(rèn)密碼 function vailConfirmPwd(){ var confirmPassword = jQuery("#confirm_password").val(); var patrn=/^\d+$/; var password = jQuery("#password").val(); var flag = false; var message = ""; if(confirmPassword == ''){ message = "請(qǐng)輸入確認(rèn)密碼!"; }else if(confirmPassword != password){ message = "二次密碼輸入不一致,請(qǐng)重新輸入!"; }else if(patrn.test(password)){ message = "密碼不能全是數(shù)字!"; }else { flag = true; } if(!flag){ jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#confirmPasswordP").html(""); jQuery("#confirmPasswordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#confirm_password").focus(); }else{ jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#confirmPasswordP").html(""); jQuery("#confirmPasswordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>密碼正確"); } return flag; } //驗(yàn)證郵箱 function vailEmail(){ var email = jQuery("#email").val(); var flag = false; var message = ""; var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if(email ==''){ message = "郵箱不能為空!"; }else if(!myreg.test(email)){ message = "請(qǐng)輸入有效的郵箱地址!"; }else if(checkEmailIsExist()){ message = "該郵箱地址已經(jīng)被注冊(cè)!"; }else{ flag = true; } if(!flag){ jQuery("#emailDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#emailP").html(""); jQuery("#emailP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#email").focus(); }else{ jQuery("#emailDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#emailP").html(""); jQuery("#emailP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該郵箱可用"); } return flag; } //驗(yàn)證郵箱是否存在 function checkEmailIsExist(){ var email = jQuery("#email").val(); var flag = false; jQuery.ajax( { url: "checkEmail?t=" + (new Date()).getTime(), data:{email:email}, dataType:"json", type:"GET", async:false, success:function(data) { var status = data.status; if(status == "1"){ flag = true; } } }); return flag; } //驗(yàn)證驗(yàn)證碼 function vailCode(){ var randCode = jQuery("#randCode").val(); var flag = false; var message = ""; if(randCode == ''){ message = "請(qǐng)輸入驗(yàn)證碼!"; }else if(!checkCode()){ message = "驗(yàn)證碼不正確!"; }else{ flag = true; } if(!flag){ jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#randCodeP").html(""); jQuery("#randCodeP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#randCode").focus(); }else{ jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#randCodeP").html(""); jQuery("#randCodeP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>"); } return flag; } //檢查隨機(jī)驗(yàn)證碼是否正確 function checkCode(){ var randCode = jQuery("#randCode").val(); var flag = false; jQuery.ajax( { url: "checkRandCode?t=" + (new Date()).getTime(), data:{randCode:randCode}, dataType:"json", type:"GET", async:false, success:function(data) { var status = data.status; if(status == "1"){ flag = true; } } }); return flag; } //判斷是否選中 function vailAgree(){ if(jQuery("#agree").is(":checked")){ return true; }else{ alert("請(qǐng)確認(rèn)是否閱讀并同意XX協(xié)議"); } return false; } function delHtmlTag(str){ var str=str.replace(/<\/?[^>]*>/gim,"");//去掉所有的html標(biāo)記 var result=str.replace(/(^\s+)|(\s+$)/g,"");//去掉前后空格 return result.replace(/\s/g,"");//去除文章中間空格}<!DOCTYPE html><html><body><h1>我的第一段 JavaScript</h1><p>請(qǐng)輸入數(shù)字。如果輸入值不是數(shù)字,瀏覽器會(huì)彈出提示框。</p><input id="demo" type="text"><script>function myFunction(){var x=document.getElementById("demo").value;if(x==""){ alert("輸入不能為空"); return;}if(isNaN(x)){ alert("請(qǐng)輸入數(shù)字"); return;}if(x.length!=6){ alert("請(qǐng)輸入6位數(shù)字"); return;}}</script><button type="button" onclick="myFunction()">點(diǎn)擊這里</button></body></html> //驗(yàn)證密碼為數(shù)字字母下劃線(xiàn) function CheckPwd(pwd) { var validStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_~/!@#$%^&*();-+.=,"; for (i = 0; i < pwd.length; i++) { if (validStr.indexOf(pwd.charAt(i)) == -1) { return false; } } return true; } //驗(yàn)證郵箱格式 function checkemail(email) { var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; if (!filter.test(email)) { return false; } return true; } function isEmail(val) { return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_\`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/.test(val); } ///手機(jī)號(hào)碼驗(yàn)證 function checktelephone(cellPhone) { var RegCellPhone = /^([0-9]{11})?$/; falg = cellPhone.search(RegCellPhone); if (falg == -1) { return false; } else { return true; } } //獲取URL參數(shù)值 function getParameter(param) { var query = window.location.search; var iLen = param.length; var iStart = query.indexOf(param); if (iStart == -1) return ""; iStart += iLen + 1; var iEnd = query.indexOf("&", iStart); if (iEnd == -1) return query.substring(iStart); return query.substring(iStart, iEnd); }
以上代碼是小編給大家介紹的js表單驗(yàn)證,代碼簡(jiǎn)單易懂,非常實(shí)用,希望對(duì)大家有所幫助,同時(shí)也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 基于prototype的validation.js發(fā)布2.3.4新版本,讓你徹底脫離表單驗(yàn)證的煩惱
- javascript Zifa FormValid 0.1表單驗(yàn)證 代碼打包下載
- 一個(gè)即時(shí)表單驗(yàn)證的javascript代碼
- 收藏的js表單驗(yàn)證控制代碼大全
- js番茄的表單驗(yàn)證類(lèi)
- js 表單驗(yàn)證方法(實(shí)用)
- JavaScript 表單驗(yàn)證正則表達(dá)式大全[推薦]
- JavaScript 使用正則表達(dá)式進(jìn)行表單驗(yàn)證的示例代碼
- js 常用正則表達(dá)式表單驗(yàn)證代碼
- JS 表單驗(yàn)證大全
- javascript表單驗(yàn)證 - Parsley.js使用和配置
- php用戶(hù)注冊(cè)頁(yè)面利用js進(jìn)行表單驗(yàn)證具體實(shí)例
- 簡(jiǎn)單的js表單驗(yàn)證函數(shù)
- AngularJS實(shí)現(xiàn)表單驗(yàn)證
- jquery表單驗(yàn)證插件(jquery.validate.js)的3種使用方式
- javascript制作的簡(jiǎn)單注冊(cè)模塊表單驗(yàn)證
- JS實(shí)現(xiàn)的通用表單驗(yàn)證插件完整實(shí)例
相關(guān)文章
JavaScript實(shí)現(xiàn)同時(shí)調(diào)用多個(gè)函數(shù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)同時(shí)調(diào)用多個(gè)函數(shù)的方法,以一個(gè)簡(jiǎn)單實(shí)例分析了JavaScript同時(shí)調(diào)用兩個(gè)函數(shù)的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11JavaScript數(shù)據(jù)類(lèi)型轉(zhuǎn)換簡(jiǎn)單方法舉例
JavaScript是一種無(wú)類(lèi)型語(yǔ)言,但同時(shí)JavaScript提供了一種靈活的自動(dòng)類(lèi)型轉(zhuǎn)換的處理方式,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類(lèi)型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2023-12-12js利用Array.splice實(shí)現(xiàn)Array的insert/remove
從一個(gè)數(shù)組中移除一個(gè)或多個(gè)元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。2009-01-01JavaScript之Getters和Setters 平臺(tái)支持等詳細(xì)介紹
現(xiàn)在,JavaScript的Getters和Setters使用非常廣泛,它和每個(gè)JavaScript開(kāi)發(fā)者的切身利益息息相關(guān),我們先來(lái)快速了解什么是Getters和Setters,以及它們?yōu)槭裁春苡杏?然后,我們來(lái)看看現(xiàn)在都有哪些平臺(tái)支持Gettets和Setters2012-12-12微信小程序?qū)崿F(xiàn)滑動(dòng)/點(diǎn)擊切換Tab及scroll-left的使用
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)/點(diǎn)擊切換Tab,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04JavaScript雙向鏈表實(shí)現(xiàn)LFU緩存算法
本文主要介紹了JavaScript雙向鏈表實(shí)現(xiàn)LFU緩存算法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01JS 日期驗(yàn)證正則附asp日期格式化函數(shù)
JS 日期驗(yàn)證正則 asp日期格式化函數(shù),大家以后的日期就是能通過(guò)驗(yàn)證的了。2009-09-09underscore之Chaining_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
本文通過(guò)文字說(shuō)明與代碼的形式給大家介紹了underscore之Chaining的相關(guān)知識(shí),感興趣的朋友一起學(xué)習(xí)吧2017-07-07