form表单判断后决定是否跳转

作者: 肆意木 | 来源:发表于2017-06-19 21:52 被阅读68次

<h6>以前很少用到 form 表单的一些属性用它也只是关心样式如何,最近的项目中需要传值的,觉得 form 比 Ajax 方便一点就用的 form ,熟悉了之后才发现,
form 还是很的强大</h6>


<form class="form-horizontal" role="form" method="POST" action="Login">

    <div class="form-group ">
        <div class="col-sm-4">
            <input type="text" class="form-control" id="phoneNumber"
                   onBlur="checkPhone()">
        </div>
        
        <label id="loginNamewarn">
            <span class="warn">
                ![](error.png)
            </span>
        </label>
        
    </div>

    <div class="form-group">
        <div class="col-sm-4">
            <input type="password" class="form-control" id="loginPassword"
                   onBlur="checkPassword()">
        </div>
        
        <label id="loginPasswarn">
            <span class="warn">
                ![](error.png)
            </span>
        </label>
        
    </div>

    <button type="submit" class="loginSure">登录</button>
</form>

这是我项目中登录的代码,在填写了手机号失焦之后会触发 checkPhone 判断填写是否正确,如果不对就在后面提示。

<h5>页面显示</h5>

login.png

<h5>判断后显示</h5>

error.png

那么问题来了,今天打开发现填写的信息错误时,页面虽然会提示错误但是如果点击登录还是会把数据返回到后台,而这不是我想要的效果,查了一些问文档,然后找到了解决方法,其实只需要在提交那里添加一个判断即可。下面是我写的一个小栗子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action='test.html' method="post" name="Form">
<input type="submit" id='btn' value="提交">
</form>

</body>
</html>

运行时,网页上的URL显示:

1.png

点击按钮后页面URL:

1.png

可以发现点击提交,页面发生了跳转,但是如果加上判断:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action='test.html' method="post" name="Form">
<input type="submit" id='btn' value="提交" onclick="return check()">
</form>

<script>
    function check() {
        return false;
    }

</script>

</body>
</html>

可以发现,不管怎么点击它的URL都是不会发生变化的:

1.png

相关文章

网友评论

  • 6d96978eeefb:form提交前验证那一块,你的做法不是最好的,应该使用form的 onsubmit属性
    肆意木:我刚才查才知道onsubmit和onclick是两种方法,我昨天可能比较迷以为是一种方法

本文标题:form表单判断后决定是否跳转

本文链接:https://www.haomeiwen.com/subject/hvynqxtx.html