jQuery动态表单验证
jQuery动态表单验证
提问于 2017-08-21 14:49:18
工作js小提琴:http://jsfiddle.net/dofpezeg/这是一个动态表单，当我点击add按钮时，我面临的问题是，当我点击add按钮时，新的字段被创建，并且验证不会自动运行。我已经通过":input.req“使用了每个循环，其中validation.The是我为所有元素指定的类名，无论是静态的还是新建的。现在，在onclick中，我使用this.val()来检查空格，这对新创建的fields.and不起作用。当我打印"input.req.val()“中的值时，它总是在整个循环中提取第一个字段的值。如何才能以某种方式应用验证，使新字段不仅可以验证空，而且还可以验证正则表达式
$(document).on('click', '#btnac', function() {
var empty = false;
$(':input.req').each(function() {
console.log($(':input.req').val());
var cbn = $('.newcbn').val();
var cba = $('.newcba').val();
var cban = $('.newcban').val();
var cbic = $('.newcbic').val();
var cuser = $('#cuser').val();
alert($(':input.req').val());
if ($(this).val() === '') {
empty = true;
} else if (/^[a-zA-Z ]+$/.test(cbn) === false) {
empty = true;
} else if (/^[a-zA-Z ]+$/.test(cba) === false) {
empty = true;
} else if (/^[0-9]+$/.test(cban) === false) {
empty = true;
} else if (/^[A-Za-z]{4}\d{7}$/.test(cbic) === false) {
empty = true;
} else if (/^[0-9]+$/.test(cuser) === false) {
empty = true;
} else {
empty = false;
}
});
if (empty) {
$('#btnac').attr('disabled', 'disabled');
} else {
$('#btnac').removeAttr('disabled');
}})；
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-08-21 19:26:28
尝试下面的代码，希望这是你想要的。
$(document).on('click', '#btnac', function() {
var empty = false;
$(':input.req').each(function() {
var val = $(this).val();// the value of the input on current loop index
var $this = $(this);
if (val === '') {// if value is empty
empty = true;
} else if ($this.hasClass('newcbn')) {// test use different Regexp according to the form input's class
empty = !/^[a-zA-Z ]+$/.test(val);
} else if ($this.hasClass('newcba')) {
empty = !/^[a-zA-Z ]+$/.test(val);
} else if ($this.hasClass('newcban')) {
empty = !/^[0-9]+$/.test(val);
} else if ($this.hasClass('newcbic')) {
console.info(val)
empty = !/^[A-Za-z]{4}\d{7}$/.test(val);
} else if ($this.attr('id') === 'cuser') {// test form $('#cuser')
empty = !/^[0-9]+$/.test(val);
} else {
empty = false;
}
if (empty) {// if value didn't pass validate, break loop and disable button #btnac
return false;
}
});
if (empty) {
$('#btnac').attr('disabled', 'disabled');
} else {
$('#btnac').removeAttr('disabled');
}
});我使用输入的类来确定哪个正则表达式测试值，如果有任何值是错误的，它将直接中断$(':input.req').each()循环，然后禁用该按钮。
Stack Overflow用户
发布于 2017-08-21 15:25:31
$(document).on('click', '#btnac', function() {
var empty = false;
$('input').on('change', function(e){
input_type =$(this).attr('type')
if(input_type == "text"){}
else if(input_type == "number"){}
else if(input_type == "textarea"){}
})您可以一次触发所有输入字段(页面上的所有输入字段都将被验证。为了避免这种情况，在输入字段上使用一些类，并像这样检查它们)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45790843
复制相关文章
相似问题
腾讯云开发者
