织梦ajax提交表单及前端验证、前端提示以及30秒后再提交前端代码
<link rel="stylesheet" href="/static/css/zdialog.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!-- <link rel="stylesheet" href="/static/js/zdialog.js"> -->
<script src="/static/js/zdialog.js"></script>
<style>
.form-control{
height: 2.5rem;
font-size: .875rem;
}
input#btn-form1.btn.btn-default:focus{
border-color:#ccc;
webkit-box-shadow:none;
box-shadow:none;
}
input#btn-form2.btn.btn-default:focus{
border-color:#ccc;
webkit-box-shadow:none;
box-shadow:none;
}
.blank20{
clear: both;
height: 2rem;
}
label.error {
float: right;
margin-top: 5px;
margin-right: 5px;
color: red;
font-weight: 200;
}
</style>
<div class="container">
<h2 class="text-center" style="font-weight: 800;">在线留言</h2>
<div class="row">
<div class="col-xs-12">
<form role="form" id='form1' method="post">
<div class="form-group">
<label for="mianji">房屋面积 <em style="color: red;">*</em><small style="color:#ccc;font-weight: 200;margin-left: 20px;">仅需输入数字，面积是平方米</small></label>
<input type="text" class="form-control" id="mianji"
placeholder="请输入房屋面积" name="mianji" autocomplete="off">
</div>
<div class="form-group">
<label for="name">姓名 <em style="color: red;">*</em></label>
<input type="text" class="form-control" id="name"
placeholder="请输入姓名" name="name" autocomplete="off">
</div>
<div class="form-group">
<label for="shouji">手机号 <em style="color: red;">*</em></label>
<input type="text" class="form-control" id="shouji"
placeholder="请输入手机号" name="shouji" autocomplete="off">
</div>
<input value="" type="hidden" id="time" name="time" />
<script type="text/javascript">
window.onload = function(){
var nowDate = new Date();
var str = nowDate.getFullYear()+"-"+(nowDate.getMonth() + 1)+"-"+nowDate.getDate()+" "+nowDate.getHours()+":"+nowDate.getMinutes()+":"+nowDate.getSeconds();
document.getElementById("time").value=str;
}
</script>
<input type="hidden" name="dede_fields" value="name,text;shouji,text;time,text;mianji,text" />
<input type="hidden" name="dede_fieldshash" value="15b519c934da3a1f3512a53e131f5522" />
<input type="button" class="btn btn-default" id="btn-form1" value="提交" onclick="return false;" style="font-size: .96240942rem;color:#fff;width: 100%; height: 3rem; margin: 0px auto; background-color: rgb(255, 156, 0); border-radius: 3px; line-height: 2.75rem;">
</form>
</div>
</div>
</div>
<script>
$(function(){
// 手机号验证
jQuery.validator.addMethod("isPhone", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请填写正确的手机号码");
// 中文姓名验证，先验证中文，再验证个数
jQuery.validator.addMethod('chcharacter', function(value, element){
var tel = /^[u4e00-u9fa5]+$/;
console.log(tel.test(value))
return this.optional(element) || !(tel.test(value));
}, '请输入汉字');
$('#btn-form1').on('click',function(){
var anniu=this
// 设置再次提交的时间限制
var wait = 30;
function time_limit(obj) {
if (wait == 0) {
obj.removeAttribute("disabled");
obj.value = "提交";
wait = 20;
} else {
obj.setAttribute("disabled", true);
obj.value = "重新提交(" + wait + ")";
wait--;
setTimeout(function () {
time_limit(obj)
},
1000)
}
}
// 先验证,并且设置一个状态，验证通过后，才能提交
var status= $("#form1").validate({
rules : {
mianji:{
required : true,
number:true
},
name : {
required : true,
chcharacter:true,
rangelength:[2,5]
},
shouji : {
required : true,
isPhone:true
}
},
messages : {
mianji : {
required : '请输入房屋面积',
number:'请输入数字，面积为平方米',
},
name : {
required : '请输入姓名',
chcharacter:'请输入汉字',
rangelength:'名字中最少2个汉字，最多5个'
},
shouji : {
required : '请填写手机号',
isPhone : '手机号格式不正确',
}
}
});
console.log(status.form())
// 根据验证的状态，进行判断，再提交
if(status.form()){
// var list={};
// var diag = new Dialog();
var name=$('#name').val()
var mianji=$('#mianji').val()
var shouji=$('#shouji').val()
var time=$('#time').val()
var dataString = 'name='+ name + '&mianji='+mianji+'平方米&action=post&shouji=' + shouji + '&time=' + time + '&diyid=2&do=2&dede_fields=name,text;shouji,text;time,text;mianji,text&dede_fieldshash=15b519c934da3a1f3512a53e131f5522&submit=提交';
// console.log(list)
$.ajax({
//请求方式
type : "POST",
//请求的媒体类型
// contentType: "application/json;charset=UTF-8",
// 响应的json返回值
datatype: "json",
//请求地址
url : "http://www.XXX.com/plus/diy.php",
//数据，json字符串
data : dataString,
//请求成功
success : function(result) {
// return false;
// console.log(result);
if(result.code==1){
$.DialogByZ.Alert({Title: "温馨提示", Content: "提交成功，请耐心等待报价",BtnL:"确定"})
// 请求成功之后，执行时间限制的函数
console.log(anniu);
time_limit(anniu)
}
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
})
}else{
return false;
}
})
})
</script>
<div class="blank20"></div>织梦自定义表单diy.php里代码
header('Content-Type:application/json; charset=utf-8');
if($dsql->ExecuteNoneQuery($query))
{
$id = $dsql->GetLastID();
if($diy->public == 2)
{
//diy.php?action=view&diyid={$diy->diyid}&id=$id
// $goto = "diy.php?action=list&diyid={$diy->diyid}";
// $bkmsg = '发布成功，现在转向表单列表页...';
$data=array('code'=>1,'msg'=>'提交成功，请耐心等待');
echo json_encode($data);
}
else
{
// $goto = !empty($cfg_cmspath) ? $cfg_cmspath : '/';
// $bkmsg = '发布成功，请等待管理员处理...';
$data=array('code'=>1,'msg'=>'提交成功，请耐心等待');
echo json_encode($data);
}
// showmsg($bkmsg, $goto);
// showmsg('nihao', 'http://www.baidu.com');
}
}织梦二次开发QQ群
本站客服QQ号：862782808（点击左边QQ号交流），群号(383578617) 
如果您有任何织梦问题，请把问题发到群里，阁主将为您写解决教程！
转载请注明： 织梦模板 » 织梦ajax提交表单及前端验证、前端提示以及30秒后再提交如何实现
标签：
