html5的表单控件提供了很多格式检测功能,可以省去很多烦人的javascript验证代码,例如pattern属性和require属性。
问题:
一般表单的提交用的都是用button然后用ajax来提交,但是用button就不能触发HTML5的自带表单验证,用submit的话就又会直接提交表单
解决办法:
就是依然使用 input submit作为提交按钮,但在表单的提交事件里阻止进一步动作,转为ajax发送请求,这里贴出JQuery的代码:
<html>
<head>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
</head>
<body>
<form action="" id='form'>
username: <br>
<input type="text" name="username" value="" required="required"> <br>
password: <br>
<input type="text" name="password" value="" required="required"> <br><br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" language="javascript">
$("#form").on("submit", function(ev) {
$.ajax({
......
});
//阻止submit表单提交
ev.preventDefault();
//或者return false
//return false;
});
</script>
</body>
</html>
注意: H5自带的验证只是比较简单的验证,不是很完美,只适合做比较简单的验证 , 最好是用jQ的Validation插件或者其他表单验证插件。
还有就是form标签上的method属性会影响submit事件