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

Posted 2023-04-01

【中文标题】如何在 mvc 中使用 foreach 循环验证多个文本框？

【英文标题】：how to validate multiple textbox using foreach loop in mvc?

【发布时间】：2021-10-18 04:47:03

【问题描述】：

 <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]\d9)$/;
    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;
    
  

这仅验证第一行而不是第二行。如何验证？

【问题讨论】：

id 必须是唯一的，所以为什么它验证第一行不是全部，使用class 而不是id 来验证。

@shubham raut：将validation attributes 应用于您的模型类更合理。

感谢 @jackdaw 的建议，但我也有 30 个字段可以应用模型验证，但出于某种原因，我只需要 JavaScript 验证。

@Shree 我试过上课，但还是同样的问题。

【参考方案1】：

第一步：生成表格中每个控件的动态ID

第 2 步：设置 onblur 或离开 javascript 事件

第 3 步：为移动模式和电子邮件模式检查创建函数

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

第五步：在 onblur 事件或离开事件中调用函数

请检查下面的代码，希望它能正常工作

<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]\d9)$/;

        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;
        
    

【讨论】：

谢谢，我现在就去看看。

谢谢@Hardik 您的解决方案非常适合我。只是我需要在关闭 tr 以增加 id 后增加计数。再次非常感谢您。