验证表单的文本区域 - jQuery

Question

我正在尝试为应用程序开发一个插件，让用户只需发送电子邮件即可邀请他们的朋友使用该应用程序。像 Dropbox 所做的那样，让用户邀请朋友并获得额外的空间。

我正在尝试使用 JQuery（我是 JQuery 新手）验证表单（textarea）中唯一的字段，然后再提交并由 php 处理。

此文本区域将包含电子邮件地址，如果多个，则以逗号分隔。甚至不确定 textarea 是否最适合我想要完成的工作。无论如何，这是我的表单代码：

<form id="colleagues" action="email-sent.php" method="POST">
    <input type="hidden" name="user" value="user" />
    <textarea id="emails" name="emails" value="emails" placeholder="Example: john@mail.com, thiffany@mail.com, scott@mail.com..."></textarea>
	</br><span class="error_message"></span>
    <!-- Submit Button -->
     <div id="collegues_submit">				
        <button type="submit">Submit</button>
     </div>
</form>

这是我在 Jquery 中尝试的但没有成功：

//handle error 
    $(function() {
          $("#error_message").hide();
          var error_emails = false;

          $("#emails").focusout(function() {
            check_email();
          });

        function check_email() {
          if(your_string.indexOf('@') != -1) {
            $("#error_message").hide();
          } else {
            $("#error_message").html("Invalid email form.Example:john@mail.com, thiffany@mail.com, scott@mail.com...");
            $("#error_message").show();
            error_emails = true;
            }
          }
          
          $("#colleagues").submit(function() {
            error_message = false;
            
            check_email();
            
            if(error_message == false) {
              return true;
            } else {
              return false;
            }
    });

我希望问题足够清楚，如果您需要更多信息，请告诉我。

非常感谢您的所有帮助和建议。

Answer 1

    var array = str.split(/,\s*/);
    array.every(function(){
    if(!validateEmail(curr)){
    // email is not valid!
return false;
    }
    })

//代码来自大名鼎鼎的Email validation

function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

Answer 2

我记下的几个错误：

1. 此处发布的代码 sn-p 末尾缺少大括号 });。
2. 另外，check_email 函数中的 your_string 变量是什么。
3. 此外，error_message 始终被分配为 false，因此提交方法将始终返回 true。

解决此问题应该会对您有所帮助。

Answer 3

正如我在上面评论的那样，我会使用 append() 或 prepend() 并添加字段。正如在另一篇文章中提到的，客户端使用 jQuery 验证，但您应该确保使用循环和filter_var($email, FILTER_VALIDATE_EMAIL) 验证服务器端。这是prepend() 的一个非常基本的示例：

<form id="colleagues" action="" method="POST">
    <input type="hidden" name="user" value="user" />
    <input name="emails[]" id="starter" placeholder="Email address" />
    <div id="addEmail">+</div>
    </br><span class="error_message"></span>
    <!-- Submit Button -->
     <div id="collegues_submit">                
        <button type="submit">Submit</button>
     </div>
</form>
<script>
$(document).ready(function() {
    $("#addEmail").click(function() {
        $("#colleagues").prepend('<input name="emails[]" placeholder="Email address" />');
    });
});
</script>

Answer 4

您好，请使用下面的js代码，

  $('#emails').focusout(function(e) {
  var email_list = $('#emails').val();
  var email_list_array = new Array();
  email_list_array = email_list.split(",");
  var invalid_email_list=' ';
  $.each(email_list_array, function( index, value ) {

   if(!validEmail(value))
   {
     invalid_email_list=invalid_email_list+' '+value+',';
   }
  });
      console.log(invalid_email_list+' is not correct format.');
     alert(invalid_email_list+' is not correct format.');
 })

 function validEmail(v) {
var r = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?");
return (v.match(r) == null) ? false : true;
}

如果您需要检查更多正则表达式，只需执行 validEmail() 函数即可。我希望这将有助于解决问题。

谢谢

Answer 5

您的代码可能看起来正确，但您使用的技术不好。我的建议是使用 jquery validation plugin 来处理 textarea validation.for 你。还要注意。这个问题可能有很多解决方案，但你应该坚持简单的一个。我马上看到的第一个问题是：按钮标签没有类型属性。您正在更改#error_message html，而不是文本。等等……