jQuery Validate 插件问题答案

【问题标题】：jQuery Validate plugin problemsjQuery Validate 插件问题
【发布时间】：2013-02-25 22:09:25
【问题描述】：

我对 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);
});
});

是否可以根据单词验证文本字段，在本例中为“密码”？

【问题讨论】：

equalTo 规则仅用于比较两个不同输入字段的值。
请注意，在 JavaScript 中存储密码并不安全。任何人都可以看到密码。

标签： jquery jquery-validate

【解决方案1】：

使用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/

【讨论】：

【解决方案2】：

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

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

使用the jQuery Validate plugin's built-in addMethod method 创建一个名为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/

【讨论】：