表單驗證提交——submit與button

之前做東西接觸過表單驗證提交，但是都是為了完成工作，做完就做完了，沒有注過表單驗證提交有幾種方法，各方法都有啥區別。今天瞎折騰了一下，對他們研究了一下，如下是我個人的理解：

 

submit：

從字面上看是“提交”的意思，專門為提交而生。他既可以接受點擊提交表單也能接受Enter（回車鍵）提交表單（也就是表單里的控件在獲取焦點的時候回車直接提交表單），這樣就比較人性化。

<form name="myForm" action="http://www.baidu.com" method="get"  >
  name:<input name="name" type="text" /><br />
  <input name="submit" type="submit" value="submit提交" />  
</form>

 當我輸入"xiaomou"回車的時候表單提交了，url為：http://www.baidu.com/?name=xiaomou&submit=submit提交

 

button：

就是個普通的按鈕，接受回車提交表單，但是點擊它的時候沒反應（當然我說的是沒有js的情況下），如要他實現簡單的提交表單，要通過表單提交事件，<input name="button" type="button" value="button提交" onClick="this.form.submit()"/>，這時候你會驚奇的發現它也能像submit按鈕一樣點擊就可以提交表單了

<form name="myForm" action="http://www.baidu.com" method="get"  >
  name:<input name="name" type="text" /><br />
  <input name="button" type="button" value="button提交" onClick="this.form.submit()"/>
</form>

 同樣當我輸入"xiaomou"回車的時候表單提交了，url為：http://www.baidu.com/?name=xiaomou，沒有了submit=submit提交

 

下面通過測試代碼比較一下他們表單驗證提交的不同實現方法：

通過submit按鈕觸發表單的提交事件onSubmit來提交表單

<form name="myForm" action="http://www.baidu.com" method="get" onSubmit="return submitForm()" >
  name:<input name="name" type="text" /><br />
  <input name="submit" type="submit" value="submit提交"/>
</form>
<script>
 function submitForm(){
     var _form=document.forms[0];
     //var _form=document.getElementsByName("myForm")[0]; 
     //var _form=document.getElementsByName("myForm").item(0);    
     return checkName(_form.name,_form.name.value);
 }
 function checkName(id,name) {
  var filter1 = /^[A-Za-z]+$/;
  var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
  if (filter1.test(name)||filter2.test(name)){ 
       return true;
  }
  else {
      alert("請輸入名字，名字上不能出現數字或特殊字符");
      id.focus();
      return false;
  }
 }
</script>

當然也可以在submit按鈕onClick提交，如：

<form name="myForm" action="http://www.baidu.com" method="get" >
    name:<input name="name" type="text" /><br />
    <input name="submit" type="submit" value="submit提交" onClick="return submitForm()"/>
</form>     
<script>
function submitForm(){
    var _form=document.forms[0];
    //var _form=document.getElementsByName("myForm")[0]; 
    //var _form=document.getElementsByName("myForm").item(0);    
    return checkName(_form.name,_form.name.value);
}
function checkName(id,name) {
 var filter1 = /^[A-Za-z]+$/;
 var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
 if (filter1.test(name)||filter2.test(name)){ 
      return true;
 }
 else {
     alert("請輸入名字，名字上不能出現數字或特殊字符");
     id.focus();
     return false;
 }
}
</script>

把上面的代碼換成button按鈕

<form name="myForm" action="http://www.baidu.com" method="get" onSubmit="return submitForm()" >
  name:<input name="name" type="text" /><br />
  <input name="button" type="button" value="button提交"/>
</form>
<script>
 function submitForm(){
     var _form=document.forms[0];
     //var _form=document.getElementsByName("myForm")[0]; 
     //var _form=document.getElementsByName("myForm").item(0);    
     return checkName(_form.name,_form.name.value);
 }
 function checkName(id,name) {
  var filter1 = /^[A-Za-z]+$/;
  var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
  if (filter1.test(name)||filter2.test(name)){ 
       return true;
  }
  else {
      alert("名字不能出現數字或特殊字符");
      id.focus();
      return false;
  }
 }
</script>

如上這一段代碼點擊提交按鈕沒反應，只能接受回車鍵提交事件，那在給botton按鈕加上onClick="this.form.submit()"會不會觸發提交事件呢？結果如願的實現了一半！！——沒有通過驗證就直接提交了，只是直接執行了submit()事件提交了表單而已，沒有執行onSubmit="return submitForm()"里的表單驗證事件就提交了。

<form name="myForm" action="http://www.baidu.com" method="get" onSubmit="return submitForm()">
  name:<input name="name" type="text" /><br />
  <input name="button" type="button" value="button提交" onClick="this.form.submit()"/>
</form>
<script>
 function submitForm(){
     var _form=document.forms[0];
     //var _form=document.getElementsByName("myForm")[0]; 
     //var _form=document.getElementsByName("myForm").item(0);    
     return checkName(_form.name,_form.name.value);
 }
 function checkName(id,name) {
  var filter1 = /^[A-Za-z]+$/;
  var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
  if (filter1.test(name)||filter2.test(name)){ 
       return true;
  }
  else {
      alert("名字不能出現數字或特殊字符");
      id.focus();
      return false;
  }
 }
</script>

 如要讓它接受回車鍵提交與點擊提交都執行表單驗證后再提交上服務器，只能再修改js了，如下代碼修改過后能實現：

<form name="myForm" action="http://www.baidu.com" method="get" onSubmit="return submitForm()">
  name:<input name="name" type="text" /><br />
  <input name="button" type="button" value="button提交" onClick="submitForm()"/>
</form>
<script>
 function submitForm(){
     var _form=document.forms[0];
     if (checkName(_form.name,_form.name.value)){
          _form.submit();
     }else{
         _form.onSubmit=false;
         return false;
     }
 }
 function checkName(id,name) {
  var filter1 = /^[A-Za-z]+$/;
  var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
  if (filter1.test(name)||filter2.test(name)){ 
       return true;
  }
  else {
      alert("名字不能出現數字或特殊字符");
      id.focus();
      return false;
  }
 }
</script>