form表单 提交前 数据校验

时间：2022-05-03 00:47:14

预备知识：form表单中type = submit 与type = botton的区别

  • type = submit时，该点击发生后，就直接启动了form的提交
  • type = botton时，只是表明了该标签是一个按钮，当发生点击时，form没有任何的反应

onsubmit提交验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单提交前 数据校验</title>
</head>
<body>
<form action="login" method="post" onsubmit="return validate()">
    <input type="text" name="name"/>
    <input type="submit" value="提交"/>
    <button type="submit">提交</button>
</form>

</body>
<script type="text/javascript">
    function validate() {
        if(){
            return true;    //return true;时,表单将提交
        }
        else {
            return false;   //return false时,表单不提交
        }
    }
</script>
</html>

注意：该提交方式中 input 或者 button 的type还是 submit类型都可以，但是在form 表元素里面需要加上 οnsubmit=“return check()”。form属性onsubmit的值前面必须加 return，否则无论我们的返回值是什么，表单就都将会提交，这样我们的验证函数就相当于名存实亡了

$(“form”).submit();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单提交前 数据校验</title>
    <script src="https://apps.bdimg.com/libs/jquery/3.1.4/jquery.min.js"></script>
</head>
<body>
<!-- 只是提供简单的例子,所以未添加任何的css样式 -->
<form action="login" method="post">
    <input type="text" name="name"/>
    <input type="button" value="提交" onclick="check()">
    <button type="button" onclick="check()">提交</button>
</form>

</body>
<script type="text/javascript">
    function check() {
        //...... 若不想提交,就可以提前return;达到不提交
        $("form").submit(); //提交请求
    }
</script>
</html>

注意：该提交方式中 input 或者 button 的type则应该是button类型的，因为这样写就是为了做到验证，然后判断是否需要提交，如果写成了submit的话，就是变成无论如何都要提交了

jQuery插件：Validation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单提交前 数据校验</title>
    <script src="https://apps.bdimg.com/libs/jquery/3.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.23.0/jquery.validate.min.js"></script>
</head>
<body>
<form action="login" method="post">
    <input type="text" name="name"/>
    <input type="submit" value="提交">
    <button type="submit">提交</button>
</form>

</body>
<script type="text/javascript">
    $(function () {
        $("form").validate({
            submitHandler:function (form){
                //…… 我们需要的验证信息如果不需要提交,还是直接return就行了,规避form.submit();
               form.submit();
            }
        });
    });
</script>
</html>

注意：使用该方式法时，我们必须引入jQuery的插件（上述代码已给出），并且我们的 input 或者 button 的type则应该是submit类型的,否则不会响应，所谓的不会响应就是压根就不会执行submitHandler:function 下面的这个函数因为当表单验证成功并提交时执行，存在此方法时表单只能在此方法内部执行form.submit()才能提交，可理解成它替代了表单的onsubmit方法；，但是button在前面已经说过了，它并不是一个提交，而是表明它只是一个按钮而已，所有input 或者 button 的type则应该是submit类型的

在submitHandler:function 函数的最后如果需要提交，执行的一定是form.submit();而不是$(“form”).submit();因为后者会造成一个死循环，因为上面解释过了，submitHandler:function 是在表单验证改成并且执行提交时才会执行，而$(“form”).submit();就是表单执行提交，所以每一次都执行提交，然后跳转submitHandler:function ，然后在该函数里面又执行了提交，所以就变成了一个死循环

标签：

相关文章