提交以后右边结果栏显示跳转到当前页面

来源:2-1 表单验证插件——validate

一只肥鹤

2018-05-28 16:34

<!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="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>

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

        <script type="text/javascript" src="http://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>


写回答 关注

2回答

  • 十指狂魔
    2019-04-09 14:31:45

    HTML部分,将头部的js引用改为下面这样:

    <script type="text/javascript" src="//"></script>
    <script type="text/javascript" src="//"></script>
    <script type="text/javascript" src="//">
    </script>

    js部分改为下面这样:

    <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>


    十指狂魔

    html部分应该是这样的: <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>

    2019-04-09 14:33:33

    共 1 条回复 >

  • solace_lee
    2018-06-11 22:07:03

    <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>



    库文件引用错误,JQ,JS不生效,记得在慕课网的链接地址中http://改成https://。 


    维镇

    加上s之后也没有变化

    2018-09-29 17:17:12

    共 1 条回复 >

jQuery基础(五)一Ajax应用与常用插件

如何用jquery实现ajax应用,加入学习,有效提高前端开发速度

69095 学习 · 400 问题

查看课程

相似问题