Html5表单验证required和ajax异步不同时使用问题

一、问题描述

1.1 需求描述

近期在公司里面开发一个页面，需求是这样的，用户注册成功后或提交某一个表单以后需要对成功或失败进行一个反馈，要使用模态框的形式进行反馈，表单提交的时候用ajax异步提交。但是在使用input标签的type=“submit”时会使页面刷新，required的验证也要由submit或者调用submit（）方法。但是页面会刷新一下（或者也叫做重定向），这样回调函数就不起作用。

1.2 解决思路

1. 防止因为submit的页面刷新（重定向）
2. 提交表单对页面进行一个清空
3. 模态框的调用可以写在ajax回调函数中

二、ajax部分代码编写

//防止submit刷新的ajax代码写法
function sub(){
	var opinObj ={};//对象
	opinObj.entGuid=$('#ent.Guid').val();//赋予对象属性值
	$.ajax({
		url:"http://localhost:8080/zbq-api/opinfeedback/insertOpin.do",
		data:JSON.stringify(opinObj),
		contentType:"application/json;charset=UTF-8",
		dataType:"json",
		success:function(data){
			if(data.code=="000000"){//请求接口回调成功码
		        $("button[type='rest']").trigger("click");//设置隐藏清空键，触发以后清空表单
				$("#myModal").modal();
			}else{
				console.log("失败");
			}
		}
   })
return false;//返回false在html页面上<form οnsubmit="sub()">...</form>这样就可以防止页面的刷新了
}

三、h5表单验证required使用

只要调用函数如上章节所示，那么下面就可以使用原生h5页面的required表单验证。

3.1 验证成功或失败的css样式

input:required {
background-color:lightblue;
}

input:required:invalid {
background-color:red;
}

3.2 html页面表单部分代码：

<form  onsubmit="sub()">//用这种方式提交就可以实现required的使用，以及模态框的调取。
   用户名： <input type="text" required"> 
	 密码： <input type="password" required>
   手机号： <input type="text" title="输入11位有效的手机号" pattern="1[0-9]{10}" required/>
       
	<input type="button" value="返回">
	<input type="submit" value="提交">
</form>