最近沒有項目做,有點空余時間,小編把日常比較常用的js表單驗證代碼整理分享到武林網平臺,供大家學習,需要的朋友參考下吧!
注冊驗證:
<script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script>//驗證表單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();}//驗證昵稱function vailNickName(){var nickName = jQuery("#nickName").val();var flag = false;var message = "";var patrn=/^/d+$/;var length = getNickNameLength();if(nickName == ''){message = "昵稱不能為空!";}else if(length<4||length>16){message = "昵稱為4-16個字符!";} else if(checkNickNameIsExist()){message = "該昵稱已經存在,請重新輸入!";}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>該昵稱可用");}return flag;}//計算昵稱長度function getNickNameLength(){var nickName = jQuery("#nickName").val();var len = 0;for (var i = 0; i < nickName.length; i++) {var a = nickName.charAt(i); //函數格式:stringObj.match(rgExp) stringObj為字符串必選 rgExp為正則表達式必選項 //返回值:如果能匹配則返回結果數組,如果不能匹配返回nullif (a.match(/[^/x00-/xff]/ig) != null){len += 2;}else{len += 1;}}return len;}//驗證昵稱是否存在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;}//驗證手機號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 = "手機號碼不能為空!";}else if(phone.length !=11){message = "請輸入有效的手機號碼!";}else if(!myreg.test(phone)){message = "請輸入有效的手機號碼!";}else if(checkPhoneIsExist()){message = "該手機號碼已經被綁定!";}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>該手機號碼可用");}return flag;}//驗證手機號是否存在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;}//驗證密碼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 = "密碼不能全是數字!";}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;}//驗證確認密碼function vailConfirmPwd(){var confirmPassword = jQuery("#confirm_password").val();var patrn=/^/d+$/;var password = jQuery("#password").val();var flag = false;var message = "";if(confirmPassword == ''){message = "請輸入確認密碼!";}else if(confirmPassword != password){message = "二次密碼輸入不一致,請重新輸入!";}else if(patrn.test(password)){message = "密碼不能全是數字!";}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;}//驗證郵箱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 = "請輸入有效的郵箱地址!";}else if(checkEmailIsExist()){message = "該郵箱地址已經被注冊!";}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;}//驗證郵箱是否存在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;}//驗證驗證碼function vailCode(){var randCode = jQuery("#randCode").val();var flag = false;var message = "";if(randCode == ''){message = "請輸入驗證碼!";}else if(!checkCode()){message = "驗證碼不正確!";}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;}//檢查隨機驗證碼是否正確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("請確認是否閱讀并同意XX協議");}return false;}function delHtmlTag(str){ var str=str.replace(/<//?[^>]*>/gim,"");//去掉所有的html標記 var result=str.replace(/(^/s+)|(/s+$)/g,"");//去掉前后空格 return result.replace(//s/g,"");//去除文章中間空格}<!DOCTYPE html><html><body><h1>我的第一段 JavaScript</h1><p>請輸入數字。如果輸入值不是數字,瀏覽器會彈出提示框。</p><input id="demo" type="text"><script>function myFunction(){var x=document.getElementById("demo").value;if(x==""){ alert("輸入不能為空"); return;}if(isNaN(x)){ alert("請輸入數字"); return;}if(x.length!=6){ alert("請輸入6位數字"); return;}}</script><button type="button" onclick="myFunction()">點擊這里</button></body></html> //驗證密碼為數字字母下劃線function CheckPwd(pwd) {var validStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_~/!@#$%^&*();-+.=,";for (i = 0; i < pwd.length; i++) {if (validStr.indexOf(pwd.charAt(i)) == -1) {return false;}}return true;}//驗證郵箱格式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);}///手機號碼驗證function checktelephone(cellPhone) {var RegCellPhone = /^([0-9]{11})?$/;falg = cellPhone.search(RegCellPhone);if (falg == -1) {return false;} else {return true;}}//獲取URL參數值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表單驗證,代碼簡單易懂,非常實用,希望對大家有所幫助,同時也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答