1

我对 Jquery 验证器插件不是很熟悉，我试图弄清楚是否可以验证单个文本字段，即在文本字段中输入密码以及它是否等于“密码”（或其他密码可能是）然后出现下载链接。
这是一个 jsfiddle： http: //jsfiddle.net/aSRRr/
这里也是 jQuery：

$.validator.setDefaults({
submitHandler: function(form){
$("#myform").hide();
$("#download-file").fadeIn("slow");
},
}); 


  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    password: { required: true, equalTo: "#password"},
  }

});

  });


$(document).ready(function(){
$("#myform").hide();
$("#download-file").hide();

$("#download-button").click(function(){
$("#myform").fadeToggle(300);
});
});

是否可以根据单词验证文本字段，在这种情况下为“密码”？

4

2 回答 2

2

使用addMethod函数http://docs.jquery.com/Plugins/Validation/Validator/addMethod：

添加自定义验证方法。它必须由名称（必须是合法的 javascript 标识符）、基于 javascript 的函数和默认字符串消息组成。回调的参数是： - 已验证元素的当前值

  • 要验证的元素
  • 为方法指定的参数，例如对于 min: 5 参数为 5，对于 range: [1, 5] 它的 [1, 5]

请注意：虽然很容易添加一个正则表达式方法来检查它的参数值，但将这些正则表达式封装在他们自己的方法中要干净得多。如果您需要大量略有不同的表达式，请尝试提取一个公共参数。

标记：

<div id="download-button" style="cursor: pointer;">Download File</div>

<form id="myform">
  <label for="password">Password</label>
  <input id="password" name="password" class="isPassword" />
  <br/>

  <input class="submit" type="submit" value="SUBMIT" />
</form>

<div id="download-file" style="cursor: pointer;">Click to Download</div>

jQuery：

$.validator.setDefaults({
    submitHandler: function(form){
        $("#myform").hide();
        $("#download-file").fadeIn("slow");
    },
}); 
$(document).ready(function(){
    jQuery.validator.addMethod("isPassword", function(value) {
        if(value == 'password')
              return true;
          }, "Invalid password");
    $("#myform").validate();
    $("#myform").hide();
    $("#download-file").hide();
    $("#download-button").click(function(){
        $("#myform").fadeToggle(300);
    });
});

确保您的输入使用类 isPassword。还要确保.ready从您的代码中删除额外的功能。

jsFiddle：http: //jsfiddle.net/aSRRr/2/

于 2013-02-25T22:26:34.413 回答
1

重要提示：这并不安全。 任何人都可以轻松查看您的任何 JavaScript 代码并查看您的密码值。

以下回答了您的问题，尽管我不建议将其作为保护任何东西的可靠方法。

使用jQuery Validate 插件的内置addMethod方法创建一个自定义规则，调用pw_check如下：

jQuery.validator.addMethod("pw_check", function (value) {
    return (value == 'password');
}, "Invalid password");

然后将新规则与其他规则一起应用...

rules: {
    password: {
        required: true,
        pw_check: true // <-- apply your custom rule
    }
},

完全更新的 jQuery 代码：

$(document).ready(function () {

    jQuery.validator.addMethod("pw_check", function (value) {
        return (value == 'password');
    }, "Invalid password");

    $("#myform").validate({
        rules: {
            password: {
                required: true,
                pw_check: true
            }
        },
        submitHandler: function (form) {
            $("#myform").hide();
            $("#download-file").fadeIn("slow");
        }
    });

    $("#myform").hide();
    $("#download-file").hide();

    $("#download-button").click(function () {
        $("#myform").fadeToggle(300);
    });

});

您的 HTML 没有任何变化。

工作演示：http: //jsfiddle.net/5WMNK/

于 2013-02-25T22:51:15.887 回答