Question

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

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

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

我的代码在这里：

$(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)时，在.blur函数内它总是显示8，无论我在哪个领域运行它。

我做错了什么？

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

Answer 1

为什么for循环？为什么要在循环中设置blur()事件呢？我不明白你背后的理由。您可以只为您的字段提供一个类，为该类分配事件，而不是创建一个id数组。

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

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

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>');
    }
});

Answer 2

for(var i=0;i<8;i++) {
    $(nm[i]).blur(function(e) {
        alert(e.target.id);
    });
}

Answer 3

当jQuery Validate和其他基于jQuery的验证插件存在时，为什么要编写自己的？默认消息以多种语言提供。您只需在需要时定义自定义消息。

jQuery表单验证 - 如何迭代

3 个答案: