javascript - 正则表达式验证问题

Question

我有一个表格:

<form onsubmit="return validate(this);" accept-charset="UTF-8" action="/abc_forms" class="niceform" id="new_abc_form" method="post" name="form""><div style="margin:0;padding:0;display:inline">
   <div class="specify_your_own" id='TextBoxesGroup'>
        <label>Specify your own</label>
        <input id="abc_form_git_repos_name" maxlength="32" name="abc_form[git_repos_name]" size="32" type="text" />
        <select name="gitcategory[name]" id="git_category_name">
          <option value="">Select Category</option>
          <option value="a">a</option>
          <option value="b">b</option>
          <option value="c">c</option>
          <option value="d">d</option>
          <option value="e">e</option>
        </select>
        <div id="TextBoxDiv">
            </div>
        <input type='button' value='Add More' id='addButton' style="margin-left: 200px; width: 70px;">
        <input type='button' value='Remove' id='removeButton' style="width: 70px;">
      </div>
      <div class="specify_your_own">
        <div style="margin-left:200px;" id="text"></div>
      </div>
      <br/>
      <br/>
      <div class="svn_field">
        <label class="form_bold">SVN Repository:</label>
        <div class="specify_your_own" id='TextBoxesGroupSecond'>
          <label>Specify your own</label>
          <input id="abc_form_svn_repos_name" maxlength="32" name="abc_form[svn_repos_name]" size="32" type="text" />
          <select name="svncategory[name]" id="git_category_name">
            <option value="">Select Category</option>
            <option value="a">a</option>
            <option value="b">b</option>
            <option value="c">c</option>
            <option value="d">d</option>
            <option value="e">e</option>
          </select>
          <div id="TextBoxDivSecond">
            </div>
            <input type='button' value='Add More' id='addButtonSecond' style="margin-left: 200px; width: 70px;">
            <input type='button' value='Remove' id='removeButtonSecond' style="width: 70px;">
        </div>
        <div class="specify_your_own">
          <div style="margin-left:200px;" id="text2"></div>
        </div>
  </fieldset>
  <div class="instance_submit">
    <input name="commit" type="submit" value="Submit" />
  </div>
</form>

对于“添加更多”按钮，我有一个 jquery 函数，它使用 select 标签添加更多文本框，如下所示:

<script type="text/javascript">
  $(document).ready(function(){
     var counter = 1;
     $("#addButton").click(function () {
  if(counter>6){
            alert("Not allowed to add more then 7 repositories");
            return false;
  }   
  var newTextBoxDiv = $(document.createElement('div'))
       .attr("id", 'TextBoxDiv' + counter);
    newTextBoxDiv.html("<label>Specify your own</label>"+"<input type='text' name='abc_form[git_repos_name_"+counter+"]' size='32' maxlength='32' value='' id='abc_form_git_repos_name_"+counter+"' >" + '<select id="git_category_name_'+counter+'" name="gitcategory[name_'+counter+']"><option value="">Select Category</option><option value="a">a</option><option value="b">b</option><option value="c">c</option><option value="d">d</option><option value="e">e</option><option value="f">f</option></select>' + '<br/>');
    newTextBoxDiv.appendTo("#TextBoxesGroup");
      counter++;
     });
      $("#removeButton").click(function () {
  if(counter==1){
          alert("No more to remove");
          return false;
       }   
  counter--;
         $("#TextBoxDiv" + counter).remove();
     });
  });
</script>

此函数添加了更多按钮并从用户那里获取输入并限制用户拥有超过 6 个输入。

现在，我终于有了一个如下所示的 javascript:

<script type="text/javascript">
var ck_git = /^(?!\d+$)[a-zA-Z0-9_,]*$/;
function validate(form){
  var git1 = form.abc_form_git_repos_name_1.value;
  var git2 = form.abc_form_git_repos_name_2.value;
  var git3 = form.abc_form_git_repos_name_3.value;
  var git4 = form.abc_form_git_repos_name_4.value;
  var git5 = form.abc_form_git_repos_name_5.value;
  var git6 = form.abc_form_git_repos_name_6.value;
  var svn1 = form.abc_form_svn_repos_name_1.value;
  var svn2 = form.abc_form_svn_repos_name_2.value;
  var svn3 = form.abc_form_svn_repos_name_3.value;
  var svn4 = form.abc_form_svn_repos_name_4.value;
  var svn5 = form.abc_form_svn_repos_name_5.value;
  var svn6 = form.abc_form_svn_repos_name_6.value; 
  var errors = [];
  if (!ck_git.test(git1)) {
    errors[errors.length] = "Git add more No.1 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
    }
    if (!ck_git.test(git2)) {
    errors[errors.length] = "Git add more No.2 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
    }
    if (!ck_git.test(git3)) {
    errors[errors.length] = "Git add more No.3 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
    }
    if (!ck_git.test(git4)) {
    errors[errors.length] = "Git add more No.4 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
    }
    if (!ck_git.test(git5)) {
    errors[errors.length] = "Git add more No.5 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
    }
    if (!ck_git.test(git6)) {
    errors[errors.length] = "Git add more No.6 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
    }
    if (!ck_git.test(svn1)) {
    errors[errors.length] = "Svn add more No.1 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
    }
    if (!ck_git.test(svn2)) {
    errors[errors.length] = "Svn add more No.2 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
    }
    if (!ck_git.test(svn3)) {
    errors[errors.length] = "Svn add more No.3 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
    }
    if (!ck_git.test(svn4)) {
    errors[errors.length] = "Svn add more No.4 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
    }
    if (!ck_git.test(svn5)) {
    errors[errors.length] = "Svn add more No.5 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
    }
    if (!ck_git.test(svn6)) {
    errors[errors.length] = "Svn add more No.6 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
    }
    if (errors.length > 0) {
    reportErrors(errors);
    return false;
  }
  return true;
  }
  function reportErrors(errors){
  var msg = "Please Enter Valide Data:\n";
  for (var i = 0; i<errors.length; i++) {
    var numError = i + 1;
    msg += "\n" + numError + ". " + errors[i];
  }
  alert(msg);
}
</script>

此 JavaScript 函数验证正则表达式并在验证失败时返回错误总和。

问题:只有当用户点击了 add more 6 次并生成了它正在寻找的所有 id 时，这才能正常工作。如果用户点击了一次添加但验证失败，表单仍然会被提交。我是一名 ROR 开发人员，不知道如何解决这个问题。

任何帮助将不胜感激。

Answer 1

如果他们没有添加所有的元素，那么像这样的行:

var git3 = form.abc_form_git_repos_name_3.value;

将失败，因为 form.abc_form_git_repos_name_3 将是 undefined。尝试访问 undefined 的 value 属性将抛出 JavaScript 错误，您的验证将无法完成(在这种情况下浏览器将继续提交表单)。

您需要做的是在尝试访问它们的属性之前确保这些元素存在:

if(form.abc_form_git_repos_name_3)
    var git3 = form.abc_form_git_repos_name_3.value;

将 undefined 传递给 test 函数将返回 false，因此您还需要检查 git3 等在调用正则表达式之前设置:

if(git3 && !ck_git.test(git3)) {
    ...
}