如何构建具有验证功能的强大JavaScript联系表单

如果人们发现您的网页信息或娱乐，他们可能会提供他们的名字，电子邮件地址和其他有价值的数据。用户友好的联系人表格使您的读者能够从浏览器发送您的数据。让您的Web服务器上的代码验证访问者发送给您的信息是一个好主意。但是，这并不意味着您无法在用户提交联系信息之前使用JavaScript验证数据。客户端验证通过警告人们帮助每个人，如这些问题：

• 缺失数据
• 无效的电话号码
• 无效的电子邮件地址

有很多方法可以识别错误并显示它们。最好的方法是一个使网站访问者轻松填写联系表单并提交它。想快速拿起javasscript吗？让Udemy帮助你。

将实时错误消息插入到您的联系人表单中

精心设计的触点表单显示有助于人们发现并立即更正特定数据输入错误的信息。虽然您可以每次发生错误时显示警报窗口时，您可能会使用显示方法使网站访问者更幸福，该显示方法显示错误消息的错误消息具有错误。研究下面的样品触点：

 
 <！ -  begin包装器div  - >  <！ - 开始用户名输入字段 - > 名称： <输入类型=“文本”id =“用户名”onblur =“checkforrors（此）”/> 
    <！ - 结束用户名输入字段 - >  <！ - 结束包装器div  - > 
  
  <输入类型=“按钮”value =“提交”onclick =“submitform（）”> 

第一行代码定义了表单，给出了一个ID并指定收到提交信息的邮政信地址。用您的电子邮件地址替换my_email_address。

下一行代码用作所有表单元素的包装器。注意第三行代码上的div。此div包含构成表单用户名字段和错误消息跨度的元素。DIV还引用一个名为InputField的CSS类。

文本框之前的HTML跨度用作文本框的标签。文本框的ID是用户名。这是一个重要的ID，因为您的验证代码将使用该ID来帮助验证字段检测错误的函数。每个文本框也有一个Onblur事件处理程序。这使得JavaScript在用户的光标离开输入字段时调用Checkforrors函数。

具有“USERNAME_ERRORMESSAGE”ID的DIV位于用户名文本框下方。此div包含一个跨度，该跨度包含与用户名文本框字段关联的错误消息。此跨度引用了Errormessage CSS类。通过将以下代码添加到HTML文档的头部部分来创建Errormessage和InputField类：