JQuery表單驗證(包括:使用者名稱,手機號,密碼,確認密碼,驗證碼60s)

bing發表於2019-02-16

每個專案中都會有登入註冊模組的一些驗證。比如說:使用者名稱我們要驗證位數和是否符合使用者名稱規則;密碼要驗證字母開頭,長度,是否包含下劃線等等,這裡我總結了一下常用的驗證規則,用的是專案中用到的class和id ,如果自己用到的話要對名稱做相應的修改。


驗證使用者名稱的方法:

function username() {
        //reg1 = /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/;// 帳號是否合法(字母開頭,允許4-16位元組,允許字母數字下劃線)
        var reg = /^[0-9a-zA-Z_u3E00-u9FA5]{3,15}$/;//4-16位元組,允許字母數字下劃線
        var userName = $("#userName").val();
        if (userName == "") {
            $("#userNamePrompt").addClass("errorTextColor");
            $("#userNamePrompt").html("<img class=`regImg` src=`images/x.png` />使用者名稱不能為空!");
            return false;
        } else if (!reg.test(userName)) {
            $("#userNamePrompt").addClass("errorTextColor");
            $("#userNamePrompt").html("<img class=`regImg` src=`images/x.png` />不正確的使用者名稱格式!");
            return false;
        } else {
            var userFlag = false;
            $.ajaxSetup({
                async : false
            });
$.ajax({
                url : "user/checkUserName.do",
                data : {
                    userName : $("#userName").val()
                },
                success : function(data) {
                    if (data != "1") {
                        $("#userNamePrompt").addClass("errorTextColor");
                        $("#userNamePrompt").html("<img class=`regImg` src=`images/x.png` />"+data);
                        //userNamePrompt.innerHTML = data.fontcolor("red");
                    } else {
                        $("#userNamePrompt").html("<img class=`regImg` src=`images/v.png` />");
                        return userFlag = true;
                    }
                }
            });
            return userFlag;
        }
    }

驗證手機號的方法 :

function phone() {
    var reg =  /^0?(13[0-9]|15[012356789]|17[0678]|18[0123456789]|14[57])[0-9]{8}$/;
    if ($("#telNo").val() == "") {
        $("#phonePrompt").addClass("errorTextColor");
        $("#phonePrompt").html("<img class=`regImg` src=`images/x.png` />手機號碼不能為空!");
        /*$("#codeMsg").hide();*/
        return false;
    } else if ($("#telNo").val().length < 11) {
        $("#phonePrompt").addClass("errorTextColor");
        $("#phonePrompt").html("<img class=`regImg` src=`images/x.png` />手機號碼長度有誤!");
        /*$("#codeMsg").hide();*/
        return false;
    } else if (!reg.test($("#telNo").val())) {
        $("#phonePrompt").addClass("errorTextColor");
        $("#phonePrompt").html("<img class=`regImg` src=`images/x.png` />手機號不存在!");
        /*$("#codeMsg").hide();*/
        return false;} else {
        var phoneFlag = false;
        $.ajaxSetup({
            async : false
        });
        $.get("user/checkPhone.do",{
            type : 0,
            telNo : $("#telNo").val()
        }, function(data) {
            if (data != "1") {
                $("#phonePrompt").addClass("errorTextColor");
                $("#phonePrompt").html("<img class=`regImg` src=`images/x.png` />"+data);
                //telInfo.innerHTML = data.fontcolor("red");
            } else {
                $("#phonePrompt").html("<img class=`regImg` src=`images/v.png` />");
                $("#codeMsg").show();
                return phoneFlag = true;
            }
        });
        return phoneFlag;
    }
}

密碼的驗證方法 :

function password() {

         //reg2 = /^[a-zA-Z]w{5,17}$/;// 密碼(以字母開頭,長度在6~18之間,只能包含字母、數字和下劃線)
        reg2 = /^[a-zA-Z]w{5,17}$/;
        var reg = /[u4E00-u9FA5]/;
        var userPwd = $(`#userPwd`).val();
        if (userPwd == "") {
            $("#newPwdPrompt").addClass("errorTextColor");

            $("#newPwdPrompt").html("<img class=`regImg` src=`images/x.png` />密碼不能為空!");
            $(`.regQrshow`).hide();
            return false;
        } else if (userPwd.length < 6 || userPwd.length > 16) {
            $("#newPwdPrompt").addClass("errorTextColor");
            $("#newPwdPrompt").html("<img class=`regImg` src=`images/x.png` />長度不符合!");
            $(`.regQrshow`).hide();
            return false;
        } else if(reg.test(userPwd)){
            $("#newPwdPrompt").addClass("errorTextColor");
            $("#newPwdPrompt").html("<img class=`regImg` src=`images/x.png` />密碼不能有中文!");
            $(`.regQrshow`).hide();
        } else {
            return true;
        }
    

確認密碼的驗證方法 :

function repassword() {
        /*這樣的寫法ie瀏覽器下會報錯*/
        /*var pwd = $("#userPwd").val().trim();*/
        /*var repwd = $("#userPwdAgain").val().trim();*/

        var a=$(`#userPwd`).val();
        var pwd=$.trim(a);
        var b=$(`#userPwdAgain`).val();
        var repwd=$.trim(b);
        if (pwd == "") {
            $("#rePwdPrompt").addClass("errorTextColor");
            $("#rePwdPrompt").html("<img class=`regImg` src=`images/x.png` />密碼不能為空!");

            return false;
        } else if (pwd !== repwd) {
            $("#rePwdPrompt").addClass("errorTextColor");
            $("#rePwdPrompt").html("<img class=`regImg` src=`images/x.png` />兩次密碼不一致");
            return false;
        } else {
            $("#rePwdPrompt").addClass("errorTextColor");
            $("#rePwdPrompt").html("<img class=`regImg` src=`images/v.png` />");
            //setFlag($("#userPwdAgain"));
            return true;
        }
    }

60s重新獲取驗證碼

var wait = 60;
function time(btn) {
    if (wait == 0) {
        $(`#voice`).removeAttr("disabled");
        $(`#msg`).removeAttr("disabled");
        $(`#voice`).val("語音驗證");
        $(`#msg`).val("簡訊驗證");
        wait = 60;
    } else {
        btn.attr("disabled", true);
        btn.val(wait + "秒後重發");
        wait--;
        setTimeout(function(){
            time(btn);
        },1000)
    }
}

相關文章