问答详情
源自：2-1 表单验证插件——validate

下面这代码为什么会跳到当前页面

<!DOCTYPE html>

<html xmlns="https://www.w3.org/1999/xhtml">

    <head>

        <title>表单验证插件</title>

        <link href="style.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="https://www.imooc.com/data/jquery-1.8.2.min.js"></script>

        <script type="text/javascript" src="https://www.imooc.com/data/jquery.validate.js"></script>

        <script type="text/javascript" src="https://www.imooc.com/data/jquery.validate.messages_cn.js"></script>

    </head>

    <body>

        <form id="frmV" method="get" action="#">

            <div id="divtest">

                <div class="title">

                    <span class="fl">表单验证插件</span> 

                    <span class="fr">

                        <input id="btnSubmit" type="submit" value="提交" />

                    </span>

                </div>

                <div class="content">

                    <span class="fl">邮箱：</span><br />

                    <input id="email" name="email" type="text" /><br />

                    <span class="tip"></span>

                </div>

            </div>

        </form>

        

        <script type="text/javascript">

            $(function () {

                $("#frmV").validate(

                  {

                      /*自定义验证规则*/

                      rules: {

                            email:{

                                required:true,

                                email:true

                            }

                            

                            

                          }

                      },

                      /*错误提示位置*/

                      errorPlacement: function (error, element) {

                          error.appendTo(".tip");

                      }

                  }

                );

            });

        </script>

    </body>

</html>


提问者：慕设计6337300 2018-08-19 15:03

个回答

  • 十指狂魔
    2019-04-09 14:23:18

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>表单验证插件</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="//www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="//www.imooc.com/data/jquery.validate.js"></script>
        <script type="text/javascript" src="//www.imooc.com/data/jquery.validate.messages_cn.js"></script>
    </head>
    <body>
        <form id="frmV" method="get" action="#">
            <div id="divtest">
                <div class="title">
                    <span class="fl">表单验证插件</span> 
                    <span class="fr">
                        <input id="btnSubmit" type="submit" value="提交" />
                    </span>
                </div>
                <div class="content">
                    <span class="fl">邮箱：</span><br />
                    <input id="email" name="email" type="text" /><br />
                    <span class="tip"></span>
                </div>
            </div>
        </form>
        
        <script type="text/javascript">
            $(function () {
                $("#frmV").validate(
                  {
                      /*自定义验证规则*/
                      rules: {
                            email:{
                                required: true,
                                email: true
                            }
                      },
                      /*错误提示位置*/
                      errorPlacement: function (error, element) {
                          error.appendTo(".tip");
                      },
                      submitHandler: function(form) {
                        // some other code
                        // maybe disabling submit button
                        // then:
                        alert("邮箱验证成功！")
                        // $(form).submit();
                      }
                  }
                );
            });
        </script>
    </body>
</html>

    改成上面这样应该就行了

    0
  • 慕粉3931655
    2019-02-28 16:23:43

    我终于知道哪里错了

    rules: {
                            email:{
                                required:true,
                                email:true
                            }
                          }
                      },

    你们看，这里多了一个右括号

    1
  • 慕UI0287333
    2018-09-10 16:33:18

    action这个属性就是跳转到某页面的URL，只是这里没填链接，填井号表示默认本页面

    0
  • qq_我梦蝴蝶花_0
    2018-09-04 17:45:20

    action="#", 这个#好像就是会跳到当前页面

    0