JavaScript代码不起作用，写了这段代码来验证我的表单，但它不起作用

Question

一种将数据插入到mysql但在插入数据之前的表单我想编写一个JavaScript，它将在提交之前验证表单，但可以让它工作。在HTML中，我添加了输入的required和pattern属性来验证表单数据，并检查用户是否填写了必填字段，但我还想添加一个脚本，该脚本还将验证表单并在标记中显示一条消息编号errorMessage但它似乎不工作。

var inputFields = document.theForm.getElementsByTagName("input"); 
 

 

 
for (key in inputFields) { 
 

 
    var myField = inputFields[key]; 
 
    var myError = document.getElementById('errorMessage'); 
 

 
    myField.onchange = function() { 
 
     var myPattern = this.pattern; 
 
     var myPlaceholder = this.placeholder; 
 
     var isValid = this.value.search(myPattern) >= 0; 
 

 
     if (!(isValid)) { 
 
     myError.innerHTML = "Input does not match expected pattern. " + myPlaceholder; 
 
     } else { //pattern not valid 
 
     myError.innerHTML = ""; 
 
     } //pattern is valid 
 

 
    } // myField has changed 
 

 

 

 
} // inputFields

<form id="createForm" name="theForm" method="post" action="createUser.php"> 
 
    <legend><span class="icon"><img src="/registerUser/img/createIcon.png"></span> Create New User</legend> 
 
    <p><span id="requiredfields">* required field.</span> 
 
    </p> 
 

 
    <span id="formMessage" class="message"> </span> 
 
    <span id="errorMessage"> </span> 
 

 
    <input id="fname" type="text" name="fname" placeholder="Name *" pattern="[A-Za-z ]+" required> 
 
    <br> 
 
    <br> 
 

 
    <input id="email" type="email" name="email" placeholder="Email *" required> 
 
    <br> 
 
    <br> 
 

 
    <input id="username" type="text" name="username" placeholder="Username *" required> 
 
    <br> 
 
    <br> 
 

 
    <input id="password" type="password" name="password" placeholder="Password *" required> 
 
    <br> 
 
    <br> 
 

 
    <label for="roles">Roles:</label> 
 
    <select id="role" name="roles"> 
 
    <option>Select Role</option> 
 
    <option value="empty"></option> 
 
    <option value="Reporter">Reporter</option> 
 
    <option value="Lover">Lover</option> 
 
    <option value="Other">Other</option> 
 
    </select> 
 
    <br> 
 
    <br> 
 

 
    <input id="create" type="submit" name="createUser" value="Create User"> 
 

 
</form>

Answer 1

当您指定的输入元素验证的图案像这样的HTML5属性：

pattern="[A-Za-z ]+" 

...浏览器会检查整个输入值的模式相匹配。换句话说，即使^和$没有明确地在模式中，您的模式也会被视为^[A-Za-z ]+$。

但在你的JavaScript代码，当你使用这样的模式：

var myPattern = this.pattern; // get pattern from element 
var isValid = this.value.search(myPattern) >= 0; 

...的.search()方法并不试图将整个字符串匹配，则返回第一个模式匹配的索引在字符串内。这意味着，例如在Name字段的情况下，只要至少有一个字符与该模式匹配，即使其他字符不匹配，JS也会认为它是有效的。

合作解决这个问题的最简单的方法是更新您的模式：

pattern="^[A-Za-z ]+$" 

或者你可以更新您的JS的东西是类似以下内容：

var isValid = !myPattern || this.value.search("^" + myPattern + "$") >= 0; 

也就是说，把^和$围绕模式强制JS匹配模式的整个字符串，但只做测试如果为字段指定了非空白模式（某些字段没有模式）。