前端表单验证总结

前端表单验证方式总结

js表单验证作为提交服务器之前的一种验证方式，不仅减轻服务器压力，而且增强了前端的响应能力。

html验证

html验证使用type属性验证，如下所示

<form action="/test" method="POST">
    <input type="text" placeholder="请输入内容"/>
    <input type="submit"  value="提交"/>
</form>

这是一个普通的表单，假如将type修改为email，就会出现原生的验证方式。

<form action="/test" method="POST">
    <input type="email" placeholder="请输入内容"/>
    <input type="submit"  value="提交"/>
</form>

输入内容，点击提交按钮，如下图所示：

此外，HTML5还提供了多种验证类型。
参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input

但是，很快注意到，当内容为空时，前端发生了正常跳转。那么可以给input添加属性 required，他就变成了一个必要的属性。更多有用的属性同样可以阅读上述的参考链接。

<form action="/test" method="POST">
    <input type="email" placeholder="请输入内容" required/>
    <input type="submit"  value="提交"/>
</form>

点击提交按钮，效果如下：

JS验证方式

上述HTML能满足大量的情况，但是有个很奇怪的问题，它不能满足个性化的需求。例如，必填的字段我需要显示个 *的符号，点提交的时候，需要在下方显示一行字：这个字段是必须的。那么这样的需求必须用js实现了。为了不和原生的提示形成干扰，则必须将属性required移除，其次，将type=email改为type=text。

<form action="/test" method="POST" id="form">
    <div>
        <label for="mail" class="input-required">邮箱 :</label></label>
        <input type="text" name="mail" placeholder="请输入内容" id="email-value"/>
        <p class="input-required-tip" id="email-required" hidden>这个内容是必须的</p>
    </div>
    <input type="submit" value="提交" />
</form>

对于CSS部分：

<style>
    .input-required::before {
        content: "*";
        color: red;
    }

    .input-required-tip {
        font-size: small;
        color: red;
    }
</style>

JS部分。代码种event.preventDefault();用来阻止表单提交的默认行为

    const form = document.getElementById('form');
    const mailText = document.getElementById('email-required');
    const emailValue = document.getElementById('email-value');

    form.onsubmit = (event) => {
        const mail = emailValue.value;
        if(!mail){
            mailText.removeAttribute('hidden');
            event.preventDefault();
        }    
    }

点击提交按钮，效果如下。

以上验证方式参考自：
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onsubmit

另一种验证方式，发现还是比较多的，直接放链接参考。

https://blog.csdn.net/Dongguabai/article/details/79487166