jQuery表单validation – 如何迭代
我正在尝试创建一个javascript – jQuery表单validation器。
我有一个数组,其中包含每个字段的正则表达式,一个具有每个字段的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,因为它只是一个表单,但如果需要我会发布它。
为什么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('' + test.error + '
'); } });
for(var i=0;i<8;i++) { $(nm[i]).blur(function(e) { alert(e.target.id); }); }
当jQuery Validate和其他基于jQuery的validation插件存在时,为什么要编写自己的? 默认消息以多种语言提供。 您只需在需要时定义自定义消息。