# 后端(tp6) 表单令牌，感觉不好用。鸡肋，特别是ajax提交表单的时候，由于页面本身就不会更新，导致token更新不及时，无法提交。 # 前端限制(推荐) ## 标志控制 假如你是通过回车提交表单，那么只能用这种 ## 按钮不可点击 是通过按钮提交的话，可以用这个方法 ## 遮罩层 这个同样是不能处理回车提交表单，需要再使用 标志控制结合使用。我个人是喜欢用这种方式，这种方式，用户体验好一点，会给用户展示网络请求的状态 ### 分别给每次请求单独设置(推荐) 因为不是所有的网络请求都是需要这个遮罩层的，一般只用于表单提交请求。这样控制比较灵活 ### 下面是全局给jquery给一个提示 只要是用jquery发送ajax请求就会给出遮罩层 ~~~bash $.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 }); } } } } }); ~~~ ## 标志控制和按钮不可点击代码延时 根据业务情况，可以自己改改 ~~~javascript //验证码发送标志 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提示