jQuery實現表單驗證及提交

 以下代碼實現用戶在提交信息時驗證表單信息是否符合規定，要求必須全部信息的填寫都符合規定之后才能提交數據

html

<div class="aaaaa" style="width: 95vw;height:70vw;margin: 0 auto;">

    <div style="color: red;">
        *請填入個人信息，完成報名
    </div>

    <div class="list">
        <div>姓名：</div>
        <input name="name" type="text">
    </div>
    <div class="list">
        <div>年齡：</div>
        <input name="age" type="text">
    </div>
    <div class="list">
        <div>聯系電話：</div>
        <input name="tel" type="text">
    </div>
    <div class="list">
        <div>家庭住址：</div>
        <input name="address" type="text">
    </div>

    <div id="submit" style="text-align: center;margin-top: 4vw">
        <div style="padding: 2vw 6vw;background-color:limegreen;color:white;font-size:5vw;letter-spacing:1vw;border-radius: 1vw;">
            確認報名
        </div>
    </div>

</div>

 

css

    .list{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items:center;
        border-bottom: 1px solid #e4e4e4;
        padding: 2vw 0;
        font-size: 5vw;
    }

    .list div{
        width: 30%;
        text-align: right;
    }

    .list input{
        width: 70%;
        height:8vw;
        border-style: none;
        background-color: transparent;
    }

 

jquery

    $('#submit').click(function () {

        var name = $('[name=name]').val();
        var age = $('[name=age]').val();
        var tel = $('[name=tel]').val();
        var address = $('[name=address]').val();

        //驗證姓名
        if (name != '') {

            var names = parseInt(name);//驗證是否為數字
            if(isNaN(names)){

                if(/[@#\$%\^&\*]+/gi.test(name)) { //驗證是否含有特殊字符
                    alert('姓名不能帶有特殊字符')
                    return
                }

                if (name.length > 6){
                    alert('姓名長度不符合規定，請輸入六個或以下漢字')
                    return
                }

            } else{
                alert("姓名不能是數字");
                return
            }

        }else{
            alert('用戶名不能為空')
            return
        }

        //驗證年齡
        if (age != '') {

            var ages = parseInt(age);//驗證是否為數字，如果變量age是字符類型的數則轉換為int類型 如果不是則ages為NaN
            if(!isNaN(ages)){

                if (ages > 120 || ages<0){//驗證年齡字段是否合法，這里取0-120歲
                    alert('請輸入正確的年齡')
                    return
                }

            } else{
                alert("'"+age+"'" +"不是數字");
                return
            }


        }else{
            alert('年齡不能為空')
            return
        }

        //驗證聯系電話
        if (tel != '') {

            var tels = parseInt(tel);//驗證是否為數字
            if(!isNaN(tels)){

                var reg = /(1[3-9]\d{9}$)/;
                if (!reg.test(tel)) { //驗證手機號碼格式
                    alert("請輸入正確格式的手機號碼！");
                    return false;
                }

            } else{
                alert("聯系電話必須是數字");
                return
            }

        }else{
            alert('聯系電話不能為空')
            return
        }

        //驗證地址
        if (address != '') {

            var addresss = parseInt(address);//驗證是否為數字
            if(isNaN(addresss)){

                if (address.length < 3){
                    alert('地址長度不符合規定，請輸入至少3個漢字')
                    return
                }

            } else{
                alert("地址不能是數字");
                return
            }

        }else{
            alert('地址不能為空')
            return
        }


        $.ajax({
            url: "?op=submitApply",    // 提交到controller的url路徑，在本頁面就直接用?代替文件名即可，省略文件名，別的頁面則需寫全路徑
            type: "post",    // 提交方式
            data: {"name": name,"age":age,'tel':tel,'address':address},  // data為String類型，必須為 Key/Value 格式。
            dataType: "json",    // 服務器端返回的數據類型
            success: function (data) {    // 請求成功后的回調函數，其中的參數data為controller返回的map,也就是說,@ResponseBody將返回的map轉化為JSON格式的數據，然后通過data這個參數取JSON數據中的值

                if (data.code==1){
                    alert('報名成功！')
                    location.href='index.php';
                }

            },
        });

    })

 

最終實現界面如下 

 

 補漏：若有需要郵箱驗證的可以用這段驗證代碼，html和變量聲明根據電話的格式自行補上

                //驗證郵箱
                if (mail!= '') {

                    var mails = parseInt(mail);//驗證是否為數字
                    if(!isNaN(mails)){

                        //正則表達式驗證電子郵件格式
                        var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; 
                        // var reg2 = /(\d{4})-(\d{7})/; 
                        if (!reg.test(mail) ) { 
                            alert("請輸入正確格式的電子郵件地址！");
                            return false;
                        }

                    } else{
                        alert("郵箱不能全是數字");
                        return
                    }

                }else{
                    alert('郵箱不能為空')
                    return
                }