HTML中ajax表单提交CSRF保护

除了检查被作为 POST 参数传递的 CSRF token 之外, VerifyCsrfToken 中间件也会检查请求标头中的 X-CSRF-TOKEN 。例如，你可以将其保存在 meta 标签中：

一旦你创建了 meta 标签，你就可以使用 jQuery 之类的函数库将 token 自动地添加到所有的请求头中。这简单、方便的为你的应用的 AJAX 提供了 CSRF 保护：

这种处理方法可行，把html符号过滤替换，后台接收时再替换回去。

比如需要提交的变量message，替换如下：

message=message.replace(/</g,"@左尖括号@")

message=message.replace(/>/g,"@右尖括号@")

message=message.replace(/\//g,"@左斜杠@")

message=message.replace(/=/g,"@等号@")

message=message.replace(/&/g,"@and@")

message=message.replace(/\"/g,"@双引号@")

message=message.replace(/ /g,"@空格@")

替换完毕后发送，后台接收数据时候又替换回去。测试可用。

//H5自带的验证是比较简单的验证，不完美，只适合比较简单的验证。具体使用方法如下：

//需求：用户名：不能为空，长度在6至12之间，内容为英文

//HTML

<input type="text" id="user" required minlength=6 maxlength=12 pattern="^[a-zA-Z]+$">

//js

var user = document.getElementById("user")

user.onblur = function(){

if(user.validity.valueMissing){

user.setCustomValidity("用户名为空.")

}else if(user.validity.tooShort){

user.setCustomValidity("用户名过短.")

}else if(user.validity.tooLong){

user.setCustomValidity("用户名过长.")

}else if(user.validity.patternMismatch){

user.setCustomValidity("用户名输入错误.")

}

}

//required属性：验证是否为空

//pattern属性 ：匹配正则

//validity属性：是H5底层的逻辑提供，原本已经存在的。元素通过elem.validity获得validityState对象

//例如可以获得的对象有：valueMissing 验证是否为空 返回true或false

//再例如：patternMismatch 验证是否匹配正则 同样返回 true或false

怎么使用ajax提交？

你可以将我上面的代码封装成一个check方法，用来检查表单内容是否正确，在用户点击提交按钮的时候不是直接submit表单，而是触发一个表单提交前验证方法check，验证通过后，将表单中的元素获取到，保存在一个变量中下面以jquery的ajax为例：

var jsonData={'userName':user.value}

$.ajax({

url:'接口地址'，

type：'post',

dataType:'json',

data:jsonData,

success:function(data){

//发送成功后的回调，data包含成功时后台返回的数据

},

error:function(res){

//发送失败时的回调，res包含失败时的后台返回的数据

}

})

//特别要注意一点的是如果要用ajax发送数据，就不要将提交按钮的type设置为submit，否则form还是会自动提交

---