Javascript 漂亮表单验证

我目前正在使用jquery的警报系统验证我的表单。只需使用以下代码：

function validateForm() {
    var a = document.getElementById('inf_field_FirstName').value;
    var b = document.getElementById('inf_field_Email').value;
    if (a == null || a == "" || a == "First Name") {
        alert("Please enter your First Name!");
        return false;
    }
    var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    if (document.getElementById('inf_field_Email').value.search(emailRegEx) == -1) {
        alert("Please enter a valid email address.");
        return false;
    }
}

然而，我希望这是一个看起来更酷的验证，而不仅仅是一个弹出窗口告诉用户返回并再次完成表单

我在这里偶然发现了这种形式：“现在就开始梦想生活”部分。每当你没有在表格中键入内容时，字段下方的框中就会弹出一些文本，告诉你如何没有正确填写表格

---

这样的方法是如何实现的呢？

在那个特定的例子中，实际上没有库或很酷的工作，他只是使用内置的HTML5验证方法。例如，在电子邮件字段中，他不执行

type=“text”

，而是执行

type=“email”

。这意味着当表单试图提交时，浏览器将自动检查以确保其有效。我相信还有更高级、更定制的方法，但是在

input

标签上使用

email

类型是第一步，对于简单的情况通常就足够了。您还可以使用

required

属性使字段成为必填字段。使用

占位符

属性，而不是将

名字

作为名字字段的默认值。e、 g:

<input type="text" id="inf_field_FirstName" placeholder="First Name" required>
<input type="email" id="inf_field_Email" placeholder="Email Address" required>

jsfiddle： 请注意，提交表单时会出现错误，因为服务器端没有处理表单的内容。但是，当您输入无效文本时，您将能够看到消息

---

注意，您还应该使用标准JavaScript或服务器端验证，因为这限制了浏览器支持。如果用户输入将在服务器上执行某些可能被滥用的操作，请确保您进行了服务器端验证，否则会有人入侵您的网站。

您应该尝试验证引擎，它可能是为您提供良好警告的智能解决方案。。。我总是想知道，究竟是谁有时间坐在那里，随意浏览网站，只是为了好玩。有时候，不仅仅是为了好玩。他们可以使用SQL注入来破坏可能包含用户信息的数据库，这些信息可以直接出售或使用。用户不喜欢。哇，我真的不知道HTML5提供了这么简单的方式来使用表单验证。非常感谢分享！我知道，HTML5非常强大！这里有一些更强大的方法来使用它来定制正则表达式和自定义消息/图片：@user1953681-尽管HTML5有一些非常棒的功能，但请记住，并不是每个浏览器都支持它，你应该尝试使该网站仍能为这些人服务。