如何用html5自带验证 但是用ajax提交

//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还是会自动提交

History 对象从 HTML4 开始引入，HTML5 中增加了 pushState, replaceState 两个方法，和 popstate 事件。下面作一些简单的介绍。

1. pushState()方法

pushState() 的作用是往历史记录的堆栈中压入一条记录，该方法有三个参数：

state object —— 一个对象，用于保存状态信息，当 popstate 事件被触发时，popstate 事件对象的 state 属性会包含相应的 state object 的拷贝。state object 的容量很小（Firefox 中强制为 640k），如果需要储存较大的数据，建议使用 localStorage 或 sessionStorage。

title —— 即被压入的历史记录的页面的标题，该属性暂时被所有浏览器忽略，实际开发时可以填空字符或一个简短的标题。

url —— 新的历史记录的地址，可以是相对路径或绝对路径，若为相对路径则以当前 url 为基址。

2. replaceState()方法

replaceState() 方法与 pushState() 方法类似，参数与 pushState() 也相同，但 replaceState() 方法会修改当前的历史记录而并非创建新的记录，因此在需要更新当前历史记录的 state object 或 URL 时，使用该方法会更加合适。

3. popstate 事件

popstate 事件会在激活的历史记录发生变化（如前进、后退、调用 pushState 或 replaceState 方法）时触发在 window 对象上。如上面所描述，如果被激活的历史记录由 pushState 创建或是被 replaceState 修改，则 popstate 事件的状态属性将包含相应的 state object 的拷贝，开发者可以在 popstate 的回调中调用这些之前保存在 state object 中的信息。

值得注意的是，Chrome 会在打开页面（包括第一次打开页面）以及页面刷新时产生 popstate 事件而 Firefox 则不会，这会为开发带来一些麻烦，但下面会给出解决方案。

---