form表单验证实际用法以及深入坑点分析

form表单验证
form表单

加入表单校验

移除form表单默认跳转事件

在表单外触发表单提交

防止form表单重复提交
重复提交原因：

解决方案：

END

form表单验证

使用form表单提交时form表单会根据form标签内的输入进行相应的判断，当与输入框规则匹配成功才会提交或是发出请求。

form表单

<form onsubmit="saveEdit()">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">

<button type="submit" name="submit">提交</button>
</form>

以上就是一个基础的form表单。当我们点击提交按钮时就会触发表单提交的操作，也就是执行代码中的saveEdit函数。

加入表单校验

因为表单提交前我们需要判定用户输入是否符合规范，我们需要加入响应的限定条件。

<form onsubmit="saveEdit()">
First name:<br>
<input type="text" name="firstname" required>
<br>
Last name:<br>
<input type="text" name="MACAddress" pattern="(([a-f0-9]{2}:)|([a-f0-9]{2}-)){5}[a-f0-9]{2}">

<button type="submit" name="submit">提交</button>
</form>

观察，新加入了

required

属性，意为此项必填；加入了

pattern="(([a-f0-9]{2}:)|([a-f0-9]{2}-)){5}[a-f0-9]{2}"

这个这段正则验证。当点击提交按钮时首先会验证表单中有限定的项是否能通过验证，如不通过会给出提示，否则才会执行表单提交操作。

移除form表单默认跳转事件

简单的说就是监听提交事件，移除表单默认事件。

这里顺便说下，既然要移除事件干嘛还用form表单提交呢？

使用form表单可以更简便的使用form表单的表单验证，然而form表单有一个默认的跳转事件。如果这个默认的跳转事件执行会导致提交之后的部分代码无法执行，比如提交成功的弹框组件提示以及一些回调函数。

即想用表单验证又不想让表单验证之后的跳转或是刷新页面事件触发我们可以这么写

const save = () => {
//获取form表单，监听它的submit事件并将事件移除
$('form').on('submit', e => {
e.preventDefault();

//实际的ajax请求可以写在这里

})
}

表单提交的执行顺序
首先进行表单验证

全部通过以后执行表单提交

最后进行跳转或者是页面刷新。

在表单外触发表单提交

因为表单实际执行提交的按钮不一定在form标签之内，所以我们需要手动触发这个提交实践。关键代码就一句：

<button onclick="$('#submit').click();"></button>

其中

$('#submit')

为form表单中type属性为submit的按钮（实际提交按钮），在这里模拟点击这个按钮即可实现表单外触发提交。

防止form表单重复提交

重复提交原因：

在一个页面给按钮绑定了多次提交事件（点击一次绑定一个，以此类推）导致重复提交。

解决方案：

提交完成后加入页面跳转（添加页面添加成功后跳转到列表页面）

表单提交加入开关

在提交的函数体内加入局部变量，初始状态为可提交，提交一次以后将状态改为不可提交，直接返回（return）

使用某个唯一字段，后端加入验证，重复提交返回报错提示（当然前端也能先发一个请求进行验证）。

END