前一陣子在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>
 

<form id="formtest" >
		<input  type="email"  required name="email" placeholder="[email protected]"/>
		<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型別，提交表單的時候會自動驗證是否符合格式要求

<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>