了解form表单提交前验证，看这就够了

最新推荐文章于 2021-07-20 19:05:09 发布

程序yang

最新推荐文章于 2021-07-20 19:05:09 发布

阅读量1.1k

点赞数 2

分类专栏：前端技术

本文链接：https://blog.csdn.net/weixin_44563573/article/details/103194250

版权

前端技术专栏收录该内容

17 篇文章 2 订阅

订阅专栏

可以使用form表单的onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。
onsubmit指定的方法返回true，则提交数据；返回false不提交数据。

第一种写法：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <form action="http://www.baidu.com" onsubmit="return toVaild()">
            <input type="text" id="word">
            <input type="submit" value ="提交"/>
        </form>
    </body>
        <script language="javascript">
            function toVaild(){
                var val = document.getElementById("ff").value;
                alert("你输入的内容为："+val);
                if(val == "你好"){
                    alert("校验成功，将进行提交");
                    return true;
                }
                else{
                    alert("必须输入“你好”。表单才可以进行提交！");
                    return false;
                }
            }
		</script>
</html>

第二种写法：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <form action="http://www.baidu.com">
            <input type="text" id="word">
            <input type="submit" value ="提交" onclick="return toVaild()"/>
        </form>
    </body>
        <script language="javascript">
            function toVaild(){				
                var val = document.getElementById("ff").value;
				alert("你输入的内容为："+val);
                if(val == "你好"){
                    alert("校验成功，将进行提交");
                    return true;
                }
                else{
                    alert("必须输入：你好。表单才可以进行提交！");
					return false;
                }
            }
		</script>
</html>

注意：
（1）οnsubmit="return toVaild()"中的return和οnclick="return toVaild()"中的return一定要写，不然无论下面的结果返回turn或false，都会进行表单提交。
（2）上面的网页中，只有在输入框中输入“你好”，表单才能进行提交；否则不提交。

总结：
（1）对表单进行验证；
（2）阻止表单提交。方法返回false，则表单被阻止提交，反之。