form 表单提交前验证 onsubmit 原生javascript

GuoyeZhang

已于 2023-10-13 15:37:53 修改

阅读量2.1k

点赞数 4

分类专栏： +Frontend Practices/前端实战文章标签： form submit

于 2019-04-22 09:10:57 首次发布

本文链接：https://blog.csdn.net/aa390481978/article/details/89349808

版权

+Frontend Practices/前端实战专栏收录该内容

49 篇文章 1 订阅

订阅专栏

form 表单提交前验证 onsubmit

使用form表单的 onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。

onsubmit指定的方法返回true，则提交数据；返回false不提交数据。

在不使用JQuery的情况下（js原生），是提交表单前拦截的较好方法。

js验证form表单，示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>form validate</title>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>

    <script>
        function validate() {
            // 为了方便 使用了jq获取表单元素的值，可以使用js原生获取
            if ($('#input').val() == 1) {
                return true
            } else {
                alert('validate error!')
                return false
            }
        }
    </script>
</head>

<body>
    <form action="http://www.baidu.com" onsubmit="return validate()">
        <input type="text" id="input">
        <input type="submit" id="submit" value="提交" />
    </form>
</body>

</html>

GuoyeZhang

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
form 表单提交前验证 onsubmit 原生javascript

form 表单提交前验证 onsubmit使用form表单的onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。onsubmit指定的方法返回true，则提交数据；返回false不提交数据。在不使用JQuery的情况下（js原生），是提交表单前拦截的较好方法。js验证form表单，示例代码：<!DOCTYPE html><html><...
复制链接

扫一扫