後端(tp6)
表單令牌,感覺不好用。雞肋,特别是ajax送出表單的時候,由于頁面本身就不會更新,導緻token更新不及時,無法送出。
前端限制(推薦)
标志控制
假如你是通過回車送出表單,那麼隻能用這種
按鈕不可點選
是通過按鈕送出的話,可以用這個方法
遮罩層
這個同樣是不能處理回車送出表單,需要再使用 标志控制結合使用。我個人是喜歡用這種方式,這種方式,使用者體驗好一點,會給使用者展示網絡請求的狀态
分别給每次請求單獨設定(推薦)
因為不是所有的網絡請求都是需要這個遮罩層的,一般隻用于表單送出請求。這樣控制比較靈活
下面是全局給jquery給一個提示
隻要是用jquery發送ajax請求就會給出遮罩層
$.ajaxSetup({
timeout: 30000, //逾時時間:30秒
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
beforeSend: function (xhr) {
if ($('.mask').length == 0) {
let fdsf = `
<div class="mask">
<div style="color: #f4696b" class="la-line-spin-fade-rotating la-2x">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
`;
$(fdsf).prependTo('body');
}
},
//請求完畢事件
complete: function (xhr, status) {
//不管請求成功還是失敗,都把這個遮罩層給删除
$('.mask').remove();
//逾時timeout,還有success,error等值的情況
if (status === 'timeout') {
xhr.abort()// 逾時後中斷請求
Toast.fire({
icon: 'error',
title: "請求逾時~"
});
} else {
let text = xhr.responseText;
if (isJSON(text)) {
let res = JSON.parse(text);
if (res.code === 419) {
Toast.fire({
icon: 'error',
title: res.msg
});
}
}
}
}
});
标志控制和按鈕不可點選代碼延時
根據業務情況,可以自己改改
//驗證碼發送标志
let send_flag = false;
//發送驗證碼觸發點選事件
$('.send-btn').on('click', function () {
//目前按鈕jq對象
let $send_btn = $(this);
if (send_flag) return;
send_flag = true;
//讓按鈕不可點選
$send_btn.attr('disabled', true);
//擷取表單序列化資料
let data = $('.form').serialize();
//發送ajax發送郵箱驗證碼
$.ajax({
url: "<{url('/validate/email/send')}>",
type: 'POST',
data,
dataType: 'json',
success: function (res) {
//标志恢複
send_flag = false;
//讓按鈕可以點選
$send_btn.attr('disabled', false);
}
})
});
總結
同時推薦,所有的表單送出都通過ajax來完成,原因是,如果是傳統的表單送出,那麼後端驗證不通過,就會再次傳回添加頁面(頁面進行了跳轉),如果不處理已填資料的回顯,那麼如果表單特别多的情況下,使用者會非常反感。
是以,我們推薦用ajax的送出方式,驗證不通過,直接js提示。