Question

将数据插入mysql但在插入数据之前的表单我想编写一个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将整个字符串与模式匹配，但只有在为字段指定了非空白模式时才进行测试（你的一些领域没有模式。）

JavaScript代码不起作用，编写此代码来验证我的表单，但它不起作用

1 个答案: