如何验证多个文本框使用foreach循环在mvc?

Question

<div class="container" id="editdirector">             
<table id="tblEdit1" class="table table-hover table-bordered" style="margin-top: 20px;">
<thead style="text-align: center;">
<tr>                        
<th>Name</th>
<th>Mobile</th>
<th>Email</th>                        
</tr>
</thead>
<tbody style="text-align: center; text-transform:uppercase"> 
@int count; 
@foreach (var item in Model.Directors)
{

<tr class="item1">
<td hidden>
<input type="hidden" class="id1" name="" id="ID" value="@item.ID" />
</td>
<td>


<input type="text" class="name1" id="txtName" value="@item.Dir_Name" onchange="DirectorValidation();" style=" text-transform uppercase">

</td>
<td>

<input type="text" class="mobile1" id="txtMobile" value="@item.Dir_Mobile" onchange="DirectorValidation();">

</td>
<td>

<input type="text" class="email1" id="txtEmail" value="@item.Dir_Email" onchange="DirectorValidation();" style="text-transform: uppercase">

</td>

</tr>         
}                
</tbody>

</table>
<button type="button" id="AddGrid" class="btn btn-default" style="border-radius: 20px; background: #59980c; color: #ffffff; margin-bottom: 20px;">
Update Director
</button>
</div>

我想对foreach循环生成的所有行进行JavaScript验证但它只会验证第一行而不是第二行或第三行这是相应的代码

function DirectorValidation() {
if ($('#txtMobile').val() == "") {
alert('Enter Mobile No.');
$('#txtMobile').focus();
return false;
}
if ($('#txtMobile').val() != "") {
var mobilePattern = /^([6-9]d{9})$/;
if (!$('#txtMobile').val().match(mobilePattern)) {
alert('Invalid Mobile No.');
$('#txtMobile').focus();
return false;
}
}

if ($('#txtEmail').val().trim() == "") {
alert('Please Enter Email.');
$('#txtEmail').focus();
return false;
}
if ($('#txtEmail').val() != "") {
var emailPattern = /^([a-zA-Z0-9_-.]+)@@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([a-zA-Z0-9-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$/;
if (!$('#txtEmail').val().match(emailPattern)) {
alert('Invalid Email Id.');
$('#txtEmail').focus();
return false;
}
}
}

这只验证第一行而不验证第二行。我如何验证?

Answer 1

步骤1:生成表

中每个控件的动态ID步骤2:设置onblur或leave javascript event

步骤3:创建手机模式和电子邮件模式检查功能

步骤4:检查这些Pattern函数中的值是否为空

步骤5:调用onblur事件或leave事件的函数

请检查下面的代码，我希望它是工作的

<div class="container" id="editdirector">             
<table id="tblEdit1" class="table table-hover table-bordered" style="margin-top: 20px;">
<thead style="text-align: center;">
<tr>                        
<th>Name</th>
<th>Mobile</th>
<th>Email</th>                        
</tr>
</thead>
<tbody style="text-align: center; text-transform:uppercase"> 
@int count; 
@foreach (var item in Model.Directors)
{
<tr class="item1">
<td hidden>
<input type="hidden" class="id1" name="" id="ID" value="@item.ID" />
</td>
<td>
<input type="text" class="name1" id="txtName_@count" value="@item.Dir_Name" style=" text-transform uppercase">
</td>
<td>
<input type="text" class="mobile1" id="txtMobile_@count" value="@item.Dir_Mobile" onblur="CheckMobileNo(this.id);">
</td>
<td>
<input type="text" class="email1" id="txtEmail_@count" value="@item.Dir_Email" onchange="CheckEmail(this.id);" style="text-transform: uppercase">
</td>
</tr>         
}                
</tbody>
</table>
<button type="button" id="AddGrid" class="btn btn-default" style="border-radius: 20px; background: #59980c; color: #ffffff; margin-bottom: 20px;">Update Director</button>
</div>
function CheckMobileNo(id)
{
if ($('#' + id).val() == "") 
{
alert('Enter Mobile No.');
$('#' + id).focus();
return false;
}
else if ($('#' + id).val() != "") 
{
var mobilePattern = /^([6-9]d{9})$/;
if (!$('#' + id).val().match(mobilePattern)) 
{
alert('Invalid Mobile No.');
$('#' + id).focus();
return false;
}
}
}
function CheckEmail(id)
{
if ($('#' + id).val().trim() == "") 
{
alert('Please Enter Email.');
$('#' + id).focus();
return false;
}
if ($('#' + id).val() != "") 
{
var emailPattern = /^([a-zA-Z0-9_-.]+)@@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([a-zA-Z0-9-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$/;
if (!$('#' + id).val().match(emailPattern)) 
{
alert('Invalid Email Id.');
$('#' + id).focus();
return false;
}
}
}