Question

我是提升jQuery脚本级别的新手，我在这里使用jquery验证登录页面。

如果我的登录页面成功，则必须重定向到成功页面，当我单击提交按钮时，代码与下面的代码一起工作正常。

<form id="form1" name="login" method="post" action="mainpage.html">

</form>

这是我的代码

$(function (){
     $("#form1").validate({
    // Specify the validation rules
    rules: {
        username: {
            required: true,
            email: true
        },
        password: {
            required: true,
            minlength: 5
        }
    },

    // Specify the validation error messages
    messages: {
        username: "Please enter a valid email address",
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
        },
          submitHandler: function (form) { // for demo
                         $('#username').focus();
                         $('#submit').click(function () {
                             event.preventDefault(); // prevent PageReLoad                                
                             var ValEmail = $('#username').val() === 'admin@admin.com'; // Email Value
                             alert("Email" + ValEmail);
                             var ValPassword = $('#password').val() === 'admin1234'; // Password Value
                             if (ValEmail === true && ValPassword === true) { // if ValEmail & Val ValPass are as above
                                 alert('valid!'); // alert valid!
                                 window.location.href = "http://java67.blogspot.com";
                                 // go to home.html
                             }
                             else {
                                 alert('not valid!'); // alert not valid!
                             }
                         });
                     }
    }
});

});

但是我需要做验证示例，如果emailid = admin@admin.com＆amp; passsword = admin1234当我点击提交时，它需要检查我的emailid是否为John@xyz.com，如果两者都成功则密码是密码，则必须重定向，否则必须在标签中显示错误消息。

现在我收到错误，如HTTP错误405.0 - 方法不允许

这是小提琴Link

提前致谢

此致中号

Answer 1

您的代码因以下原因而中断...

1）您错误地将success选项放在messages选项中。 success选项是messages的兄弟，而不是孩子。

messages: {
    username: "Please enter a valid email address",
    password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
    },
    success: function (data) {  // <- does not belong inside of 'messages' option
        ....
    }
}

2）As per documentation，success选项用于：“如果指定，则会显示错误标签以显示有效元素。”换句话说，仅使用success如果您希望在没有错误时也显示错误标签;喜欢绿色的复选标记效果。

3）您的success功能与success选项的预期目的无关。如果要手动编写验证函数，使用验证插件有什么意义？看我的评论。

success: function (data) {
    if (username == 'john@xyz.com' && password == password) { // this is what the plugin does automatically when it evaluates the rules
        window.location = "mainpage.html"; // this is already the 'action' part of your '<form>'
    }
    else {
        $('#username').focus();  // Again, the plugin already does this.
    }
}

只需让插件按设计运行......

验证失败时，您会收到一条消息，该字段将成为焦点。
验证通过后，表单将提交并重定向到您mainpage.html的{{1}}属性所指定的action="mainpage.html"网址。

你的jsFiddle更新了......

http://jsfiddle.net/sparky672/ny9bt1ak/3/

验证登录＆amp;使用jquery validate plugin重定向到成功页面

1 个答案: