处理程序不工作（html，javascript）

Question

<form method="post" action=".">
   <label class="input-label">First Name </label><input field="first_name" class="input-edit" maxlength="30" type="text" value="{{ user.first_name }}" />               

  <label class="input-label"> Email </label><input field="email" class="input-edit" maxlength="75" type="text" value="{{ user.email }}" onkeyup="checkMail(this)" />

  <input type="submit" id="save-changes-settings-submit" class="save-changes-button" uid="{{ user.id }}" value="Save changes" />
</form>
<script>
    $(document).ready(function(){
        function isValidEmailAddress(emailAddress) {
            var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
            return pattern.test(emailAddress);
        };

        function checkMail(input){
            if( !isValidEmailAddress( input ) ){
                alert("wrff");
                $(this).addClass("correct-input");
            }
            else{
                alert("correct");
                $(this).addClass("wrong-input");
            }
        };
    });   
</script>

这是我的html和java脚本代码。但是当我在浏览器中运行它时，它不起作用。 Firefox提供了“checkMail”功能未定义的错误。但是，正如人们所看到的，它就在那里。我尝试将脚本放在最上面，它仍然无法正常工作。我不知道出了什么问题。

Answer 1

您不需要将函数包装在$(document).ready() { ... }中，函数不会被触发onload，因为它们被调用，DOM已经被加载。由于$(this)引用了一个jQuery元素，当你调用它时，没有this可以引用。

Answer 2

checkMail存在于全局上下文之外。只有此函数中存在的代码

function(){
    function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        return pattern.test(emailAddress);
    };

    function checkMail(input){
        if( !isValidEmailAddress( input ) ){
            alert("wrff");
            $(this).addClass("correct-input");
        }
        else{
            alert("correct");
            $(this).addClass("wrong-input");
        }
    };
}

可以访问函数checkMail。可能最好的方法是使用jQuery的keyup（）方法来注册事件处理程序。

$("#inputElement").keyup(function(){ // your code here... });

确保它在$（document）.ready（）函数中。

Answer 3

将您的函数放在document.ready之外，并将您输入onkeyup更改为onblur事件并传递参数this.value

的onblur = “checkMail（THIS.VALUE）”