Question

我正在尝试使用所谓的正则表达式来验证邮政编码输入。以下是我的代码，由于某些原因，它似乎无法正常工作。我需要完全使用纯JS而不是其他框架的解决方案。

function postalCodeValidate() {
  var postalCode = document.getElementbyID("postalcode").value;
  var errorMessage = document.getElementbyID("pcodeerror").innerHTML;
  var postalPattern = /^\d{2}-\d{3}$/;
  
  if (POSTALCODE == "") {
    errorMessage = "You must enter a postal code!";
  } else if (POSTALCODE.match(postalPattern) == null) {
    errorMessage = "Wrong postal code format (00-000)";
  }
}

<div class="frm">
  <form>
    <h5>Enter adress details</h5>
    <div class="form-group">
      <label for="postalcode">Postal Code</label>
      <input type="text" class="form-control" id="postalcode" placeholder="Postal Code (00-000)">
      <div id="pcodeerror"></div>
    </div>
    <button type="button" onclick="postalCodeValidate();" class="btn btn-primary">Submit</button>
    <a href="#Register">
      <h6>Register</h6>
    </a>
  </form>
</div>

https://codepen.io/altug09/pen/yREoLe

Answer 1

您遇到一些问题：

POSTALCODE不存在，JS区分大小写，因此POSTALCODE！== postalCode。

将字符串从document.getElementById("pcodeerror").innerHTML赋给变量，然后将消息分配给该变量不会更新document.getElementById("pcodeerror").innerHTML。因此，您需要了解参考的工作原理，等等。

最后，您不需要功能match，因为您没有使用返回的数组。因此，使用函数test检查特定字符串的正则表达式。

function postalCodeValidate() {
  var postalCode = document.getElementById("postalcode").value;


  var postalPattern = /^\d{2}-\d{3}$/;
  if (postalCode == "") {
    document.getElementById("pcodeerror").innerHTML = "You must enter a postal code!";
  } else if (!postalPattern.test(postalCode)) {
    document.getElementById("pcodeerror").innerHTML = "Wrong postal code format (00-000)";

  }

}

body {
  font-family: Roboto;
  font-size: 18px;
  background: #283c86;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #45a247, #283c86);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #45a247, #283c86);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.frm {
  width: 50%;
  height: auto;
  margin: 0 auto;
  width: 400px;
}

form {
  margin-top: 30px;
  background: #ebebe0;
  padding: 20px 20px 40px 20px;
  display: block;
  border-radius: 20px;
}

.btn {
  float: right;
}

#mailerror,
#passerror {
  color: red;
}

<div class="frm">
  <form>
    <h5>Enter adress details</h5>


    <div class="form-group">
      <label for="postalcode">Postal Code</label>
      <input type="text" class="form-control" id="postalcode" placeholder="Postal Code (00-000)">
      <div id="pcodeerror"></div>
    </div>

    <button type="button" onclick="postalCodeValidate();" class="btn btn-primary">Submit</button>
    <a href="#Register">
      <h6>Register</h6>
    </a>
  </form>
</div>

正则表达式-JS中的表单数据验证

1 个答案: