html5表单+jquery异步验证

前一阵子在http://www.w3school.com.cn上学习html5，我感觉这东西给了我一种不一样的感觉。从我们我们用的最多的表单来说，html5支持自己验证表单。最后用jquery和jquery.form进行表单的提交。同时还能收到后台返回的response。实现异步的表单提交。感觉略爽。一下子我就少些了好多的代码。就上一个项目来说，我写的一大堆的表单验证。搞到最后还容易出问题。现在有一种拨开迷雾发现新大陆的感觉。给我感触最深的就是input表单。

<script type="text/javascript" src="../js/jquery-1.4.4.min.js" ></script>
<script type="text/javascript" src="../js/jquery.form.js" ></script>

导入jquery和jquery.form

<form id="formtest" >
<input  type="email"  required name="email" placeholder="123@163.com"/>
<input  type="text"  name="telephone" placeholder="13921219802" pattern="^[1][358][0-9]{9}$" title="例如:13921219802"/>
<input  id="submit" type="submit" value="提交" ;/>
</form>

效果如上，

 type="email"  指用的email类型，提交表单的时候会自动验证是否符合格式要求



 placeholder="123@163.com"是在输入框显示的东西，提示输入什么比如输入123@163.com类似的东西。

pattern="^[1][358][0-9]{9}$"  正则表达式，

title="例如:13921219802"/>当输入不符合正则表达式时候会提示这个信息



required这字段出现表示这是必填字段。



这些都是html5上的表单验证，关键的是在下面，如果我们想要提交form表单后页面不跳转，或者说是收到后台返回的数据后选择操作，那么我么就需要异步请求。

<script type="text/javascript">
$(document).ready(function() {
var options = {
//target:        '#output2',   // target element(s) to be updated with server response
beforeSubmit:  showRequest,  // pre-submit callback
success:      function(response){
showResponse(response);
} ,  // post-submit callback

// other available options:
url:       "/SpringTest/testform.do",        // override for form's 'action' attribute
type:      "post"        // 'get' or 'post', override for form's 'method' attribute
//dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true        // clear all form fields after successful submit
//resetForm: true        // reset the form after successful submit

// $.ajax options can be used here too, for example:
//timeout:   3000
};
// 绑定表单提交事件处理器
$("#formtest").submit(function() {
//提交表单
$(this).ajaxSubmit(options);

// !!! Important !!!
// 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回false
return false;
});
// pre-submit callback
function showRequest() {
alert("before submit");
return true;//返回true才可以进行下一步
}
// post-submit callback
function showResponse(response) {
alert("submit success"+response);
}
});

</script>

beforeSubmit和success指定两个回调函数，beforeSubmit是在提交前的操作，比如是否确认提交，

   function showRequest() {
                    alert("before submit");
                    return true;//返回true才可以进行下一步
     } 

就是提交前的操作，返回true才可以下一步操作，进行提交，

success我们可以获得后台返回的数据

我们拿到后台数据后就可以根据数据来做不同的操作，比如返回false，你可以提示此账户已经注册过，请重新填写之类什么的。

url 请求地址，不多说

type 请求方式  不多说。
但是有一点要注意，比如我们用不支持html5的浏览器，比如IE6，这些不会没有用，什么验证全部都没有用的，也就是我们输入什么就能往后台提交什么。这就是很不安全的。所以为了安全，还是要通过jquery来写各种正则表达式的格式验证，html5看上去很方便，但是浏览器不支持还是很不安全的。