HTML/JavaScript:提交时的简单表单验证
HTML/JavaScript:提交时的简单表单验证
提问于 2013-04-22 02:33:26
我正在尝试用最简单的方法验证我的表单，但不知何故它不起作用，当我单击提交时，它只会将我带到下一页，而不会给出警告消息：
HTML：
<form name="ff1" method="post" onsubmit="validateForm();">
<input type="text" name="email" id="fremail" placeholder="your@email.com" />
<input type="text" name="title" id="frtitle" placeholder="Title" />
<input type="text" name="url" id="frurl" placeholder="http://yourwebsite.com/" />
<input type="submit" name="Submit" value="Continue" />
</form>JavaScript：
<script type="text/JavaScript">
function validateURL(url) {
var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
return re.test(url);
}
function validateForm()
{
// Validate URL
var url = $("#frurl").val();
if (validateURL(url)) { } else {
alert("Please enter a valid URL, remember including http://");
}
// Validate Title
var title = $("#frtitle").val();
if (title=="" || title==null) { } else {
alert("Please enter only alphanumeric values for your advertisement title");
}
// Validate Email
var email = $("#fremail").val();
if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else {
alert("Please enter a valid email");
}
return false;
}
</script>这里也用jsfiddle http://jsfiddle.net/CrLsR/编写。
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-04-22 02:42:47
这里有几个错误。
首先，您必须从HTML标记中的函数返回一个值：<form name="ff1" method="post" onsubmit="return validateForm();">
其次，在JSFiddle中，您将代码放在onLoad中，然后表单将无法识别它-最后，如果所有验证都成功，您必须从函数返回true -我修复了更新中的一些问题：
https://jsfiddle.net/mj68cq0b/
function validateURL(url) {
var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
return reurl.test(url);
}
function validateForm()
{
// Validate URL
var url = $("#frurl").val();
if (validateURL(url)) { } else {
alert("Please enter a valid URL, remember including http://");
return false;
}
// Validate Title
var title = $("#frtitle").val();
if (title=="" || title==null) {
alert("Please enter only alphanumeric values for your advertisement title");
return false;
}
// Validate Email
var email = $("#fremail").val();
if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else {
alert("Please enter a valid email");
return false;
}
return true;
}Stack Overflow用户
发布于 2013-04-22 02:46:24
最简单的验证如下：
<form name="ff1" method="post">
<input type="email" name="email" id="fremail" placeholder="your@email.com" />
<input type="text" pattern="[a-z0-9. -]+" title="Please enter only alphanumeric characters." name="title" id="frtitle" placeholder="Title" />
<input type="url" name="url" id="frurl" placeholder="http://yourwebsite.com/" />
<input type="submit" name="Submit" value="Continue" />
</form>
它使用HTML5 attributes (就像pattern一样)。
JavaScript:无。
Stack Overflow用户
发布于 2013-04-22 02:37:53
您需要返回验证函数。类似于：
onsubmit="return validateForm();"然后，验证函数应该在出现错误时返回false。如果一切正常，则返回true。请记住，服务器也必须进行验证。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16134733
复制相关文章
相似问题