OnBlur函数AskaQuestionTest.php:100未介绍的参考文献:htmlinputelement.on

Question

所以这很奇怪，我有两个输入a ln和fn，显然是名字和姓氏输入。但是由于某种原因，我姓氏上的bombur事件不起作用，我试图为一个或姓氏提供不同的输出。我以为我可能只是重写一个函数来完成这两个功能，但我希望您找不到错误。另外，它们真的很相似，所以idk发生了什么。

<div class = "fiftypercentofwidth">
                    <!-------------
                        <h5>Your Name:</h5>
                        <span class = "righter"><input type="text" name="clientName"></span>
                        <br><br>
                        ------ >
                        <!-- Client email address ------------------------------------------------------------ -->
                        <!------
                        <h5>Email Address:</h5>
                        <span class = "righter"><input type="text" name="emailAddress"></span> 
                        ---->
                        <!--- First Name ------------->
                        <div class="form-group">
                        <div class="col">
                            <label for="fN">First Name</label>
                                <input type="text" onblur="validateName(fN)" class="form-control" placeholder="First Name" id="fN" required maxlength="50">
                        </div>
                        </div>
                        <!--Last Name -------------->
                        <div class="form-group">
                        <div class="col">
                            <label for="lN">Last Name</label>
                                <input type="text" onblur="validLastName(lN)" class="form-control" placeholder="Last Name" id="lN">
                        </div>
                        </div>
                        <!-- Email -->
                        <div class="form-group">
                        <div class="col">
                            <label for="eMail">Email</label>
                                <input type="email" onblur="validateEmail(eMail)" class="form-control" placeholder="Email" id="eMail" required maxlength="254">
                        </div>
                        </div>
                        <br/>

function validateName(x){
    var re = /[A-Za-z]$/;
    if (x.value == ""){
        x.style.background = '#e35152';
        x.style.color = 'white';
        x.value = "Please enter your first name";   
            } else {
                if (!re.test(x.value)){
                    x.style.background = '#e35152';
                    x.style.color = 'white';
                    x.value = "Please Use Only Letters";
                        } else {
                            x.style.background = 'white';
                            x.style.color = 'black';
                            }
                }
}

function validLastName(x){
    var re = /[A-Za-z]$/;
    if (x.value == ""){
        x.style.background = '#e35152';
        x.style.color = 'white';
        x.value = "Please enter your last name";
            } else {
                if (!re.test(x.value)){
                    x.style.background = '#e35152';
                    x.style.color = 'white';
                    x.value = "Please Use Only Letters";
                        } else {
                            x.style.background = 'white';
                            x.style.color = 'black';
                            }
                }
}

所以我自己修复了此代码，但是如果有人能告诉我任何关于此的指针，我会很感激。

修复了下面的代码：

function validateName(x){
    var re = /[A-Za-z]$/;
    var lastName = document.getElementById('fN');
    var firstName = document.getElementById('lN');
    if (x.value == ""){
        x.style.background = '#e35152';
        x.style.color = 'white';
        fN.value = "Please enter your first name";  
        lN.value = "Please enter your last name";
        return false;
            } else {
                if (!re.test(x.value)){
                    x.style.background = '#e35152';
                    x.style.color = 'white';
                    x.value = "Please Use Only Letters";
                    return false;
                        } else {
                            x.style.background = 'white';
                            x.style.color = 'black';
                            return true;
                            }
                }
}

Answer 1

不要用inline eval分配处理程序 - 改为将侦听器连接到javaScript，以与内容分开演示文稿，以确保所讨论的功能具有范围，并使代码更可读取。尝试以下操作：

function validateName(x) {
  // ...
}
document.querySelector('#fN').addEventListener('blur', e => validateName(e.target));