jquery 验证自定义验证不起作用

Question

 $(document).ready(function () { jQuery.validator.addMethod("insz", function (value, element) { var insz = $('#txtINSZ').val() var controle = parseInt(insz.substring(13, 15)) var getal = insz.substring(0, 2) + insz.substring(3, 5) + insz.substring(6, 8) + insz.substring(9, 12) var rest = parseInt(getal) % 97 alert("we doin' this mun") return 97 - rest == controle; }, "* Amount must be greater than zero"); $('#form1').validate({ rules: { txtINSZ: { required: $('#cbInsz').prop('checked') == false, insz: function () { $('#cbInsz').prop('checked') == true; } } }, showErrors: function (errorMap, errorList) { this.defaultShowErrors();// to display the default error placement } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script> <form method="post" action="#" id="form1" a="" novalidate="novalidate"> <div id="container"> <div class="container-fluid"> <div class="col-xs-12"> <div class="form-horizontal col-xs-4" id="divDimLeft"> <span id="lblTitleAlgemeen">Algemen Informatie</span> <div class="checkbox" style="margin-left:20px;"> <span id="lblCheck"> <input type="checkbox" id="cbInsz" checked=""> INSZ nummer werknemer gekend? </span> </div> <div class="form-group" id="divINSZ"> <span id="lblINSZ" class="required" for="txtINSZ" aria-required="true">INSZ-nummer gekend?</span> <input name="ctl00$ContentPlaceHolder1$txtINSZ" type="text" maxlength="15" id="txtINSZ" class="form-control required form valid" oninput="autoInvullen()" aria-required="true" placeholder="__.__.__-___.__" aria-invalid="false" required=""><label id="txtINSZ-error" class="error" for="txtINSZ" style="display: none;"></label> </div> <div class="form-group"> <span id="lblNaam" class="required" for="txtNaam" aria-required="true">Naam</span> <input name="ctl00$ContentPlaceHolder1$txtNaam" type="text" maxlength="40" id="txtNaam" class="form-control form requiredField error" aria-required="true" aria-invalid="true"><label id="txtNaam-error" class="error" for="txtNaam">Dit veld is verplicht.</label> </div> <div id="divButton" class="text-right" style="width: 87.5%"> <input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Volgende" id="btnSubmit" class="btn btn-primary col-xs-2" style="float: none; min-width:200px;"> </div> </div> </div> </div> </div> </form>

我想制作一个自定义验证器，但由于某种原因它根本不起作用。 required 确实有效，因此在我的页面中查找元素没有问题。 那么有人知道为什么它不起作用吗？

比提前，在这里您可以找到我正在使用的代码，包括我编写的方法和验证方法的开始。

Answer 1

你不能只插入一个比较运算符作为参数； 你需要一个function返回此参数的值，在此情况下，从比较操作的布尔...

$('#form1').validate({
    rules: {
        txtINSZ: {
            required: function() {
                return $('#cbInsz').prop('checked') == false;
            },
            insz: function() {
                return $('#cbInsz').prop('checked') == false;
            }
            ....

Answer 2

解决了它，我只是将规则放在了规则部分之外。 在验证代码之后，我把这个：

 $('#txtINSZ').rules("add", {
    required:true,
insz:true
})

完美运行。

Answer 3

我也面临同样的情况，但在我的情况下，以下两个步骤有效。

1. 在您想要自定义验证的 HTML 输入元素上使用data-rule-insz="true"属性。

2. 还添加一个name属性，如下例中所述：-

    <input id="customer" name="customer" data-rule-insz="true" required type="text" class="typeahead form-control" />