为什么总是显示错误信息？

VIRICH 发表于 Dev

维力奇

大家好，我是用 javascript 学习的，有一个onchanged事件可以验证名字和姓氏字段。但是每次我在该字段中输入内容时，都会收到有关输入不正确数据的错误消息。例如，我从 3 个字母中输入一个单词并收到错误消息。...擦除，写了一个有效的开关到姓氏输入并收到一条消息“名字错误”。我该如何解决这个问题以及如何统一这两种验证方法？

我的js：

var namePattern = new RegExp("^([A-z]{4,20})$");
var fName = document.getElementById("fName").value;
var lName = document.getElementById("lName").value;
var checker = false

function validateFirstName(){
      if(!namePattern.test(fName)){
          checker = "Wrong first name";
      }
      if(checker){
          alert(checker);
      }
}

function validateLastName(){
    if(!namePattern.test(lName)){
       checker = "Wrong last name";
    }
    if(checker){
       alert(checker);
    }
}

HTML：

<h3>PERSONAL INFORMATION</h3>
<div>
    <span>First Name<label>*</label></span>
    <input type="text" name="fName" id="fName"
        placeholder="Your first name" onchange="validateFirstName()">
</div>
<div>
    <span>Last Name<label>*</label></span>
    <input type="text" name="lName" id="lName"
        placeholder="Your last name" onchange="validateLastName()">
</div>

奥拉姆

第一个问题是您没有获取正在检查的字段的当前值。

第二个问题是你没有重置检查器。一旦出现错误，检查器将有一个真值，直到您刷新页面。

有很多方法可以修复它。

我的建议是这样的：

var namePattern = new RegExp("^([A-z]{4,20})$");
var isValid = false;

function validateName(value, message){
    isValid = namePattern.test(value);
    if (!isValid) {
        alert(message);
    }
}

<h3>PERSONAL INFORMATION</h3>
<div>
    <span>First Name<label>*</label></span>
    <input type="text" name="fName" id="fName"
        placeholder="Your first name" onchange="validateName(this.value, 'Wrong first name')">
</div>
<div>
    <span>Last Name<label>*</label></span>
    <input type="text" name="lName" id="lName"
        placeholder="Your last name" onchange="validateName(this.value, 'Wrong last name')">
</div>

这也将您的验证方法合二为一。

如果您想检查所有字段是否有效，而不仅仅是您编辑的最后一个字段，您需要isValid为每个字段设置一个布尔值并检查它们是否全部为真。

像这样的东西：

var namePattern = new RegExp("^([A-z]{4,20})$");
var isValid = {
  fName : false,
  lName : false,
};

function validateName(element, message){
    isValid[element.id] = namePattern.test(element.value);
    if (!isValid[element.id]) {
        alert(message);
    }
}

function isFormValid() {
  for (field in isValid) {
    if (!isValid[field]) {
      return false;
    }
    return true;
  }
}

<h3>PERSONAL INFORMATION</h3>
<div>
    <span>First Name<label>*</label></span>
    <input type="text" name="fName" id="fName"
        placeholder="Your first name" onchange="validateName(this, 'Wrong first name')">
</div>
<div>
    <span>Last Name<label>*</label></span>
    <input type="text" name="lName" id="lName"
        placeholder="Your last name" onchange="validateName(this, 'Wrong last name')">
</div>
<button onclick="alert(isFormValid())">Is Form Valid</button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。