JavaScript代码无法正常工作，编写了此代码来验证我的表单，但无法正常工作

Question

一种将数据插入mysql但在插入数据之前的表单，我想编写一个JavaScript，该JavaScript将在提交之前验证表单，但可以使其正常工作。 在HTML中，我为输入添加了required和pattern属性，以验证表单数据并检查用户是否填写了必填字段，但是我还想添加一个脚本，该脚本还将验证表单并在标记中显示一条消息， id 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()方法不会尝试匹配整个字符串，它会返回字符串中第一个模式匹配项的索引。 这意味着，例如，在您的“名称”字段中，只要至少一个字符与该模式匹配，即使其他字符不匹配，JS也会将其视为有效。

解决此问题的最简单方法是更新您的模式：

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

或者，您可以将JS更新为如下所示的内容：

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

也就是说，将^和$放在模式周围，以强制JS将整个字符串与该模式匹配，但是只有在为字段指定了非空白模式（您的某些字段没有模式）的情况下，才进行测试。