我创建了一个表单，其中的字段经过验证:标题、姓名、年龄、电子邮件、描述和文本。 您仍然可以添加一些字段。它们还需要验证，即字符数。 如何通过循环进行验证？对于所有字段，以便在每个未填写的字段附近显示错误。 还需要考虑到用户可以一键删除所有字段并重置字段计数器，该计数器会在每个添加的字段之后添加。 这是代码
<html>
<head>
<title>Dynamically add input field using jquery</title>
<style>
.container1 input[type=text] {
padding:5px 0px;
margin:5px 5px 5px 0px;
}
.add_form_field
{
background-color: #1c97f3;
border: none;
color: white;
padding: 8px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border:1px solid #186dad;
}
input{
border: 1px solid #1c97f3;
width: 260px;
height: 40px;
margin-bottom:14px;
}
.delete{
background-color: #fd1200;
border: none;
color: white;
padding: 5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var error_desc = false;
var error_text = false;
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div class="driver__list"><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
}
else
{
alert('You Reached the limits')
}
});
$(wrapper).on("click",".delete", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
$('#clear').click(function(){
x = 0;
$("input").closest('.container1').find('.driver__list').html('');
});
$('#age').keypress('', function () {
check_char(/^\d+$/,"#age","#age_error_message","Only numbers");
});
//https://stackoverflow.com/questions/6646613/please-explain-this-e-mail-validation-regular-expression
$('#email').keypress('', function () {
check_char(/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i,"#email","#email_error_message","Invalid email");
});
$('#name').keypress('', function () {
check_char(/^[a-zA-Z]*$/,"#name","#name_error_message","Text at least 7 characters");
});
$('#title').keypress('', function () {
check_field("#title","#title_error_message",7,"Text at least 7 characters");
});
$('#description').keypress('', function () {
check_field("#description","#desc_error_message",200,"Text at least 200 characters");
});
$('#text').keypress('', function () {
//check_text();
check_field("#text","#text_error_message",200,"Text at least 200 characters");
});
function check_char(pattern,id,err,mess)
{
var text = $(id).val();
if (pattern.test(text) && text !== '') {
$(err).hide();
$(id).css("border-bottom","2px solid #34F458");
} else {
$(err).html(mess);
$(err).show();
$(id).css("border-bottom","2px solid #F90A0A");
}
}
function check_field(id,err,len,mess)
{
var text = $(id).val();
if (text.length>len) {
$(err).hide();
$(id).css("border-bottom","2px solid #34F458");
}else
{
$(err).html(mess);
$(err).show();
$(id).css("border-bottom","2px solid #F90A0A");
}
}
});
</script>
</head>
<body>
<span id="mess"></span>
<div id="content">
<form name="add_name" id="add_name">
Title:<br>
<input type="text" id="title" name="title"><br>
<span class="error_form" id="title_error_message"></span>
Name:<br>
<input type="text" id="name" name="name"><br>
<span class="error_form" id="name_error_message"></span>
Age:<br>
<input type="text" id="age" name="age"><br>
<span class="error_form" id="age_error_message"></span>
Email:<br>
<input type="text" id="email" name="email"><br>
<span class="error_form" id="email_error_message"></span>
<div class="container1">
<button class="add_form_field">Add New Field <span style="font-size:16px; font-weight:bold;">+ </span></button><button id="clear">Clear</button>
<div class="driver__list"><input type="text" name="mytext[]"></div>
</div>
Description:<br>
<textarea cols="50px" id="description" rows="15px" name="description"></textarea><br>
<span class="error_form" id="desc_error_message"></span>
Text:<br>
<textarea cols="50px" id="text" rows="15px" name="text"></textarea><br>
<span class="error_form" id="text_error_message"></span><br>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</form>
</div>
</body>
</html>
最佳答案
为什么要以这种方式验证它？可以使用 HTML data- 属性定义字段长度等验证规则:
<input type="text" name="surname" minlength="4" maxlength="15" data-toggle-validation="1">
之后，您可以使用 data-toggle-validation 属性在 input 元素上绑定(bind)事件监听器:
$('#content > form#add_name').on('change', 'input[data-toggle-validation="1"]', function() {
...
});
另外，也不要忘记 HTML 验证。
关于javascript - 如何对动态字段进行验证？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59914862/