转自：/n1143916111/article/details/71024864/
Form表单提交，js验证
1, Onclick()
2, Onsubmit()
Button标签 input (属性 submit button )标签
Input type=button 定义按钮，没有任何行为。多数情况下，用于通过javascript启动脚本
Input type=submit 定义提交按钮，提交按钮会把表单数据发送到服务器
在javascript中，事件调用函数时，用return返回值实际上是对window.event.returnValue进行设置
而该值决定当前操作是否继续，true是继续false中断
第一种方法：onsubmit 与 Input type=submit 搭配
上述两种方法的 Input type=submit 等同于 button标签
第二种方法：onclick 与 Input type=button 搭配
注意：Input type=button 提交不会触发form的 onsubmit事件
目录
原始提交如下：
方法1：
方法2：js控制提交表单
基础知识：
原始提交如下：
1 <form action="/login" method="post" id="form1">2<span>用户</span>3<input type="text" name="username" id="username"/><br/> 4<span>密码</span>5<input type="password" name="password" id="passsword"/><br/> 67<input type="submit" value="提交"> 9 </form>
说明：
form是一个表单，用来发送http请求。直观的说，只要用form将需要提交到服务器的标签包围，当提交的时候，就会向服务器发送有name属性的数据。所以，input内容提交必须有name属性。 action：服务器接口路径；method:选择发送请求的方式，默认是get，通常用post。get请求会在地址栏显示参数，并且有长度限制。post则没有。id:标识标签元素当提交后，服务器就会得到：username=填的用户名 & password=填的密码当点击提交后，form数据就会发送。通常提交前要校验数据。比如长度规则等。所以需要js。
js校验：
方法1：
在from属性后面接着添加οnsubmit="return false;"属性.表示不提交。true则相反。这里可以用一个方法替换。变成：
<form action="/back/login/login" method="post" id="form1" οnsubmit="return sb1();">
然后，书写js验证规则：
1 function sb1(){2 var username = document.getElementById("username");3 var password = document.getElementById("passsword");4 if(trim(username.value)==null || trim(username.value)==""){5 alert("请输入用户名");6 username.focus();7 return false;8 }9 if(trim(password.value)==null || trim(password.value)==""){10 alert("请输入密码");11 password.focus();12 return false;13 }14 15 return true;16}17function trim(str){ //删除左右两端的空格18return str.replace(/(^\s*)|(\s*$)/g, "");19}
js含义：
var username = document.getElementById("username");表示获得id为username的标签对象，可以理解为输入用户名的那个输入框username.value表示输入框的内容trim是一个方法，去除字符串左右两端空格。方法是一个串代码的执行体，调用方法会执行方法中的内容。方法又叫做函数，方法由方法名，括号中的参数，大括号中的方法体组成。在js中，方法参数不用声明类型，调用方法的时候，参数按照顺序匹配。比如，trim(username)，username就是str，所以，方法中的参数str就是形式参数，简称形参，而username叫做实体参数，简称实参。当调用trim(username)的时候，username就替换了str。判断值为null或者""空字符串用==alert表示弹出对话框，内容是字符串，所以需要用引号括起来。username.focus()表示焦点聚集在username这个对象，也就是输入框。return false；return表示函数执行结束，后面的代码不执行。return false表示该函数返回一个boolean值为false。对应到表单，就是οnsubmit="false"，表示不提交。如果if条件都满足，则return true；提交。||表示或者，意思是，如果username==null或者username是空字符串，条件1或者条件2为true则都是true
方法2：js控制提交表单
首先，表单元素代码如下：
1 <form action="/back/login/login" method="post" id="form1">2<span>用户</span>3<input type="text" name="username" id="username"/><br/> 5<span>密码</span>6<input type="password" name="password" id="passsword"/><br/> 8 9<a href="javascript:sb();">提交</a>10 </form>
这里关于提交，页面切图通常都会用a标签或者button来提交，因为涉及到表单验证。
同样，js：
1 function sb(){2 var username = document.getElementById("username");3 var password = document.getElementById("passsword");4 if(trim(username.value)==null || trim(username.value)==""){5 alert("请输入用户名");6 username.focus();7 return;8 }9 if(trim(password.value)==null || trim(password.value)==""){10 alert("请输入密码");11 password.focus();12 return;13 }14 15 form1.submit();16 17}
js含义：
这个sb()方法没有返回值，return就是直接结束，如果没有return就一直执行完所有代码。也就是说，验证通过就会提交。这里说明一下提交的方法，可以用form的id或者name属性表示form这个对象，然后调用submit()方法即可。当然，推荐用document.getElementById("form1").submit();
