Question

我希望让观众不要输入“fssadf”这样的字词，并强制他们输入有效的电子邮件，其中间必须包含“@”和“。”防止垃圾邮件和注入。

我还希望表单显示一条错误消息，上面写着“将电子邮件字段更改为正确的电子邮件”

我使用包含此内容的js_function.js：

function validEmail()
{   
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var email_address = $("#email").val();  
    if(reg.test(email_address) == false) 
      return false;
    else
        return true;
}

但它不会阻止观众向我发送“sfdasfd”而不是有效的电子邮件。

我可以做些什么来实现上述目标？

查看以下文件： http://www.mediafire.com/?kx5bvttc0s2fbrs

感谢，支

Answer 1

虽然我在程序中没有看到您提供的任何错误，但您仍然可以使用

var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;

而不是

var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

我认为这会有所帮助。我提供了适合我的Javascript代码。

function validEmail()
    {   

       var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
        var email_address = $("#email").val();  
        if(reg.test(email_address) == false) 
          return false;
        else
            return true;
    }

使用此

或者你也可以用其他方式使用它

HTML

<form>
  //Other Codes
  <input type="text" name="email" id="email" onchange="validate(this.value)" />
  //Other Codes
</form>

和Javascript

<script>

function validate(email) 
{
    var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
    if(reg.test(email) == false) 
        {
            alert("This is a invalid Email Address!");
            document.getElementById('email').value = '';
        document.getElementById('email').focus();
        return false;
    }
    else{
        return true;
    }
}
</script>

OR

HTML

<form>
  //Other Codes
  <input type="text" name="email" id="email" onchange="validate()" />
  //Other Codes
</form>

和Javascript

<script>

function validate() 
{
    var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
    var email = document.getElementById('email').value;
    if(reg.test(email) == false) 
        {
            alert("This is a invalid Email Address!");
            document.getElementById('email').value = '';
        document.getElementById('email').focus();
        return false;
    }
    else{
        return true;
    }
}
</script>

我认为最后的解决方案将更容易应用。

页面上的错误消息而不是弹出

HTML

<form>
      //Other Codes
      <input type="text" name="email" id="email" onchange="validate()" />
       <span id="errormessage"></span>
      //Other Codes
    </form>

和Javascript

<script>

function validate() 
{
    var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
       var email = document.getElementById('email').value;
    if(reg.test(email) == false) 
        {
            document.getElementById('errormessage').innerHTML= 'fill your email';
            document.getElementById('email').value = '';
        document.getElementById('email').focus();
        return false;
    }
    else{
            document.getElementById('errormessage').innerHTML= '';
        return true;
    }
}
</script>

Answer 2

试试这个

$(document).ready(function() {

$('#btn-submit').click(function() { 

    $(".error").hide();
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var emailaddressVal = $("#UserEmail").val();
    if(emailaddressVal == '') {
        $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
        hasError = true;
    }

    else if(!emailReg.test(emailaddressVal)) {
        $("#UserEmail").after('<span class="error">Enter a valid email address.</span>');
        hasError = true;
    }

    if(hasError == true) { return false; }

});

}）;

Answer 3

这个问题的重复：

Validate email address in JavaScript?

关于边缘情况的评论中有一些有价值的讨论，不应该被忽略。

在你问之前，你有没有试过谷歌这个？这是一个/非常/常见的问题。

Answer 4

如果您正在使用jQuery的纯HTML5解决方案....这是一个实时的demo

HTML

<form id="form">
    Email <input name="field1" required="required" type="email" /> <br />
    <div id="error"></div>
   <input required="required" name="submit" type="submit" />
</form>

代码

$(document).ready(function() {
    var validCheckInput = function() {
        if ($(this)[0].checkValidity()) {
            $(this).removeClass("error");
            $("#error").empty();                
        } else {
            $(this).addClass("error");
            $("#error").text("change the email field to the correct email");
        }

        if ($("#form")[0].checkValidity()) {
            $("#form input[type='submit']").removeAttr("disabled");
        } else {
            $("#form input[type='submit']").attr("disabled", "disabled");
        }
    };s

    var binds = function(validCheck) {
        $(this).change(validCheck);
        $(this).focus(validCheck);
        $(this).keyup(validCheck);
        validCheck.call($(this));
    }
    $("#form input").each(function() {binds.call(this, validCheckInput)});

});

CSS

.error {
  border: 2px solid red;
 }

通过Javascript进行HTML表单验证

4 个答案: