HTML 表单文本框动态信息框?

标签 html css forms dynamic popup

我最近在 Google 上搜索了几次我要找的东西,但我不知道我要找的东西的正确名称,这使得我几乎不可能得到结果。让我试着解释一下:

我在有关表单注册的网站上看到,当用户单击“电子邮件”字段时,旁边会出现一个弹出信息框,上面写着“请输入有效的电子邮件...”和如果用户移动到下一个框并且电子邮件无效,则该框变为红色并显示类似“请输入有效电子邮件”的内容。如果电子邮件已被占用,该框会变成红色并表示已被占用,他们需要输入一个不同的。如果满足所有要求,该框就会消失,然后会弹出下一个框,询问用户名,检查用户名是否唯一,等等。最后,当需要输入密码时,它会动态检查密码是否匹配,如果不匹配,信息框会再次变为红色。

有人明白我要完成什么吗?

最佳答案

我认为您要求的术语是表单验证。 网上有无数与此相关的示例,它们有许多不同的表单验证方式。 对于上面提到的 email 字段,您需要使用 required 属性(感谢 HTML5,这真的很容易),可以在其中使用浏览器验证(以有限的方式)电子邮件地址。

基本示例:

Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">

从头开始制作视觉引用

您可以使用基本的HTMLCSS 来完成。这是我制作的 JSFiddle:http://jsfiddle.net/aZ9r8/331/

Javascript 库

这是一个流行的 Javascript 库,地址为 http://www.parsleyjs.org .

关于HTML 表单文本框动态信息框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28013357/

相关文章:

jquery - 'Gravity Forms' 输入按钮被点击时触发jquery

css - 我的第一个站点 : How horrible is my code (mainly in relation to floats and positioning)?

html - border left 和 border top 在一起的问题

html - Visual Studio 2013 创建的 Bootstrap 模板无法正常工作

html - 不影响视口(viewport)大小的全宽横幅

css - 如何调整菜单不透明度,而不是文本?

iphone CSS宽度调整问题

php - "Warning: in_array() expects at most 3 parameters, 5 given"尝试上传文件时

javascript - 重置 radio 表格的正确方法

javascript - 网页鼠标悬停的缺点