Question

您好，我都使用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>

Answer 1

您正在函数外收集fName。因此，在函数执行之前，将设置fName事件，该事件将为空字符串。因此，在相应函数内获取fName和lName的值

var namePattern = new RegExp("^([A-z]{4,20})$");

function validateFirstName() {
  var fName = document.getElementById("fName").value;
  var checker = false
  if (!namePattern.test(fName)) {
    checker = true;
  }
  if (checker) {
    alert("Wrong first name");
  }
}

function validateLastName() {
  var lName = document.getElementById("lName").value;
  var checker = false
  if (!namePattern.test(lName)) {
    checker = true;
  }
  if (checker) {
    alert('Wrong last name');
  }
}

<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>

Answer 2

这里是@VIRICH的代码示例：

var namePattern = new RegExp("^([A-z]{4,20})$");

function validateField(event) {
  var name = event.target.value;
  var checker = false

if (!namePattern.test(name)) {
    checker = true;
  }
  if (checker) {
    alert("Wrong value");
  }
}

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

Answer 3

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

第二个问题是您不重置检查器。遇到错误后，检查器将具有真实值，直到刷新页面为止。

有很多修复方法。

我的建议是这样

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>

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

3 个答案: