JavaScript 挑战表单元素数组验证

Question

我有一个 HTML 表单:

<form name="modeladd" ethod="post" class="form label-inline" enctype="multipart/form-data" onSubmit="return check('modeladd');">
            <?php  for($i=0;$i<$tot;$i++) { ?>      
                <div class="field">
                <label for="connect_msg">Connect Message </label>                                                                   
                <textarea rows="4" cols="50" name="connect_msg[<?php echo getField($langs[$lan]);?>]" id="connect_msg[]"><?php echo getField($row[$lan]); ?></textarea>
                </div>              
                <div class="field">
                <label for="call_msg">Call Message :</label>                                                
                <textarea rows="4" cols="50" name="call_msg[<?php echo getField($langs[$lan]);?>]" id="call_msg"><?php echo getField($row[$lan]); ?></textarea>
                </div>
                
                <div class="field">
                <label for="stripline_msg">Stripline Message :</label>                                              
                <textarea rows="4" cols="50" name="stripline_msg[<?php echo getField($langs[$lan]);?>]" id="stripline_msg"><?php echo getField($row[$lan]); ?></textarea>
                </div>
            <div class="field">
                    <label for="cost_msg">Cost Message :</label>                                                
                <textarea rows="4" cols="50" name="cost_msg[<?php echo getField($langs[$lan])?>]" id="cost_msg"><?php echo getField($row[$lan]); ?></textarea>
                </div>          
                <?php } ?>
<input type="submit" class="btn btn-grey" value="submit">
</form>

这是用于验证的 JavaScript:

function check(form)
{
   var name = new Array();
   name =document.getElementById('connect_msg[]').value;

   for(var i=0 ; i<=1; i++)
   { 
      alert(name[i].value); 
   }
   return true;
}

我没有获得两个 connect_msg 字段(数组)的值。我想使用 JavaScript 验证这两个字段值，所以请帮助我。

Answer 1

1. id 不能包含 [] 符号。请验证您的标记:http://validator.w3.org/
2. 从元素返回的value是string类型，因此您无法获取数组。您可以做的是解析字符串以创建数组。

例如。假设以下是输出的标记:

<textarea id="connect_msg">a,b,c,d,e,f,g</textarea>

您可以在 JavaScript 中执行此操作:

var getConnectMsg = document.getElementById('connect_msg').value;
var connectMsgArray = getConnectMsg.split(',');

并且 connectMsgArray 将包含 ['a','b','c','d','e','f','g'] .

您可以在此处阅读有关 .split() 的更多信息:https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/split

编辑:既然您说 textarea 处于循环中，那么使用 class name 属性检索元素会更容易，并且使用jQuery会给你很大的帮助。

因此 HTML 输出将如下所示:

<textarea class="connect_msg" id="connect_msg1">a,b,c,d,e,f,g</textarea>
<textarea class="connect_msg" id="connect_msg2">h,i,j,k,l,m,n</textarea>
<textarea class="connect_msg" id="connect_msg3">q,r,s,t,u,v</textarea>

var getConnectMsg = $('.connect_msg');
getConnectMsg.each(function(){
    var getValue = $(this).val();
    var connectMsgArray = getValue.split(',');
});

在 .each() 的每次迭代中，getValue 的值将为:

 a,b,c,d,e,f,g
 h,i,j,k,l,m,n
 q,r,s,t,u,v

您可以在每次迭代期间对一组字段进行表单验证。