漂亮的表格验证

时间:2013-11-15 23:49:18

标签: javascript jquery forms validation

我目前正在使用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;
    }
}

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

我在这里偶然发现了这个表格:http://lewishowes.com/在'开始过现在的梦想'部分。如果您没有在某个文本中输入某些内容,则会在该字段下方的框中弹出,告诉您未如何正确填写表单。

如何实现这样的方法?

1 个答案:

答案 0 :(得分:2)

在那个特定的例子中,实际上没有完成任何库或很酷的工作,他只使用内置的HTML5验证方法。例如,在电子邮件字段中,他不会type="text"而是type="email"。这意味着当表单尝试提交时,浏览器将自动检查以确保它是有效的。我相信还有更高级的自定义方法,但在email标记上使用input类型是第一步,对于简单的情况通常就足够了。您还可以使用required属性来创建所需的字段。而不是仅将First Name作为名字字段的默认值,而是使用placeholder属性。 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:http://jsfiddle.net/markasoftware/UdJ4Z/1/ 请注意,提交表单时会出现错误,因为服务器端没有任何内容可以处理表单。但是,当您输入无效文本

时,您将能够看到这些消息

请注意,您还应该使用标准JavaScript或服务器端验证,因为这限制了浏览器支持。如果用户输入要在服务器上执行可能被滥用的操作,请确认您有服务器端验证,或者有人会破解您的网站。