zoukankan      html  css  js  c++  java
  • form表单验证失败,阻止表单提交

    form表单验证失败,阻止表单提交

    效果演示:

    贴上完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            var t=$("#text").val().length;
            if(t<=10){
                alert("长度不够!!")
            }else{
                $(this).prop("type","submit");
            }
        });
         
    });
    </script>
    </head>
    <body>
        <form action="http://www.baidu.com" method="post">
            <input type="text" id="text" />
            <input type="button" value="提交查询" id="btn"/>
        </form>
    </body>
    </html>

    原理:验证#test内容长度是否大于等于10,true:弹窗长度不够,false:设置input按钮的类型为submit,即可跳转到百度,button这个属性验证成功无法跳转到action请求页面,只有submit按钮才可以

  • 相关阅读:
    DS博客作业05--查找
    DS博客作业04--图
    DS博客作业03--树
    栈和队列
    第六次作业
    第五次作业
    第四次作业
    第三次作业
    java任务
    第三周-自主学习任务-面向对象基础与类的识别
  • 原文地址:https://www.cnblogs.com/yz-blog/p/6632227.html
Copyright © 2011-2022 走看看