一個簡單的jquery ajax表單提交 帶數據校驗 layer彈框提示

 

 

<input type="hidden"  id="url" value="index.php"/>
    <form id="form">
        <label>姓名<sup>*</sup> <input type="text" name="name" id="name" placeholder="姓名" value=""></label>
        <label>電話<sup>*</sup> <input type="text" name="mobile" id="mobile" placeholder="手機號碼" value=""></label>
      
        <label>意向城市<sup>*</sup>
            <input type="text" name="city" id="city" placeholder="意向城市" value="">
        </label>
        <button type="button"  onclick="submitData()">提交</button>
    </form>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/layer.min.auto.js"></script>

<script>

    //ajax提交
    function submitData() {

        //數據驗證
        if ($('#name').val() == '') {
            layer.msg('姓名不能為空');

            return false;
        }
        if ($('#mobile').val() == '') {
            layer.msg('手機號碼不能為空');

            return false;
        }
        var phone = $('#mobile').val();
        var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
        if(!myreg.test(phone)){
            layer.msg ( "請輸入有效的手機號碼！");
            return false;
        }


        if ($('#city').val() == '') {
            layer.msg('意向城市不能為空');

            return false;
        }

        var url = $("#url").val();
        var data = $("#form").serialize();
        $.ajax({
            url: url,
            type: "POST",
            url: url,
            data: data,
            async: false,

            success: function (res) {

                var obj = jQuery.parseJSON(res);

                if (obj.rst == 1) {

                    layer.msg("提交成功");

                    setTimeout("location.reload()",2000);

                } else {
                    layer.msg(obj.msg);

                    setTimeout("location.reload()",2000);

                }
            }
        });

    }
</script>