form实现表单提交的各种方法(表单提交源码)

提交

//或者

提交

这里给form元素加上了onsubmit()方法，它会在“提交”按钮点击的时候被触发，该方法一定要有return返回值，如果值为false则不进行提交，如果为true则提交。

给input type=’button’添加onclick事件，验证通过则调用submit()方法提交

代码语言：javascript复制

代码语言：javascript复制function checkForm(){

var user= document.getElementById('user').value;

var psw= document.getElementById('psd').value;

if(...){

//验证不通过

return false;

}

document.getElementById("form1").submit();

} 使用ajax对数据进行 验证后 再提交

代码语言：javascript复制

//或者

提交

注意：

如果使用button，要先进行数据验证的话，就必须要将type的值设置为”button”，即表示它是一个按钮

这里提交的数据’data’，使用了serialize()方法将提交的表单值序列化（即a=1&b=2格式），当然你也可以写成：

代码语言：javascript复制{

"username":username,

"password":password

}表单的 input、select 默认的样式是不同的，所以就造成了width设置的一样，但就是对不齐，可以设置box-sizing:border-box;来解决不一致问题

补充表单具有默认的提交行为，默认是同步的，同步表单提交，浏览器会锁死（转圈儿）等待服务端的响应结果。

表单的同步提交之后，无论服务端响应的是什么，都会直接把响应的结果覆盖掉当前页面。

后来有人想到了一种办法，来解决这个问题，那边是服务端重定向（服务端重定向针对异步请求无效）

消除自动填充：通过添加readonly＆onfocus =“this.removeAttribute（'readonly'）;

解决了这个问题。

代码语言：javascript复制发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/126078.html原文链接：https://javaforall.cn