javascript - JavaScript，验证 onkeyup 和提交的 html 表单

Question

我已经看到了很多与此类似的解决方案和问题，但没有一个能帮助我

这是一个带有 JavaScript 验证的简单 html 表单

当输入字段的值小于所需长度（小于 5）时，在键上记录错误消息

当输入字段为空（名字和姓氏）时，在提交时记录错误消息

问题是当我单击提交按钮时，无论错误如何都会提交表单

我试过了preventDefault()，return false但没有一个成功

如何改进代码以使其正常工作？键和提交

let fname = document.getElementById('fname');
let lname = document.getElementById('lname');
form = document.querySelector('#myForm');

function checkFirstName() {
  let valid = true;
  if (fname.value.length < 5) {
    console.log('first name must be greater than 5');
    valid = false;
  }
}

function checkLastName() {
  let valid = true;
  if (lname.value.length < 5) {
    console.log('last name must be greater than 5');
    valid = false;
  }
}
form.addEventListener('input', function(e) {
  switch (e.target.id) {
    case 'fname':
      checkFirstName();
      break;
    case 'lname':
      checkLastName();
      break;
  }
});

form.addEventListener('submit', function(e) {
  let isFormField = true;
  if (fname.value === '') {
    console.log('first name is required')
    isFormField = false;
  }
  if (lname.value === '') {
    console.log('last name is required')
    isFormField = false;
  }
  if (!isFormField) {
    e.preventDefault();
    return
  }
});

<form method="get" id="myForm">
  <div>
    <input type="text" class="form-control" id="fname" name="fname"></br>
    <small class="small" id="small"></small>
  </div>
  <div>
    <input type="text" class="form-control" id="lname" name="lname"></br>
    <small class="small" id="small"></small>
  </div>
  <button type="submit" name="send">submit</button>
</form>

标签： javascripthtml

Answer 1

我已经将所有的验证移到了firstname函数checkFirstName和lastname. checkLastName只是为了简洁

checkFirstName您可以将其分开，但您必须记住，表单仅在checkLastName返回 true时才会提交

let fname = document.getElementById('fname');
let lname = document.getElementById('lname');
form = document.querySelector('#myForm');

function checkFirstName() {
  if (fname.value.length >= 5) return true;
  if (fname.value === "") {
    console.log('Last name is required')
    return false
  }
  console.log('first name must be greater than 5');
  return false;
}

function checkLastName() {
  if (lname.value.length >= 5) return true;
  if (lname.value === "") {
    console.log('Last name is required')
    return false
  }
  console.log('last name must be greater than 5');
  return false;
}
form.addEventListener('input', function(e) {
  switch (e.target.id) {
    case 'fname':
      checkFirstName();
      break;
    case 'lname':
      checkLastName();
      break;
  }
});

form.addEventListener('submit', function(e) {
  if (!checkFirstName() || !checkLastName()) {
    e.preventDefault();
    return
  }
});

<form method="get" id="myForm">
  <div>
    <input type="text" class="form-control" id="fname" name="fname"></br>
    <small class="small" id="small"></small>
  </div>
  <div>
    <input type="text" class="form-control" id="lname" name="lname"></br>
    <small class="small" id="small"></small>
  </div>
  <button type="submit" name="send">submit</button>
</form>