HTML/JavaScript:提交时的简单表单验证 [英] HTML/JavaScript: Simple form validation on submit
问题描述
我正在尝试以最简单的方式验证我的表单,但不知何故它不起作用,当我单击提交时,它只会将我带到下一页而没有给出警报消息:
I'm trying to validate my form with the easiest way possible, but somehow it is not working and when I click submit it just takes me to the next page without giving the alert message:
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:
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/
Here is also in jsfiddle http://jsfiddle.net/CrLsR/
推荐答案
您有几个错误.
首先,您必须从 HTML 标记中的函数返回一个值: <form name="ff1";方法=发布"onsubmit="return validateForm();">
First, you have to return a value from the function in the HTML markup: <form name="ff1" method="post" onsubmit="return validateForm();">
其次,在 JSFiddle 中,您将代码放在 onLoad 中,然后表单将无法识别它 - 最后,如果所有验证都成功,您必须从函数返回 true - 我在更新中修复了一些问题:
Second, in the JSFiddle, you place the code inside onLoad which and then the form won't recognize it - and last you have to return true from the function if all validation is a success - I fixed some issues in the update:
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;
}
这篇关于HTML/JavaScript:提交时的简单表单验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!