电话号码的Javascript表单验证

尝试创建一个具有非常简单的验证的表单，我对两件事很好奇

一,；如何检查表单是否为空

二,；在“电话号码”字段中，我如何仅接受此格式的号码：

xxx xxxx（其中X是一个数字）

以下是我迄今为止所做的工作：

HTML:

<form onsubmit="return false" method="post" name="myForm">

    <div class="form-block">
       <label>Name: </label>
       <input type="text" name="name" id="name" />
     <span id="name-error" class="error"></span>
</div>

<div class="form-block">
       <label>Phone Number: </label>
       <input type="text" name="phone" id="phone" />
     <span id="phone-error" class="error"></span>
</div>

       <input type="submit" id="mysubmit" name="submit" onclick="validate()" />
</form>

JS:

---

您可以通过简单地检查空字符串来测试表单元素的值是否为空

我已经说过，这将帮助您访问和迭代表单字段

// ES5: a very crude validation check
// your form field elements should share a class in order to collect them all
var formElements = document.querySelectorAll('.your-form-field-class');

// set a flag to keep track of whether you have an empty field
var containsEmptyField = false
    i,
    l = formElements.length;

    for (; i < l; i++) {
       if (formElements[i].value === '') {
        containsEmptyField = true;
        // do something in response to an empty field
        // the break is to stop looping since you've found 
        // a match 
        break;
       }    
   }

// ES6: a very crude validation check
const formElements = document.querySelector('#some-form').elements;
let containsEmptyField = false;
for (let element of formElements) {
   if (element.value === '') {
       containsEmptyField = true;
       break;
   }
}

---

可能重复的“你能展示你到目前为止所做的事情吗？”嗯……海报没有提到他是否针对ES6——这段代码可能也应该作为ES5版本呈现，因为它们听起来对Javascript来说是新的……说得对。添加了另一个ES5版本。

validate = function() {
    var name = document.getElementById("name").value;
  var phone = document.getElementById("phone").value;

  if(/^[a-zA-Z]*$/.test(name)) {
    document.getElementById("name-error").innerHTML = "Good.";
  } else {
    document.getElementById("name-error").innerHTML = "Invalid. Only letters.";
  }

  if(isNaN(phone)) {
  document.getElementById("phone-error").innerHTML = "Can only contain numbers";  
  } else {
   document.getElementById("phone-error").innerHTML = "Good."; 
  }

};

// ES5: a very crude validation check
// your form field elements should share a class in order to collect them all
var formElements = document.querySelectorAll('.your-form-field-class');

// set a flag to keep track of whether you have an empty field
var containsEmptyField = false
    i,
    l = formElements.length;

    for (; i < l; i++) {
       if (formElements[i].value === '') {
        containsEmptyField = true;
        // do something in response to an empty field
        // the break is to stop looping since you've found 
        // a match 
        break;
       }    
   }

// ES6: a very crude validation check
const formElements = document.querySelector('#some-form').elements;
let containsEmptyField = false;
for (let element of formElements) {
   if (element.value === '') {
       containsEmptyField = true;
       break;
   }
}

(/^(\d){3,3}\-(\d){4,4}$/).test(someNumber) 
// returns true if value matches or false if it doesn't