jQuery实现表单验证及提交

时间：2024-03-02 12:04:47

 以下代码实现用户在提交信息时验证表单信息是否符合规定，要求必须全部信息的填写都符合规定之后才能提交数据

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
                }

相关文章