Question

我这里有关于输入类型电子邮件的简单代码。我有一些关于在用户点击按钮时验证电子邮件的参考。这是参考http://stackoverflow.com/questions/46155/validate-email-address-in-javascript

HTML代码

<html>
<body>
    <div class="form-group">
        <input class="form-control" placeholder="Email" name="email" id="email" type="email" required>
        <span id="checkEmail"></span>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<html>

我尝试使用keyup事件函数验证并在span标记id =“checkEmail”中显示消息，但它似乎不起作用。我的语法不正确吗？请帮忙。

脚本

<script>
//Email Regular Expression function
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);
}

//Email Validate function
function validate() {
    $("#email").keyup(function() {

        var email = $("#email").val();
        if (validateEmail(email)) {
            $("#checkEmail").text(email + " is valid :)");
            $("#checkEmail").css("color", "green");
        } else {
            $("#checkEmail").text(email + " is not valid :(");
            $("#checkEmail").css("color", "red");
        }
    });

   //UPDATE
   $(document).ready(function() {
    $("#checkEmail").keyup(validate);
   });
   }
</script>

Answer 1

您的代码适合我，我需要做的就是致电

validate();

在文档加载的任何地方实际绑定事件。

（这意味着您可能希望在validate函数之外移动绑定，以便在您单击/使用该函数时不重新绑定它）

编辑：我为你准备了一个小提琴： https://jsfiddle.net/caz9o53e/

Answer 2

我认为你可以使用这个小提琴链接，做的工作。

http://jsfiddle.net/o6d86xtw/1/

HTML

<label for="email" id="email">Hey!</label>
<input id="email" name="email" type="email" class="required" /> 
<span class="msg error">You shall not pass!</span>
<span class="msg success">You can pass!</span>

JQuery

var component = {
    input   : $('input[name="email"]'),
    mensage : {
        fields  : $('.msg'),
        success : $('.success'),
        error   : $('.error')
    }
},
   regex  = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;

component.input.blur(function () {
    component.mensage.fields.hide();
    regex.test(component.input.val()) ? component.mensage.success.show() : component.mensage.error.show();
});

注意：我分道别人的小提琴。

在span标记内验证电子邮件并显示消息

2 个答案: