javascript表单验证失焦

原创

mob64ca12e98e58 2023-09-05 11:45:52 ©著作权

文章标签 正则表达式表单验证输入框 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e98e58的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript表单验证失焦

在Web开发中，表单验证是一个非常重要的功能，它可以帮助我们确保用户输入的数据的正确性和完整性。而在JavaScript中，我们可以通过监听表单控件的失焦事件来实现表单验证。

失焦事件

失焦事件是指当一个表单控件失去焦点时触发的事件。在HTML中，可以通过添加onblur属性来指定失焦事件的处理函数。例如，下面的代码演示了一个输入框，在失去焦点时触发一个名为validate的函数。

<input type="text" onblur="validate()" />

表单验证

表单验证是指对用户输入的数据进行检查，判断其是否符合预定的规则。在JavaScript中，我们可以使用正则表达式、条件语句等方式来进行验证。

正则表达式验证

正则表达式是一种强大的模式匹配工具，可以用来验证各种类型的数据。例如，我们可以使用正则表达式来验证一个输入框中的数据是否为合法的邮箱地址。

function validate() {
  var email = document.getElementById("email").value;
  var pattern = /^\w+@\w+\.\w+$/;
  
  if (pattern.test(email)) {
    console.log("邮箱地址合法");
  } else {
    console.log("邮箱地址不合法");
  }
}

在上面的代码中，我们首先获取了输入框中的值，并定义了一个正则表达式/^\w+@\w+\.\w+$/来匹配邮箱地址。然后，使用test()方法来检查输入的值是否符合这个正则表达式。如果符合，则输出"邮箱地址合法"，否则输出"邮箱地址不合法"。

条件语句验证

除了正则表达式，我们还可以使用条件语句来进行表单验证。例如，我们可以检查一个输入框中的值是否为空。

function validate() {
  var name = document.getElementById("name").value;
  
  if (name === "") {
    console.log("姓名不能为空");
  } else {
    console.log("姓名合法");
  }
}

在上面的代码中，我们首先获取了输入框中的值，并使用条件语句判断其是否为空。如果为空，则输出"姓名不能为空"，否则输出"姓名合法"。

失焦事件与表单验证结合

当我们将失焦事件与表单验证结合起来时，可以在用户输入数据后立即对其进行验证，并给出相应的提示。例如，下面的代码演示了一个输入框，在失去焦点时验证用户输入的邮箱地址是否合法，并在下方显示相应的提示信息。

<input type="text" id="email" onblur="validate()" />
<span id="emailTip"></span>

function validate() {
  var email = document.getElementById("email").value;
  var pattern = /^\w+@\w+\.\w+$/;
  var tip = document.getElementById("emailTip");
  
  if (pattern.test(email)) {
    tip.innerHTML = "邮箱地址合法";
    tip.style.color = "green";
  } else {
    tip.innerHTML = "邮箱地址不合法";
    tip.style.color = "red";
  }
}

在上面的代码中，我们首先获取了输入框中的值，并定义了一个正则表达式来匹配邮箱地址。然后，根据验证结果，将相应的提示信息和样式设置到<span>元素中。