Question

我正在尝试开发一个应用程序的插件，让用户通过发送电子邮件邀请他们的朋友使用该应用程序。像Dropbox这样的Juts会让用户邀请朋友并获得额外的空间。

我试图在提交之前验证我在表单（textarea）中使用JQuery（我是JQuery的新手）的唯一字段，并由php处理。

此textarea将包含电子邮件地址，如果不止一个，则以逗号分隔。甚至不确定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

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

Answer 2

我记下几个错误：

此处发布的代码段最后缺少大括号}）; 。
此外， check_email 功能中的 your_string 变量是什么。
此外， error_message 总是被指定为false，因此提交方法将始终返回true。

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

Answer 3

    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 4

我会像上面评论的那样使用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 5

您好请使用以下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;
}

如果您需要查看更多REGEX，请执行validEmail（）函数。我希望这有助于理清。

谢谢

验证表单的textarea - jQuery

5 个答案: