我正在尝试在 uni 项目的表单上进行基本数据验证。但是,我试图调用的 javascript 函数似乎根本没有被访问,我无法弄清楚原因。
这是我的 HTML:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<TITLE>Make an Order</TITLE>
<link href="design/css/style.css" rel="stylesheet" type="text/css">
<script src="design/scripts/Validator.js" language="javascript" type="text/javascript"></script>
</HEAD>
<BODY>
<div id="container">
<form id="guestbook" method="post" action="index.html" onsubmit="return Validator(this);">
<fieldset>
<legend>
Personal information
</legend>
<label for=name>Name:</label>
<input id=name name=name type=text placeholder="Your name" required autofocus><br />
<label for=email>Email: </label>
<input id=email name=email type=text placeholder="Your email address" required><br />
<label for=phnumber>Phone number: </label>
<input id=phnumber name=phnumber type=text placeholder="Your telephone number" required><br />
</fieldset>
<fieldset>
<legend>
Order details
</legend>
Choose whether you would like to order an image, video, or both:<br />
<input id=image name=order_type type=checkbox value="Image"><label for=image>$100 Image:</label><br />
<input id=video name=order_type type=checkbox value="Video"><label for=video>$95/frame Video:</label><br />
<label for=url>URL of image to modify: </label>
<input id=url name=url type=text placeholder="URL of image" required><br />
</fieldset>
<fieldset>
<legend>
Credit card details
</legend>
<label for=ccnumber>Credit card number:</label>
<input id=ccnumber name=ccnumber type=text placeholder="Your credit card number" required><br />
<label for=bsbnumber>BSB number:</label>
<input id=bsbnumber name=bsbnumber type=text placeholder="Your BSB number" required><br />
</fieldset>
<div class="buttons">
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</div>
</form>
<div id="footer">
<p>website by etc</p>
</div>
</div>
</BODY>
</HTML>
这是我的外部 javascript 文件 Validator.js:
function Validator(theForm)
{
var errorinit = "Error(s) detected. Please amend before continuing:\n";
var error = errorinit;
//check that at least one checkbox (to choose either image or video) has been selected
var boxChecked = false;
if (theForm.image.checked == true && theForm.video.checked == true)
{
boxChecked = true;
}
if (boxChecked == false)
{
error += " - You must select at least a video or an image.\n"
break;
}
//check that numerical-only inputs have numbers (but allowing for habitual spaces or dashes) only
var digits = "0123456789- ";
var temp = null;
for (var i = 0; i < theForm.phnumber.value.length; i++)
{
temp = theForm.phnumber.value.substring(i, i+1)
if (digits.indexOf(temp) == -1 && theForm.phnumber.value != "")
{
error += " - Your phone number must be numerical only.\n";
break;
}
}
for (var i = 0; i < theForm.ccnumber.value.length; i++)
{
temp = theForm.ccnumber.value.substring(i, i+1)
if (digits.indexOf(temp) == -1 && theForm.ccnumber.value != "")
{
error += " - Your credit card number must be numerical only.\n";
break;
}
}
for (var i = 0; i < theForm.bsbnumber.value.length; i++)
{
temp = theForm.bsbnumber.value.substring(i, i+1)
if (digits.indexOf(temp) == -1 && theForm.bsbnumber.value != "")
{
error += " - Your bsb number must be numerical only.\n";
break;
}
}
//check that the email address contains an @ symbol
if ((theForm.email.value.indexOf ('@',0) == -1 || theForm.email.value.indexOf ('.',0) == -1) && theForm.email.value != "")
{
error += " - Your email address is invalid.";
}
//check if there has been any error
if (error != errorinit)
{
alert(error);
return (false);
} else {
alert("no problems");
return (true);
}
}
现在这是相当简单的代码,所以在检查和重新检查之后,我很难理解它为什么不起作用。正如您在 javascript 中看到的那样,我已将其设置为无论是否出现错误都会发出警报,但根本没有发出警报;我只是返回到 index.html 没有任何验证(除了“必填”字段)。
谁能指出这不起作用的原因?