一种将数据插入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>当您将输入元素验证模式指定为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使整个字符串与该模式匹配，但是只有在为字段指定了非空白模式（您的某些字段没有模式）的情况下，才进行测试。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句