我目前正在使用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/在'开始过现在的梦想'部分。如果您没有在某个文本中输入某些内容,则会在该字段下方的框中弹出,告诉您未如何正确填写表单。
如何实现这样的方法?
答案 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或服务器端验证,因为这限制了浏览器支持。如果用户输入要在服务器上执行可能被滥用的操作,请确认您有服务器端验证,或者有人会破解您的网站。