表单验证

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

-和敬-

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

阅读量542

点赞数

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/weixin_43410827/article/details/107200931

版权

前端学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head> </head>

<body>
    <!--使用onsubmit提交表单，并且button的type为submit时onsubmit属性的内容必须要有return关键字，否则函数拒绝执行，不会返回，并且表单会在不校验的情况下提交 -->
    <form name="myForm" onsubmit="return validate()">
        <input type="text" name="input">
        <button type="submit">提交</button>
    </form>
</body>

</html>
<script>
    /* 表单校验函数必须返回一个布尔值 */
    function validate() {
        if (document.forms["myForm"]["input"].value == "") {
            alert("表单不能为空")
            return false
        }
    }
</script>

或者表单自身比进行提交，在校验函数中执行提交函数

<!DOCTYPE html>
<html>

<head> </head>

<body>
    <!--使用onsubmit提交表单，并且button的type为submit时onsubmit属性的内容必须要有return关键字，否则函数拒绝执行，不会返回，并且表单会在不校验的情况下提交 -->
    <form name="userForm" action="">
        <input type="text" name="input">
        <button type="button" onclick="validate()">提交</button>
    </form>
</body>

</html>
<script>
    /* 表单校验函数必须返回一个布尔值 */
    function validate() {
        if (document.forms["userForm"]["input"].value == "") {
            alert("表单不能为空")
            return;
        }
        let userForm = document.getElementsByName("userForm");
        userForm.submit()
    }
</script>

-和敬-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证

<!DOCTYPE html><html><head> </head><body>  <form name="myForm" onsubmit="return validate()">
复制链接

扫一扫

专栏目录