一个简单的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>
posted @ 2018-01-25 14:22  Mr、桔子  阅读(2709)  评论(0编辑  收藏  举报