本文實例講述了jquery實現用戶信息修改驗證輸入方法。分享給大家供大家參考。具體如下:
var realnameFlag = 0;var addressFlag = 0;var zipFlag=0;var cellphoneFlag=0;var homephoneFlag=0;var oldpasswordFlag=1;var newpasswordFlag=1;//判斷emailfunction check_email(){ $("#showSpan").hide(); var email = $.trim($("#email").val()); if (email == null || email == "") { emailFlag = 1; $("#emailMsg").html("<span class='tips'>請輸入郵箱信息</span>"); return; } // 判斷輸入框內是否為郵箱格式 if (email.replace(/[^/x00-/xff]/g, "**").length <= 4 || email.replace(/[^/x00-/xff]/g, "**").length >= 50) { $("#emailMsg").html("<span class='tips'>郵箱長度不正確</span>"); emailFlag = 1; return ; } var reg = /^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$/; if (reg.test(email)) { $("#emailMsg").html(""); emailFlag = 0; return ; } else { $("#emailMsg").html("<span class='tips'>郵箱格式不正確</span>"); emailFlag = 1; return ; }}function check_realname(){ $("#showSpan").hide(); var realname = $.trim($("#realname").val()); // 判斷是否為空 if (realname == null || realname == "") { $("#realnameMsg").html("<span class='tips'>請輸入真實姓名,20個英文或10個漢字</span>"); realnameFlag = 1; } else if (realname.indexOf("??") != -1) { $("#realnameMsg").html("<span class='tips'>請輸入真實姓名,20個英文或10個漢字</span>"); realnameFlag = 1; // 姓名前后不能加? } else if (realname.substring(0, 1) == "?" || realname.substring(realname.length - 1) == "?") { realnameFlag = 1; $("#realnameMsg").html("<span class='tips'>請輸入真實姓名,20個英文或10個漢字</span>"); } else { var reg = new RegExp("^([a-zA-Z]|[//u4E00-//u9FFF])+$", "g"); if (!reg.test(realname)) { $("#realnameMsg").html("<span class='tips'>請輸入真實姓名,20個英文或10個漢字</span>"); realnameFlag = 1; } else if (realname.replace(/[^/x00-/xff]/g, "**").length >= 4 && realname.replace(/[^/x00-/xff]/g, "**").length <= 20) { realnameFlag = 0; $("#realnameMsg").html(""); } else { realnameFlag = 1; $("#realnameMsg").html("<span class='tips'>請輸入真實姓名,20個英文或10個漢字</span>"); } }}function check_cellphone(){ $("#showSpan").hide(); var cellphone = $.trim($("#cellphone").val()); while (true) { var start = cellphone.substring(0, 1); if (start == "0") { cellphone = cellphone.substring(1); } else { break; } } $("#cellphone").val(cellphone); if (cellphone == null || cellphone == "") { $("#cellphoneMsg").html("<span class='tips'>請輸入移動電話號碼</span>"); cellphoneFlag = 1; return; } var re = /^1{1}[3,4,5,8]{1}/d{9}$/; // 判斷是否為數字的正則表達式 if (!re.test(cellphone)) { cellphoneFlag = 1; $("#cellphoneMsg").html("<span class='tips'>請輸入正確的移動電話號碼</span>"); return; } else { cellphoneFlag = 0; $("#cellphoneMsg").html(""); }}function check_homephone(){ $("#showSpan").hide(); var homephone = $.trim($("#homephone").val()); if(homephone == null || homephone == "") { homephoneFlag=0; $("#homephoneMsg").html(""); return ; } var re=/(^(/d{3,4}-)?/d{7,8})$|(^1{1}[3,4,5,8]{1}/d{9}$)/; if(!re.test(homephone)) { homephoneFlag=1; $("#homephoneMsg").html("<span class='tips'>請正確輸入電話號碼,格式為: 000-00000000</span>"); return ; }else { homephoneFlag=0; $("#homephoneMsg").html(""); }}function check_address(){ $("#showSpan").hide(); var address = $.trim( $("#address").val()); // 判斷是否為空 if(address == null || address == "") { $("#addressMsg").html("<span class='tips'>請輸入詳細地址</span>"); addressFlag = 1; }else if (address.replace(/[^/x00-/xff]/g, "**").length > 120) { addressFlag = 1; $("#addressMsg").html("<span class='tips'>長度超長</span>"); } else { addressFlag = 0; $("#addressMsg").html(""); }}function check_zip(){ $("#showSpan").hide(); var zip=$.trim($("#zip").val()); var re=/^[0-9]+$/; if(zip.length != 0 && (!re.test(zip) || zip.length != 6)) { zipFlag=1; $("#zipMsg").html("<span class='tips'>請輸入郵政編碼,由6位數字組成</span>"); }else { zipFlag=0; $("#zipMsg").html(""); }}function check_oldPassword(){ $("#msgSpan").html(""); $("#newpsMsg").html(""); $("#repsMsg").html(""); var oldPS = $.trim($("#oldPassword").val()); if(oldPS == null || oldPS == "") { oldpasswordFlag = 1; $("#oldpsMsg").html("<span class='tips'>請輸入舊密碼</span>"); $(this).focus(); return false; } var re=/^.{6,16}$/; if(!re.test(oldPS)) { oldpasswordFlag = 1; $("#oldpsMsg").html("<span class='tips'>舊密碼輸入長度不正確</span>"); $(this).focus(); return false; } else { oldpasswordFlag = 0; $("#oldpsMsg").html(""); } }function check_newPassword(){ $("#oldpsMsg").html(""); $("#repsMsg").html(""); $("#msgSpan").html(""); $("#repeatPassword").val(""); var newPS = $.trim($("#newPassword").val()); if(newPS == null || newPS == "") { newpasswordFlag=1; $("#newpsMsg").html("<span class='tips'>請輸入新密碼,由6-16位字符組成!</span>"); $(this).focus(); return false; } //var re=/^[A-Za-z0-9_-]{6,16}$/; var re=/^.{6,16}$/; if (newPS.replace(/[^/x00-/xff]/g, "**").length <6 || newPS.replace(/[^/x00-/xff]/g, "**").length > 16) { newpasswordFlag = 1; $("#newpsMsg").html("<span class='tips'>新密碼長度不正確</span>"); $(this).focus(); return false; } if(!re.test(newPS)) { newpasswordFlag = 1; $("#newpsMsg").html("<span class='tips'>新密碼長度不正確</span>"); $(this).focus(); return false; }else { newpasswordFlag = 0; $("#newpsMsg").html(""); } }function check_repeatPassword(){ $("#oldpsMsg").html(""); $("#newpsMsg").html(""); $("#msgSpan").html(""); if( $("#repeatPassword").val()==null || $.trim($("#repeatPassword").val()) =="") { $("#repsMsg").html("<span class='tips'>請輸入重復新密碼</span>"); $(this).focus(); newpasswordFlag = 1; return false; }else if ( $.trim($("#repeatPassword").val()) != $.trim($("#newPassword").val())) { newpasswordFlag = 1; $("#repsMsg").html("<span class='tips'>兩次密碼輸入的不一致!</span>"); $(this).focus(); return false; }else { newpasswordFlag = 0; $("#repsMsg").html(""); }}function check_cardNum(){ $("#vcodeMsg").html(""); $("#psMsg").html(""); $("#strmsg").hide(); var cardnum = $.trim( $("#cardNum").val()); if(cardnum == null || cardnum == "") { $("#numMsg").html("<span class='tips'>請輸入卡號</span>"); cardnumFlag = 1; return false; }else { $("#numMsg").html(""); cardnumFlag=0; }}function check_passWord(){ $("#vcodeMsg").html(""); $("#numMsg").html(""); $("#strmsg").hide(); var password = $.trim( $("#passWord").val()); if(password == null || password == "" ) { passwordFlag = 1; $("#psMsg").html("<span class='tips'>請輸入密碼</span>"); return false; }else { passwordFlag = 0; $("#psMsg").html(""); }}function check_vcode(){ $("#vcodeMsg").html(""); $("#psMsg").html(""); $("#numMsg").html(""); $("#strmsg").hide(); var vcode = $.trim( $("#vcode").val()); if(vcode == null || vcode =="") { vcodeFlag = 1; $("#vcodeMsg").html("<span class='tips'>請輸入驗證碼</span>"); return false; } var re= /^[0-9]*$/; if(!re.test(vcode)) { vcodeFlag = 1; $("#vcodeMsg").html("<span class='tips'>請正確輸入驗證碼</span>"); return false; }else { vcodeFlag = 0; $("#vcodeMsg").html(""); }}$(document).ready(function(){/*** 修改用戶信息驗證 begini */// begin email$("#email").focus(function() { check_email();});// 郵箱格式判斷$("#email").blur(function(){check_email();});//end email//bengin realname$("#realname").focus(function() {check_realname();});// 校驗realname是否正確$("#realname").blur(function() {check_realname();});//end realname//bengin cellphone$("#cellphone").focus(function() { check_cellphone(); });// 手機號碼格式判斷$("#cellphone").blur(function() { check_cellphone(); });//end cellphone//bengin homephone$("#homephone").focus(function(){ check_homephone(); });$("#homephone").blur(function(){ check_homephone();});//end homephone//bengin addr// 校驗address是否正確$("#address").focus(function(){ check_address(); });$("#address").blur(function() { check_address();});//end addr//bengin zip$("#zip").focus(function(){ check_zip(); });$("#zip").blur(function(){ check_zip(); });//end zip//獲取市級$("#province").change(function(){ var province=$(this).val(); $.post("_jquery", {"type":"getProvince" , province:province}, function(msg){ $("#city").html(msg); $("#region").html(""); });});//獲取縣級$("#city").change(function(){ var city=$(this).val(); $.post("_jquery", {"type":"getCity" , city:city}, function(msg){ $("#region").html(msg); });});/*** 修改用戶信息驗證 end ***********//***------密碼修改驗證 begin *************///begin oldpassword$("#oldPassword").focus(function(){ check_oldPassword();});$("#oldPassword").blur(function(){ check_oldPassword();});//end oldpassword//begin newpassword$("#newPassword").focus(function(){ check_newPassword();});//newpassword$("#newPassword").blur(function(){ check_newPassword();});// repeatpassword$("#repeatPassword").focus(function(){ check_repeatPassword();});$("#repeatPassword").blur(function(){ check_repeatPassword();});/***------密碼修改驗證 end *************//**** ---------卡查詢表單提交驗證 begin ***********/var cardnumFlag = 0;var passwordFlag = 0;var vcodeFlag = 0; $("#cardNum").focus(function(){ check_cardNum();});$("#cardNum").blur(function(){ check_cardNum();});$("#passWord").focus(function(){ check_passWord();});$("#passWord").blur(function(){ check_passWord();});$("#vcode").focus(function(){ check_vcode(); }); $("#vcode").blur(function(){ check_vcode(); });$("#formsubmit").click(function(){ $("#strmsg").hide(); $("#numMsg").html(""); $("#psMsg").html(""); $("#vcodeMsg").html(""); var re= /^[0-9]*$/; if(cardnumFlag != 0 || $.trim($("#cardNum").val()) == "" || $("#cardNum").val() == null ) { $("#cardNum").focus(); return ; } if(passwordFlag != 0 || $.trim($("#passWord").val()) == "" || $("#passWord").val() == null) { $("#passWord").focus(); return ; } if(($("#vcode").val() != "" && !re.test($("#vcode").val())) || vcodeFlag != 0 || $("#vcode").val() == "" ) { $("#vcode").focus(); return ; } $("#cardform").submit();});/**** ---------卡查詢表單提交驗證 end ***********///用戶訂單取消,$("#cancelreason").focus(function(){ $("#errorinfo").html(""); $("#errorinfo").removeClass("tips");});$("#cancelreason").bind('input propertychange', function() { var maxLength = 65; if ($(this).val().length > maxLength) { $(this).val($(this).val().substring(0, maxLength)); } return false;})//-----});//end ready//修改用戶信息表單提交function formsubmit(){ $("#showSpan").hide(); var province=$("#province").val(); var city=$("#city").val(); var region=$("#region").val(); $("#emailMsg").html(""); $("#realnameMsg").html(""); $("#cellphoneMsg").html(""); $("#homephoneMsg").html(""); $("#szcode").html(""); $("#addressMsg").html(""); $("#zipMsg").html(""); if(emailFlag != 0 || $("#email").val()== null || $("#email").val()== "") { $("#email").focus(); return ; } if(realnameFlag != 0 || $("#realname").val()== null || $("#realname").val()== "") { $("#realname").focus(); return ; } if($("input[name=sex]:checked").val()==null||$("input[name=sex]:checked").val()==""){ alert("請選擇性別"); $("#sex").focus(); return; } if(cellphoneFlag != 0) { $("#cellphone").focus(); return ; } if(homephoneFlag != 0) { $("#homephone").focus(); return ; } if( province == "" || city == "" || region== "" || province == null || city == null || region== null) { $("#szcode").html("<span class='tips'>請選擇地區</span>"); return ; } if(addressFlag != 0 || $("#address").val() == null || $("#address").val() == "") { $("#address").focus(); return ; } if(zipFlag != 0) { $("#zip").focus(); return ; } $("#myform").submit();}//修改用戶信息表單重置function formreset(){ $("#showSpan").hide(); document.forms["myform"].reset(); $("#emailMsg").html(""); $("#realnameMsg").html(""); $("#cellphoneMsg").html(""); $("#homephoneMsg").html(""); $("#addressMsg").html(""); $("#zipMsg").html(""); $("#szcode").html(""); $("#province").html($("#hprovince").val()); $("#city").html($("#hcity").val()); $("#region").html($("#hregion").val());}//修改密碼提交formfunction psformSubmit(){ $("#oldpsMsg").html("");; $("#newpsMsg").html(""); $("#repsMsg").html(""); var oldps = $.trim($("#oldPassword").val()); var newps = $.trim( $("#newPassword").val()); var reps = $.trim($("#repeatPassword").val()); if( oldpasswordFlag != 0 || oldps =="" || oldps ==null ) { $("#oldPassword").focus(); return ; } if(newpasswordFlag != 0 || newps =="" || newps ==null ) { $("#newPassword").focus(); return ; } if( newpasswordFlag != 0 || reps == null || reps =="" || reps != newps) { $("#repeatPassword").focus(); return ; } $("#psform").submit();}//獲取驗證碼function dochange(){ ///$("#vcodeImg").attr("src","_verifycode?" + new Date()); var imgObj="#vcodeImg"; $(imgObj).fadeOut('fast', function(){ var datenow = new Date(); $(this).attr('src', '_verifycode?ver=' + datenow.getMilliseconds()).delay(200).fadeIn('slow'); });}function removefavorite(goodsid){ if(confirm('確定刪除商品嗎?')) { document.location.href="/myremovefavorite.html?goodsid="+goodsid; }}function selectProvince(value){ //導出省份下市區 信息。 $.post("_jquery", {"type":"getProvince",province:value}, function(data){ $("#city").html(data); $("#region").html(""); });}function selectCity(value){ //導出市區 下縣城信息。 $.post("_jquery", {"type":"getCity",city:value}, function(data){ $("#region").html(data); });}
希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答