学会使用HTML5 和 JavaScript优化表单验证

全文共3663字，预计学习时长11分钟

 

来源：Pexels

 

表单验证是使用HTML5时的一个内置特性，HTML5提供了各种验证属性。作为浏览器端HTML和JavaScript的一部分。在将数据发送到服务器之前，我们可以使用它来验证表单输入。但是，我们应该信任发送的内容，所以最终验证应该仍然在服务器上进行。

 

当表单输入有效时，要素将显示:valid 伪类样式表。如果它是无效的，那么则出现:invalid 伪类样式表。

 

当表单输入无效时，浏览器将阻止表单提交并显示错误信息。

 

 

表单验证属性

 

Pattern

 

Pattern应用于文本、检索、链接、电话、邮件和密码形式的输入元素。

 

·它将正则表达式设置为数值，然后浏览器对其进行验证。

 

Min

 

该属性适用于范围、数字、日期、月、周、时间、本地时间等类型的输入元素。

 

·当输入范围或数字时，它会检验该值是否大于或等于Min属性的给定值。

·当输入日期、月份或星期时，它会检验日期是否为该属性给定日期或在给定日期之后。

·当输入时间时，它会检验日期和时刻是否都大于或等于该属性给定时期。

 

Max

 

Max属性是min属性的对立面，它检查输入的内容是否小于或等于该属性的给定值。

 

·当应用于范围或数字类型的输入时，它将检查输入的数字是否小于或等于min属性的给定值

·当应用于日期、月份或星期等类型的元素时，它将检查日期是否小于或等于该属性值中给定的日期。

·当应用于时间类型输入时，它将检查日期和时间是否小于或等于min属性的给定值。

 

Required

 

该属性验证输入元素是否为空。

 

·它可以用于文本、检索、链接、电话、邮件、密码、日期、时间、月份、星期、数字、复选框、录音、文档，以及被选中内容和文本框等元素。

 

来源：Pexels

 

Step

 

Step检验输入值是否为整数。

 

·若输入日期类型的元素，它会检查天数是否为整数。

·若输入月份类型的元素，它会检查月份数是否为整数。

·若输入星期类型的元素，它会检查星期数是否为整数。

·若输入时间类型的元素，它会检查秒数是否为整数。

·若输入范围和数字类型的元素，它会检查范围和数值是否为整数。

 

Minlength

 

Minlength属性可应用于文本、检索、链接、电话、电子邮、密码和文本框类型的输入元素。

 

·它检查用户输入文本字数是否大于或等于该属性值。

 

Maxlength

 

Maxlength属性同样可应用于文本、检索、链接、电话、电子邮、密码和文本框类型的输入元素。

 

·它检查用户输入文本字数是否小于或等于该属性值。

 

 

应用表单验证属性

 

我们可以通过将表单验证属性添加到元素中来使用它们。例如，编写一份以电子邮件地址作为输入的表单。

 

第一步，输入以下HTML语言：

 

  What's  your email address?

  Submit

 

在上述代码中，输入元素带有required属性，根据设定进行输入。

 

同时，我们还以电子邮件地址的正则表达式作为值，对其添加pattern属性。

 

接着如下所示，当输入有效或无效时，我们通过添加样式表来改变输入元素的边界：

 

input:invalid {

  border: 1px solid red

}

input:vvalid {

  border: 1px solid black

}

来源：view rawinput.css 平台： GitHub

 

此处会用到文章开头提及的伪类样式来完成这一步骤。

 

最后，通过调用preventDefault来添加JavaScript代码以防止本例中的表单提交。

 

constform = document.querySelector('#form');

form.onsubmit = (e) => {

 e.preventDefault();

}

 

再举一个检查输入的长度和范围的例子。比如，编写如下 HTML代码来获取用户的姓名和年龄：

 

  What's  your name?

  What's  your age?

  Submit

 

输入的姓名和年龄都具有长度和范围属性，当输入无效时，可以看到以文中所示形式出现的输入信息。

 

与例一相同，当输入元素有效或无效时，输入样式表来更改输入框边界：

 

input:invalid {

  border: 1px solid red

}

input:vvalid {

 border: 1px solid black

}

 

最后，当输入无效时可以通过JavaScript看到验证信息：

 

const form = document.querySelector('#form');

const name = document.querySelector('#name');

const age = document.querySelector('#age');

const nameTooShort = document.querySelector('#name-too-short');

const nameTooLong = document.querySelector('#name-too-long');

const ageTooLow = document.querySelector('#age-too-low');

const ageTooHigh = document.querySelector('#age-too-high');

form.onsubmit= (e) => {

  e.preventDefault();

}

name.oninput= (e) => {

  nameTooShort.hidden=true;

  nameTooLong.hidden=true;

  if (e.srcElement.validity.tooShort) {

    nameTooShort.hidden=false;

  }

if (e.srcElement.validity.tooLong) {

    nameTooLong.hidden=false;

  }

}

age.oninput= (e) => {

  ageTooLow.hidden=true;

  ageTooHigh.hidden=true;

  if (e.srcElement.validity.rangeOverflow) {

    ageTooHigh.hidden=false;

  }

if (e.srcElement.validity.rangeUnderflow) {

    ageTooLow.hidden=false;

  }

}

 

在上述代码中，将oninput事件处理程序设置为事件处理程序函数，以便检查后续输入的有效性。

 

在每个函数中，我先隐藏所有信息，这样就不会看到过时的消息了。然后，根据设置的最小和最大长度来检查名称输入是否太短或太长。

 

若出现任何错误，会在HTML中取消隐藏相应的信息。

 

来源：Pexels

 

同样，我们根据长度的最大最小设定值来检验年龄输入值是否在所属区间内。若出现错误，我们会在HTML中取消隐藏相应的信息。

 

通过HTML5和JavaScript，不需要任何函数库就可以检验各种类型输入值的有效性。

 

我们可以检验长度、范围、任何带有正则表达式的模式等输入元素，但在保存之前应当检查服务器端，因为部分用户仍可以破解浏览器端应用程序来跳过验证。

 

留言 点赞 关注

我们一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）