jQuery表单验证 - 如何迭代 [英] jQuery form validation - how to iterate

问题描述

我正在尝试创建一个javascript - jQuery表单验证器。

I am trying to create a javascript - jQuery form validator.

我有一个数组，其中包含每个字段的正则表达式，每个字段的id都有一个数组如果输入的值与每个输入的正则表达式不匹配，我想向用户显示错误消息的第三个。

I have an array with the regular expressions for each field, an array with the id of each field, and a third one with the error message I want to show the user if the entered value does not match the regular expression for each input.

我正在尝试运行一个循环，并在其中，为我的每个表单输入创建.blur事件侦听器。

I am trying to run a loop, and within it, create the .blur event listeners for every one of my form inputs.

我的代码在这里：

$(function(){
    signUp()
    })

function signUp(){
var err = new Array();
var regex = new Array();
var mess = new Array();
var nm = new Array();
var i = 0;

// regex definitions //
regex[0] = /^[a-zA-Z]+([\s][a-zA-Z]+)*$/;regex[1] = regex[0]; //onoma , epwnimo
regex[2] = /^(\d){10}$/;regex[3] = /^([a-zA-Z\-]+\s)+\d{1,5}$/; //tilefwno , dieuthinsi
regex[4] = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;regex[5] = regex[4]; // email
regex[6] = /^[a-zA-Z0-9]+([\_]?[\-]?[a-zA-Z0-9]+)*$/;regex[7] = regex[6]; // password

// message definitions //
mess[0] = 'Το όνομα πρέπει να αποτελείται μόνο απο λατινικούς χαρακτήρες και κενά!';
mess[1] = 'Το επώνυμο πρέπει να αποτελείται μόνο απο λατινικούς χαρακτήρες και κενά!';
mess[2] = 'Το τηλέφωνο πρέπει να αποτελείται από 10 ψηφία!';
mess[3] = 'H διεύθυνση πρέπει να περιέχει οδό και αριθμό με λατινικούς χαρακτήρες, π.χ. Ellinos Stratiwtou 13!';
mess[4] = 'Εισάγετε μια έγκυρη διεύθυνση email!';mess[5] = mess[4];
mess[6] = 'Το password πρέπει να αποτελείται απο λατινικούς χαρακτήρες, αριθμούς, _ και -';mess[7] = mess[6];

// div name definitions //
nm[0] = '#onoma';nm[1] = '#epwn';nm[2] = '#tele';nm[3] = '#addr';
nm[4] = '#ema';nm[5] = '#emai';nm[6] = '#pasw';nm[7] = '#conpass';

for(;i<8;i++){
    $(nm[i]).blur(function(){
        alert(nm[i])
        })
    }
}

我希望上面的代码会发出警报我触发模糊事件的表单输入的名称，但我得到的是未定义的，当我尝试 alert（i）时，在$ code内> .blur 函数，它总是显示8，无论我在哪个字段上运行它。

I was hoping the code above would alert me the name of the form input that triggered the blur event, but all I get is undefined, and when I try to alert(i), within the .blur function, it always shows 8, no matter what field I run this on.

我做错了什么？

注意：我没有发布我的HTML，因为它只是一个表格，但我会在需要时发布。

Note: I have not posted my html since it's just a form, but I will post it if needed.

推荐答案

为什么为循环？为什么在循环内设置 blur（）事件呢？我不明白你背后的理由。您可以只为您的字段指定一个类，为该类分配事件。

Why the for loop? And why set the blur() event inside of the loop like that?. I don't understand your reasoning behind this. Instead of creating an array of ids, you can just give your fields a class an assign the event on that class.

$('.field').blur(function () {
    alert(this.id);
});

编辑：
想法是使用对象而不是数组，基本上创建一个对象所有正则表达式和错误以及一个评估字段的函数。这样的事情：

The idea is to use objects instead of arrays and basically create one object with all the regex and errors and one function to evaluate the fields. Something like this:

var filters = {
    name : {
        re : /^[a-zA-Z]+([\s][a-zA-Z]+)*$/,
        error : 'Name Error!'
    },
    email : {
        re : /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/,
        error : 'E-Mail Error!'
    },
    password : {
        re : /^[a-zA-Z0-9]+([\_]?[\-]?[a-zA-Z0-9]+)*$/,
        error : 'Password Error!'
    }
};

var validate = function(klass, str) {
    var valid = true,
        error = '';
    for (var f in filters) {
        var re = new RegExp(f);
        if (re.test(klass)) {
            if (str && !filters[f].re.test(str)) {
                error = filters[f].error;
                valid = false;
            }
            break;
        }
    }
    return {
        error: error,
        valid: valid
    }
};

$('.field').blur(function() {
    var test = validate(
        $(this).attr('class'),
        $(this).val()
    );
    if (!test.valid) {
        $('#errors').append('<p>' + test.error + '</p>');
    }
});

这篇关于jQuery表单验证 - 如何迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！