我需要一些有关 JavaScript 的帮助，以便在 JavaScript 中使用 for 进行表单验证。
我有一个包含 5 个用户名和密码字段的表单，需要使用 JavaScript 来验证表单，然后才能将其提交到数据库。
你可以看到我需要的代码和结果here in this JsFiddle
或
这是我认为的代码:
<form action="insertMember" method="post" name="fmember" onsubmit="return validateMember()">
<div class="form-group">
<label>Shop</label>
<select>
<option value="">Choose The Host</option>
<option value="1">Shop 1</option>
<option value="2">Shop 2</option>
</select>
</div>
<?php
$max = 5;
for($i=1; $i<=$max; $i++) { ?>
<span class="error<?php echo $i; ?>" class="label label-danger"></span>
<label>Username <?php echo $i; ?></label>
<input type="text" name="user[<?php echo $i; ?>]">
<label>Password <?php echo $i; ?></label>
<input type="password" name="pass[<?php pass $i; ?>]">
<span class="errorp<?php echo $i; ?>" class="label label-danger"></span>
<?php } ?>
</form>
这是我的 Javascript 代码(仍然错误):
// How to validate input using FOR LOOP ?
// $max or max can be changes to 10 or more.
function validateMember() {
// I got an error from here.
var max = 3;
var member = [];
var password = [];
for(var i=1; i<=max; i++) {
var member = document.forms.fmember.user[i].value;
var password = document.forms.fmember.pass[i].value;
// Validate only username 1 must be filled or return error message
if(i == 1) {
if(member[i] == '') {
document.getElementByID('error'+i).innerHTML = 'Username Must be Filled !';
return !1;
}
else if (password[i] == '') {
document.getElementByID('errorp'+i).innerHTML = 'Password Must be Filled !';
return !1;
}
else {
return !0;
}
}
else {
// Validate if username 2 until MAX are filled must have min length = 2
if(member[i] != '') {
if(member[i].length < 2) {
document.getElementByID('error'+i).innerHTML = 'Username Must Have Minimum 2 Characters';
return !1;
}
else {
return !0;
}
}
}
}
}
最佳答案
这里有多个问题:
输入元素的name属性值具有数组语法
<input type="text" name="user[1]">但是，当通过 Javascript 访问这些内容时，
document.forms.fmember在键 user 处不包含数组 - 每个元素都有一个唯一的键。尝试在控制台中运行此命令:Object.keys(document.forms.fmember.elements)。您应该看到如下所示的数组:["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "shop", "user[1]", "pass[1]", "user[2]", "pass[2]", "user[3]", "pass[3]", "user[4]", "pass[4]", "user[5]", "pass[5]"]所以更新这一行:
var member = document.forms.fmember.user[i].value;致:
var member = document.forms.fmember["user["+i+"]"].value;对于
password变量也是如此:var password = document.forms.fmember["pass["+i+"]"].value;包含文本输入值的变量(即
member和password)具有字符串类型的值，因此要检查空字符串，只需使用if(member == '') {而不是if(member[i] == '') {...
请参阅下面的这些更改(或 updated plunker )。
$('#shop').on('change',function() {
$('#input').fadeIn(1000);
if ($('#shop').val() == '') {
$('#input').fadeOut(500);
}
});
// The question is HERE
// How to validate input using FOR LOOP ?
// Because the $max or max can be changed to 10 or more.
function validateMember() {
// I got an error from here.
var max = 3;
var member = [];
var password = [];
for(i=1; i<=max; i++) {
var member = document.forms.fmember["user["+i+"]"].value;
var password = document.forms.fmember["pass["+i+"]"].value;
// Validate only username 1 must be filled or return error message
if(i == 1) {
if(member== '') {
document.getElementById('error'+i).innerHTML = 'Username Must be Filled !';
return !1;
}
else if (password == '') {
document.getElementById('errorp'+i).innerHTML = 'Password Must be Filled !';
return !1;
}
else {
return !0;
}
}
else {
// Validate if username 2 until MAX are filled must have min length = 2
if(member != '') {
if(member.length < 2) {
document.getElementByID('error'+i).innerHTML = 'Username Must Have Minimum 2 Characters';
return !1;
}
else {
return !0;
}
}
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- This code is not the actually code, this code is just for an example -->
<div id="#formMember">
<h3>Input Member</h3>
<form name="fmember" onsubmit="return validateMember()">
<div>
<label>shop</label>
<select id="shop">
<option value="">Choose The Shop..</option>
<option value="1">Shop 1</option>
<option value="2">Shop 2</option>
</select>
</div>
<hr />
<div id="input">
<!-- This is actually use PHP for loop, i dont know how to use it at JsFiddle
<?php
$max = 3; //so sometimes we can change it if want to add more fields.
for($i=1; $i<$max; $i++) { ?>
<div class="form-group">
<span class="error<?php echo $i; ?>" class="label label-danger"></span>
<label>Username <?php echo $i; ?></label>
<input type="text" name="user[<?php echo $i; ?>]">
<label>Password <?php echo $i; ?></label>
<input type="password" name="pass[<?php pass $i; ?>]">
<span class="errorp<?php echo $i; ?>" class="label label-danger"></span>
</div>
<?php } ?>
-->
<h4>This is just an example after this form submitted</h4>
<div class="form-group">
<span id="error1" class="label label-danger">Username 1 Must be Filled !<br></span>
<label>Username 1</label>
<input type="text" name="user[1]">
<label>Password 1</label>
<input type="password" name="pass[1]">
<span id="errorp1" class="label label-danger">Password 1 Must Be Filled !<br></span>
</div>
<div class="form-group">
<span id="error2" class="label label-danger">Username 2 Must Have Minimum 2 Characters !<br></span>
<label>Username 2</label>
<input type="text" name="user[2]" value="a">
<label>Password 2</label>
<input type="password" name="pass[2]" value="xxxxx">
<span id="errorp2" class="label label-danger"></span>
</div>
<div class="form-group">
<span id="error3" class="label label-danger"></span>
<label>Username 3</label>
<input type="text" name="user[3]">
<label>Password 3</label>
<input type="password" name="pass[3]">
<span id="errorp3" class="label label-danger"></span>
</div>
<div class="form-group">
<span id="error4"></span>
<label>Username 4</label>
<input type="text" name="user[4]" value="username2">
<label>Password 4</label>
<input type="password" name="pass[4]">
<span id="errorp4" class="label label-danger">Password 4 Must Be Filled !<br></span>
</div>
<div class="form-group">
<span id="error5"></span>
<label>Username 5</label>
<input type="text" name="user[5]">
<span id="errorp5"></span>
<label>Password 5</label>
<input type="password" name="pass[5]">
</div>
<button type="submit" class="col-sm-offset-2 btn btn-primary">
Submit
</button>
</div>
</form>
</div>关于使用 FOR 循环的 Javascript 表单验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47199388/