如何在 HTML form 表单提交时验证信息！？

最新推荐文章于 2024-07-17 22:23:53 发布

京城女女-

最新推荐文章于 2024-07-17 22:23:53 发布

阅读量5.9k

点赞数 6

分类专栏：问题解决文章标签： html 表单数据

本文链接：https://blog.csdn.net/weixin_38498554/article/details/78894933

版权

问题解决专栏收录该内容

10 篇文章 1 订阅

订阅专栏

前言：平常老用ajax直接向后台传数据，form 表单不常用都生疏了，今天遇到了一个相关问题，搞了半天，特此记录。

用from表单提交，会遇到一个问题就是，当你点击提交按钮时，直接就把数据传过去了，无法对input表单中的值进行验证，即使可以验证，当不符合验证情况的时候也会把值传过去，这当然不是我们想要的效果，所以..怎么才能验证完成并正确的时候再把值传过去后台呢？

后来，我发现了这个方法：onsubmit=""
οnsubmit=”return true” 时点击提交按钮可以提交；
οnsubmit=”return false” 时点击提交按钮就不可以提交了；
所以利用这一点，我们就可以做验证，当验证成功之后返回return true 就好了。

下面有个小demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src='jquery-1.7.1.min.js'></script>
</head>
<body>
    <form action="" onsubmit="return check()">
        用户名：<input type="text" id='username'><br>
        密码：<input type="text" id='password'><br>
        <input type="submit" value='提交' id='submit'>
    </form>

    <script>
    function check(){
        if($('#username').val()==''){
            alert('名字不能为空');
            return false
        }else if($('#password').val()==''){
            alert('密码不能为空');
            return false
        }else{
            return true;
        }
    }
</script>
</body>
</html>

京城女女-

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
如何在 HTML form 表单提交时验证信息！？

前言：平常老用ajax直接向后台传数据，form 表单不常用都生疏了，今天遇到了一个相关问题，搞了半天，特此记录。用from表单提交，会遇到一个问题就是，当你点击提交按钮时，直接就把数据传过去了，无法对input表单中的值进行验证，即使可以验证，当不符合验证情况的时候也会把值传过去，这当然不是我们想要的效果，所以..怎么才能验证完成并正确的时候再把值传过去后台呢？后来，我发现了这个方法：`o
复制链接

扫一扫