<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Document</title>
</head>
<body>
<form action="{$actionUrl}fuyuandian/index.html" method="post" id="form">
???<p class="fi_top">填写信息预约</p>
???<ul class="fill_ui">
???????<li>
???????????<div class="l">缘主姓名</div>
???????????<div class="r"><input type="text" name="name" placeholder="请输入您的姓名" id="username"/></div>
???????</li>
???????<li>
???????????<div class="l">联系电话</div>
???????????<div class="r"><input type="text" name="phonenumber" placeholder="请输入电话号码" id="phone"/></div>
???????</li>
???????<li>
???????????<div class="l">开光需求</div>
???????????<div class="r"><textarea name="kaiguangxuqiu" placeholder="请输入您的开光需求" id="txtarea"></textarea></div>
???????</li>
???</ul>
???<input type="button" value="确认预约" class="fi_btn" id="formBtn"/>
???<input type="hidden" name="form_id" value="7">
</form>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
???$(function () {
???????$("#formBtn").click(function () {
???????????var regName =/^[\u4e00-\u9fa5]{2,4}$/;
???????????var regPhone=/^1[0-9]{10}$/;
???????????var xm =$(‘#username‘).val();
???????????var phone =$(‘#phone‘).val();
???????????var txtarea =$(‘#txtarea‘).val();
???????????if(xm==‘‘){
???????????????alert(‘请输入姓名‘);
???????????????return false;
???????????}
???????????if(!regName.test(xm)){
???????????????alert(‘请输入汉字‘);
???????????????return false;
???????????}
???????????if (phone==‘‘) {
???????????????alert(‘请输入手机号码‘);
???????????????return false;
???????????}
???????????if(!regPhone.test(phone)){
???????????????alert(‘请输入正确的手机号码‘);
???????????????return false;
???????????}
???????????if (txtarea==‘‘) {
???????????????alert(‘请输入开光需求‘)
???????????????return false;
???????????}
???????????var postUrl = $("#form").attr(‘action‘);
???????????$.ajax({
???????????????url: postUrl,
???????????????data: $("#form").serialize(),
???????????????type: ‘post‘,
???????????????dataType: ‘json‘,
???????????????beforeSend: function () {
???????????????????// 禁用按钮防止重复提交
???????????????????$("#formBtn").attr({ disabled: "disabled" });
???????????????????$("#formBtn").val(‘正在提交中...‘)
???????????????},
???????????????success: function (res) {
???????????????????if (res.code == ‘1‘) {
???????????????????????alert(‘您已预约成功，请保持电话畅通‘);
???????????????????????$("#formBtn").val(‘已成功提交‘)
???????????????????} else {
???????????????????????alert(res.msg);
???????????????????????$("#formBtn").removeAttr("disabled");
???????????????????}
???????????????}
???????????}); ???
???????});
???});
</script>
</body>
</html>
ajax ?禁用按钮防止重复提交
原文地址：https://www.cnblogs.com/yangpeng-jingjing/p/8425472.html