Question

我不熟悉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);
});
});

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

Answer 1

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

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


要验证的元素

为该方法指定的参数，例如for min：5参数为5，范围：[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/

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

jQuery验证插件问题

2 个答案: