验证 HTML 表单输入的技巧

表单验证是我们每天必须在前端进行的操作，因为我们希望改善用户体验。

我将解释一些使用 html 验证数据的简单方法。

输入属性

HTML 提供了一些有助于验证数据的属性。我们来看看其中几个。

1. Pattern：指定一个正则表达式，用于在提交表单时验证输入的值。它可以用于多种输入类型，包括text、date、tel、、 等email。password

2. 标题：这不是用于验证数据，而是提供有关应以何种格式提供数据的更多信息。

3. 必填：这确保提交表单时输入字段不为空。

4. Minlength：此项设置输入字段中数据的最小长度。请参阅下面的示例。

  <input type="text" minlength="4" required>

这些属性可以与多种输入类型相结合，以确保提供正确的数据。

输入类型

使用正确的输入类型有助于验证错误的数据类型。以下是您在验证表单时可能需要的输入类型。

1. 电子邮件：使用email输入类型收集用户电子邮件将验证数据，以确保提交表单时其格式正确。

2. 密码：这不仅验证密码字段，而且还屏蔽输入的字符。可以通过将正则表达式传递给pattern输入字段的属性来指定密码的强度。

  <input type="password" pattern="(?=.*[a-z]).{6}" title="Must be 6 characters or more and 
contain at least 1 lower case letter">

上面是一个简单的示例，使用 pattern 属性中提供的正则表达式来验证密码输入框。title 属性包含当提供的密码未通过正则表达式验证时要显示的文本。

3. Tel：这基本上定义了一个用于输入电话号码的字段。它主要用于优化移动设备上的键盘。将其与 pattern 属性结合使用，可以帮助验证 tel 输入字段中的数据。请看下面的示例

  <input type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" title="Phone Number format is +99(99)9999-9999">

4. 数字：定义一个仅接受数值的输入字段。它允许设置可接受数字范围的限制。

  <input type="number" min="2" max="8">

上面的例子显示了一个仅接受 2 到 8 之间的数字的数字输入字段。

下面是上面提到的一些事物得到充分利用的片段。

  <form id="form" autocomplete>
    <input type="text" minlength="4" required>
    <input type="email" required>
    <input type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" 
     title="Phone Number format is +99(99)9999-9999" required>
    <input type="password" pattern="(?=.*[a-z]).{6}" 
     title="Must be 6 characters or more and 
     contain at least 1 lower case letter" required>
  </form>

附言：数据验证必须在用户无权访问的服务器端进行，以确保用户不会篡改服务器上正在处理的数据或数据类型。此外，如果您想进行一些客户端测试，可以novalidate向<form>元素添加属性。

近年来，HTML 变得越来越强大，用它实现的功能也非常有趣。我会写很多关于它的文章。如果你喜欢这篇文章，请❤️并在这里和Twitter上关注我。