站制作的过程中，表单设计与验证是至关重要的一步，它直接影响着用户体验和数据的准确性。一个优秀的表单设计能够简化用户输入过程，提高用户满意度，而有效的错误处理则能够防止错误数据的提交，保护网站的安全性和稳定性。本文将详细介绍网站制作中的表单设计与验证的关键技巧，帮助您优化用户输入和错误处理，提升网站的整体体验。

一、关键技巧1：简化表单设计

在设计表单时，应尽量简化用户的输入过程，减少繁琐的操作和信息的填写。以下是几个值得注意的技巧：

1.1 使用合理的表单字段数量：避免设计过多的表单字段，只保留必要的信息项，例如姓名、邮箱、联系电话等。过多的字段会给用户造成困扰，并可能导致信息填写不完整。

1.2 使用清晰的表单标签与提示：为每个表单字段添加清晰的标签和必要的提示文字，帮助用户理解所需填写的信息内容，并提供合理的格式要求。

1.3 提供默认值和自动填充：对于一些常用字段，可以提供默认值或使用自动填充功能，例如自动填充地址或根据邮编自动填充城市信息。这样能够节省用户的时间和输入成本。

二、关键技巧2：有效的表单验证

表单验证是确保用户提交正确数据的关键步骤，以下是一些有效的表单验证技巧：

2.1 客户端验证：使用HTML5的表单验证功能，例如required、type、pattern等属性来验证表单字段的格式，确保用户输入的数据符合要求。

2.2 服务器端验证：客户端验证只是一种表面的验证手段，为了数据的安全性和准确性，必须进行服务器端的验证。通过编写后端验证规则，对用户提交的数据进行进一步验证，例如数据的完整性、合法性等。

2.3 错误提示信息：当用户输入错误时，应提供明确的错误提示信息，指出错误的具体原因和如何修正错误。错误提示信息应简洁明了，帮助用户快速定位并解决问题。

三、关键技巧3：友好的错误处理

错误处理是网站制作中不可忽视的一环，以下是几个友好的错误处理技巧：

3.1 错误反馈页面：当用户提交错误的数据或发生其他错误时，应为用户提供一个友好的错误反馈页面，清晰地显示错误信息，并提供解决问题的建议或联系方式。

3.2 数据保护与恢复：在用户提交错误数据后，应尽量保护用户已输入的正确数据，避免用户重新填写所有信息。例如，可以在页面刷新或返回时，自动填充上次正确的输入内容。

3.3 日志记录与分析：对于较为严重的错误，应及时记录日志并进行分析，找出错误产生的原因，并及时修正，以提升网站的稳定性和安全性。

通过合理的表单设计与验证，我们能够简化用户输入的过程，减少错误数据的产生，并提升用户体验。无论是从用户的角度还是网站的运营角度来看，优化表单设计与验证都是非常重要的一项工作。我们希望本文所介绍的关键技巧能够帮助您更好地实现这一目标。

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

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

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

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

表单验证属性

Pattern

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

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

Min

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

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

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

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

Max

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

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

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

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

Required

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

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

Step

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

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

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

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

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

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

Minlength

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

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

Maxlength

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

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

应用表单验证属性

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

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

<formid='form'>

  <labelfor="email">What's  your email address?</label>

  <inputid="email" name="email" requiredpattern="[^@]+@[^\.]+\..+">

  <buttontype='submit'>Submit</button>

</form>

在上述代码中，输入元素带有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代码来获取用户的姓名和年龄：

<formid='form'>

  <labelfor="name">What's  your name?</label>

  <inputid="name" name="name" requiredminlength='5' maxlength='20'>

  <br>

  <spanid='name-too-short' hidden>Name is  too short</span>

  <spanid='name-too-long' hidden>Name is  too long</span>

  <br>

  <labelfor="age">What's  your age?</label>

  <inputid="age" name="age" type='number' requiredmin='0' max='150'>

  <br>

  <spanid='age-too-high' hidden>Age is too  high</span>

  <spanid='age-too-low' hidden>Age is too  low</span>

  <br>

  <buttontype='submit'>Submit</button>

</form>

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

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

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中取消隐藏相应的信息。

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

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

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

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范

12306公告网络购票需要验证手机号|

昨天，一则消息在微信群、QQ群流传：“为整顿购票秩序，每个用户的12306购票账号需验证自己的手机号，如果在12月2日之前不验证，12月2日之后或将无法再12306平台上购票，需持身份证去火车站验证才可购票!请大家登陆12306网站或者手机客户端进行手机号验证。”

雷锋网登陆购票APP测试了一下，发现确实需要验证手机号，否则影响购票，但弹出的窗口上并没有标注截止日期。新华社询问了12306官方，对方称并不会截止。

鉴于12306是唯一的一级网络购票出口，既然早晚都要验证，早一点验证总是没错的。

|奇虎360或数周内达成最终私有化协议|

国外媒体报道，之前向奇虎360提出90亿美元私有化要约的投资集团已接近与奇虎360达成最终的私有化协议，将以每股美国存托股约77美元的价格收购奇虎360。

奇虎360今年6月曾宣布，公司董事会已接到签署日期为2015年6月17日的初步非约束性私有化要约。知情人士称，最终的私有化协议有望于未来数周内达成。届时，这笔交易将成为在美上市的中国公司中最大规模的私有化交易。同时，如业界预测的一样，一旦交易完成，奇虎360将考虑在国内A股上市。

|Flash因其自身安全隐患遭Adobe弃用|

据国外媒体报道，Adobe发表声明表示，鼓励开发人员使用新的web标准，比如HTML5， 并停止使用Flash。同时将Flash重新命名为Animate CC，弃用原来的命名Flash Professional CC。

在过去的十年里，Flash已经逐渐在人们的视线中淡出。除了iOS不支持Flash，之外，另外的原因是它容易造成安全隐患。尽管Flash最初在创建网页游戏和动画方面发挥了很大作用，但它的缺点也越来越突出。例如Flash页面和Flash播放器加载很慢同时快速消耗笔记本电量。而且Flash一直以来的安全问题也使得网页浏览者面临极大风险。

Adobe声明仍然会为Flash提供支持，但主要的支持工作将集中在安全方面。

|Google Glass新专利曝光，竟然是单边悬挂式设计|

据国外媒体报道，谷歌眼镜（Google Glass）并没有死。根据美国专利商标局最新披露的信息显示，谷歌很可能将重新设计这款可以佩戴于眼部的穿戴式设备，并以单边悬挂式的新外观再次示人。

从谷歌专利示意图上可看出，这款设备可能固定在用户脸部的一侧，挂在一只耳朵上，将显示屏放在眼睛上方。这项专利描述了一种能够根据每个用户的头部调节的设备，而且不用的时候还可以折叠起来。该设备提供头戴显示器，可以播放视频，另外一只眼睛也可以借助棱镜的帮助看到图像。

与其他专利一样，现在无法确保专利中描述的新技术能够正式推出，尤其是考虑到这项专利是2012年9月提交的——远早于谷歌眼镜引发公众关注的时间。但通过提供这样一款不太引人注意的设备，或许可以降低人们的反感。

|零度指控发布农业无人机“守护者Z10”|

继大疆之后，国内知名无人机厂商零度智控也发布了农业无人机，型号命名 “守护者—Z10”，是零度农业无人机"守护者"系列首款产品。

“守护者—Z10”配备了2.4GHz双向传输遥控器，可实现一键起飞、一键降落和一键返航的“三一功能”，并可在遥控器上直接设置规整土地的喷洒航线。“守护者—Z10”采用模块化设计，可快速更换易损件，使后期维护更加便捷、经济。

就在几天前，大疆也发布了农业无人机MG-1。

点击“阅读原文”可免费申请试用“高斯德智能电动滑板车”总共5辆，成功即可免费获得

微信ID：leiphone-sz

长按左侧二维码关注