表单验证提交——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来提交表单

 1 <form name="myForm" action="http://www.baidu.com" method="get" onSubmit="return submitForm()" >
 2   name:<input name="name" type="text" /><br />
 3   <input name="submit" type="submit" value="submit提交"/>
 4 </form>
 5 <script>
 6  function submitForm(){
 7      var _form=document.forms[0];
 8      //var _form=document.getElementsByName("myForm")[0]; 
 9      //var _form=document.getElementsByName("myForm").item(0);    
10      return checkName(_form.name,_form.name.value);
11  }
12  function checkName(id,name) {
13   var filter1 = /^[A-Za-z]+$/;
14   var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
15   if (filter1.test(name)||filter2.test(name)){ 
16        return true;
17   }
18   else {
19       alert("请输入名字，名字上不能出现数字或特殊字符");
20       id.focus();
21       return false;
22   }
23  }
24 </script>

当然也可以在submit按钮onClick提交，如：

 1 <form name="myForm" action="http://www.baidu.com" method="get" >
 2     name:<input name="name" type="text" /><br />
 3     <input name="submit" type="submit" value="submit提交" onClick="return submitForm()"/>
 4 </form>     
 5 <script>
 6 function submitForm(){
 7     var _form=document.forms[0];
 8     //var _form=document.getElementsByName("myForm")[0]; 
 9     //var _form=document.getElementsByName("myForm").item(0);    
10     return checkName(_form.name,_form.name.value);
11 }
12 function checkName(id,name) {
13  var filter1 = /^[A-Za-z]+$/;
14  var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
15  if (filter1.test(name)||filter2.test(name)){ 
16       return true;
17  }
18  else {
19      alert("请输入名字，名字上不能出现数字或特殊字符");
20      id.focus();
21      return false;
22  }
23 }
24 </script>

把上面的代码换成button按钮

 1 <form name="myForm" action="http://www.baidu.com" method="get" onSubmit="return submitForm()" >
 2   name:<input name="name" type="text" /><br />
 3   <input name="button" type="button" value="button提交"/>
 4 </form>
 5 <script>
 6  function submitForm(){
 7      var _form=document.forms[0];
 8      //var _form=document.getElementsByName("myForm")[0]; 
 9      //var _form=document.getElementsByName("myForm").item(0);    
10      return checkName(_form.name,_form.name.value);
11  }
12  function checkName(id,name) {
13   var filter1 = /^[A-Za-z]+$/;
14   var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
15   if (filter1.test(name)||filter2.test(name)){ 
16        return true;
17   }
18   else {
19       alert("名字不能出现数字或特殊字符");
20       id.focus();
21       return false;
22   }
23  }
24 </script>

如上这一段代码点击提交按钮没反应，只能接受回车键提交事件，那在给botton按钮加上onClick="this.form.submit()"会不会触发提交事件呢？结果如愿的实现了一半！！——没有通过验证就直接提交了，只是直接执行了submit()事件提交了表单而已，没有执行onSubmit="return submitForm()"里的表单验证事件就提交了。

 1 <form name="myForm" action="http://www.baidu.com" method="get" onSubmit="return submitForm()">
 2   name:<input name="name" type="text" /><br />
 3   <input name="button" type="button" value="button提交" onClick="this.form.submit()"/>
 4 </form>
 5 <script>
 6  function submitForm(){
 7      var _form=document.forms[0];
 8      //var _form=document.getElementsByName("myForm")[0]; 
 9      //var _form=document.getElementsByName("myForm").item(0);    
10      return checkName(_form.name,_form.name.value);
11  }
12  function checkName(id,name) {
13   var filter1 = /^[A-Za-z]+$/;
14   var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
15   if (filter1.test(name)||filter2.test(name)){ 
16        return true;
17   }
18   else {
19       alert("名字不能出现数字或特殊字符");
20       id.focus();
21       return false;
22   }
23  }
24 </script>

 如要让它接受回车键提交与点击提交都执行表单验证后再提交上服务器，只能再修改js了，如下代码修改过后能实现：

 1 <form name="myForm" action="http://www.baidu.com" method="get" onSubmit="return submitForm()">
 2   name:<input name="name" type="text" /><br />
 3   <input name="button" type="button" value="button提交" onClick="submitForm()"/>
 4 </form>
 5 <script>
 6  function submitForm(){
 7      var _form=document.forms[0];
 8      if (checkName(_form.name,_form.name.value)){
 9           _form.submit();
11      }else{
12          _form.onSubmit=false;
13          return false;
14      }
15  }
16  function checkName(id,name) {
17   var filter1 = /^[A-Za-z]+$/;
18   var filter2 =/[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*/;
19   if (filter1.test(name)||filter2.test(name)){ 
20        return true;
21   }
22   else {
23       alert("名字不能出现数字或特殊字符");
24       id.focus();
25       return false;
26   }
27  }
28 </script>

 

来源：https://www.cnblogs.com/xiaomou2014/p/3881404.html