JavaScript简单验证表单空值及邮箱格式的方法

JavaScript简单验证表单空值及邮箱格式的方法

在网页开发中，表单验证是非常常见的需求。本文将介绍JavaScript简单验证表单空值及邮箱格式的方法，帮助开发者完成表单验证功能。

表单空值验证

在表单提交时，我们需要验证用户是否填写了表单中的必填项。下面是一个简单的表单空值验证方案：

function validateForm() {
  var x = document.forms["myForm"]["firstName"].value;
  if (x == "") {
    alert("First name must be filled out");
    return false;
  }
}

上述代码中，我们定义了一个名为validateForm的函数，用来验证表单是否填写了必填项。该函数中，document.forms["myForm"]["firstName"].value用来获取表单中名为“firstName”的字段的值，如果该值为空，则通过alert函数弹出提示信息，并返回false，以阻止表单的提交。

为了调用该函数，需要在表单中绑定onsubmit事件，并在事件处理函数中调用validateForm函数。比如：

<form name="myForm" onsubmit="return validateForm()" method="post">  
  First name: <input type="text" name="firstName"><br>   
  <input type="submit" value="Submit">  
</form> 

上面这段HTML代码中，我们将表单的onsubmit事件绑定到validateForm函数上，一旦触发了表单提交事件，将会调用该函数来处理表单提交验证。

邮箱格式验证

在开发中，邮箱格式验证是极其普遍的需求。下面是一个简单的邮箱格式验证方案：

function validateEmail() {
  var email = document.forms["myForm"]["email"].value;
  var pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  if (!pattern.test(email)) {
    alert("Invalid email address");
    return false;
  }
}

上述代码中，我们定义了一个名为validateEmail的函数，用来验证表单中名为“email”的字段的值是否符合邮箱格式（该格式为标准邮箱格式）。该函数中，pattern是一个正则表达式，用来判断邮箱格式是否正确。

为了调用该函数，同样需要在表单中绑定onsubmit事件，并在事件处理函数中调用validateEmail函数。比如：

<form name="myForm" onsubmit="return validateEmail()" method="post">  
  Email: <input type="text" name="email"><br>   
  <input type="submit" value="Submit">  
</form>

上面这段HTML代码中，我们将表单的onsubmit事件绑定到validateEmail函数上，一旦触发了表单提交事件，将会调用该函数来处理表单提交验证。如果验证不通过，该函数将通过alert函数弹出提示信息，并返回false，阻止表单的提交。