JavaScript表单验证和提交

最新推荐文章于 2023-03-16 10:17:29 发布

一只一只大白云

最新推荐文章于 2023-03-16 10:17:29 发布

阅读量3.3k

点赞数 3

分类专栏： JavaScript 文章标签： javascript html5

本文链接：https://blog.csdn.net/hei_xiaomian/article/details/105043010

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近做java的时候用到了JavaScript表单。网上相关的教程很多，但大部分都不详细。
很多人学到最后都对form表单不是很熟悉，现在层出不穷的框架使得很多人觉得方便，也就更少地回顾基础知识了，但框架也是建立于基础之上的，我们学好基础过后，遇到错误时就不会太被动。

W3school上面对于初学者展示的表单案例是这样的：

<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("必须填写姓名！");
    return false;
  }
}
</script>
</head>
<body>
<form name="myForm" action="" onsubmit="return validateForm()">
  姓名：<input type="text" name="fname">
  <input type="submit" value="提交">
</form>

解释一下这个例子。action 表示表单提交的地址，为空时默认提交到当前页面，method 表示表单提交的HTTP方式（ get 、post、dialog ），它的默认值为get。

如果别人会看你的代码，那我建议你加上哪些默认值。

这里给name设定值“myForm”是为了在js中获取到这个form。当一个页面有多个表单的时候，我们就需要用name来区分。

  var x = document.forms["myForm"]["fname"].value;

这段代码中，myForm代表name为“myForm”的表单，fname代表该表单部件中name值为fname的元素。这里就是接收用户输入姓名的input框。合起来的意思就是获取了表单“myForm”中input的value值，其实就相当于“document.getElementsByName(“fname”)[0].value;”。然后下面对这个值进行了判断，当该值为空时，返回false。
为什么要这样写呢？这是为了防止姓名为空的时候仍然提交表单。onsubmit是form对象的事件句柄,它会在表单提交前调用。onsubmit 句柄返回 fasle时表单不会提交，除了false以外的任何其他值都会提交。我不希望你忘记写return，有时候偏偏就容易忘记。
如果你不想写一串JavaScript函数，你可以通过添加一个属性来达到相同的效果：

<input type="text" name="fname" required=“required”>
//也可以直接写required

required是HTML5的新属性，意为必填，当你提交时表单会自动帮你验证。

很多时候，将一些数据验证直接在页面上实现，就能省略后端很多的逻辑。

W3school上的例子虽然很短，但有时候用input提交并不合适。
那时候我们将采用button。

我需要你了解input和button的区别。

	<input type="button" value="提交">//1
    <button type="button">提交</button>//2
    <input type="submit">//3
    <button>提交</button>//4 type默认值为submit
    <button type="submit">提交</button>//5

你可以尝试敲下这几段代码，以上五种方式只有三种可以提交。

当input的type设置为submit的时候可以提交表单，另外可以提交的方式是将button的type设置为submit；当你不设置button的type属性的时候，它默认的值就是submit，如果你还一贯地省略写出默认值的时候记住：

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C规范）的默认值是 “submit”。

“<input type="submit">”与“<button type="submit">提交</button>”二者是有区别的。
1.“<input type="submit">”

input其实是一个由输入控件改装过来的按钮，这源于Web早期的简陋设计。我们给它设置name便可以验证这一点：

当你在input上设置name的时候，同时也提交了自身的value，即使你不设置value，默认vaue依然为submit。
这样看来input在作为按钮提交表单时，也被当做一个表单输入提交给服务器，这样一来我们很难分清input到底是交互控件还是数据控件。再加上它的样式难以定制、不可作为其他标签的容器，所以建议不要用input作为表单提交按钮。
像第一个按钮一样设置input的type属性为button，这时它只是一个按钮，不会引发表单提交。

2.“<button type="submit">提交</button>”
button就是一个按钮，type的默认值是submit，在IE中的默认值是button。

button可以设置name和value。提交表单时，value会被作为表单数据提交给服务器。在IE中，将开始与结束标签之间的内容作为name对应的值提交给服务器。

建议用button作为交互用的按钮，来提交表单。同时请注意设置type=submit来兼容IE。

其他提交方式

1.回车提交

有人已经总结出来了，这里给出连接：

回车键触发表单提交问题

1、如果表单里有一个type=”submit”的按钮，回车键生效。
2、如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
3、如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
4、其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
5、type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。