javascript - 如何遍历我的表单字段并将它们添加到规则/消息对象？

Question

我正在尝试编写一个 for 循环，将元素添加到我的validate方法中。

我想遍历每个以开头的输入元素user_input并将其添加到我的rules和messages对象中。

它应该在我的对象中添加以下元素：

user_number_X { checkLotteryNumber: true, required: true }

这是我目前得到的：

但它应该看起来像：

user_number_1: { checkLotteryNumber: true, required: true }, user_number_2: { checkLotteryNumber: true, required: true }, user_number_3: { checkLotteryNumber: true, required: true },

这是我的 index.html

<form class="user-input">
                <div class="input-wrapper">
                <div class="number-wrapper">
                    <label for="user_number_1">1st number</label>
                    <input id="user_number_1" class="lottery-number" name="user_number_1" type="number" maxlength="2" required>
                    <span class="focus-border">
                        <i></i>
                    </span>
                </div>

                <div class="number-wrapper">
                    <label for="user_number_2">2nd number</label>
                    <input id="user_number_2" class="lottery-number" name="user_number_2" type="number" maxlength="2" required>
                    <span class="focus-border">
                        <i></i>
                    </span>
                </div>

                <div class="number-wrapper">
                    <label for="user_number_3">3rd number</label>
                    <input id="user_number_3" class="lottery-number" name="user_number_3" type="number" maxlength="2" required>
                    <span class="focus-border">
                        <i></i>
                    </span>
                </div>

                <div class="number-wrapper">
                    <label for="user_number_4">4th number</label>
                    <input id="user_number_4" class="lottery-number" name="user_number_4" type="number" maxlength="2" required>
                    <span class="focus-border">
                        <i></i>
                    </span>
                </div>

                <div class="number-wrapper">
                    <label for="user_number_5">5th number</label>
                    <input id="user_number_5" class="lottery-number" name="user_number_5" type="number" maxlength="2" required>
                    <span class="focus-border">
                        <i></i>
                    </span>
                </div>

                <div class="number-wrapper">
                    <label for="user_number_6">6th number</label>
                    <input id="user_number_6" class="lottery-number" name="user_number_6" type="number" maxlength="2"required>
                    <span class="focus-border">
                        <i></i>
                    </span>
                </div>

                <div class="number-wrapper">
                    <label for="user-draw">Number of draws</label>
                    <input id="user-draw" class="draw-number" name="draw_number" type="number" required>
                    <span class="focus-border">
                        <i></i>
                    </span>
                </div>
                </div>
                <div class="submit-button">
                    <button id="button-send_results" class="submit" type="submit">Let's win!</button>
                </div>
            </form>

我的.js文件：

$.validator.addMethod("checkLotteryNumber", function(value, element) {
    return this.optional(element) || value > 0 && value <= 52;
}, 'Please, write numbers from 1 to 52 only');

$.validator.addMethod("checkDrawsNumber", function(value, element) {
    return this.optional(element) || value < 100000;
}, 'You can play not more than 99.999 draws');

var rules = {
    draw_number: {
        checkDrawsNumber: true,
        required: true
    }
}

var numberCheck = function() {
    $("input[id^='user_number']").each(function() {
        rules[$(this.id)] = {
            checkLotteryNumber: true,
            required: true
        };
    });
}
console.log(rules);
numberCheck();   

var messages = {
    draw_number: {
        checkDrawsNumber: 'You can play not more than 99.999 draws',
        required: 'This field is required'
    }
};

var drawsCheck = function() {
    $("input[id^='user_number']").each(function() {
        messages[$(this.id)] = {
            checkLotteryNumber: 'Please, write numbers from 1 to 52 only',
            required: 'This field is required'
        };
    });
}
console.log(messages);
drawsCheck() 

$('form.user-input').validate({
    rules: rules,

    messages: messages,
.....

标签： javascriptjquery