gpt4 book ai didi

javascript - 使用 javascript/html 无法进行表单验证

转载 作者:行者123 更新时间:2023-12-03 04:47:25 28 4
gpt4 key购买 nike

我一整天都在测试我的代码,但没有任何反应。表单自动打开 success.html 并且不使用脚本。

	function FormValidation(theForm) {
var errors = "";
var alph = /^[\w ]+$/;
var cardnumb = /^\d{16}$/;
var cvvnumb = /^\d{3}$/;
var monthnumb = /^\d{1,2}$/;
var yearnumb = /^\d{4}$/;

if (form.one.value == "") {
errors += "Please enter your full name! \n";
}

else if (!alph.test(form.one.value)) {
errors += "Full name is wrong or includes invalid characters! \n";
}
if (form.two.value == "") {
errors += "Please enter your 16-digit code! \n";
}

if (!cardnumb.test(form.two.value)) {
errors += "Card number does not consist of 16 digits or includes invalid characters! \n";
}

if (form.three.value == "") {
errors += "Please enter your month of expiration! \n";
}

if (!monthnumb.test(form.three.value)) {
errors += "The month does not consist of 2 digits or includes invalid characters! \n";
}

if (form.four.value == "") {
errors += "Please enter your year of expiration! \n";
}

if (!yearnumb.test(form.four.value)) {
errors += "The year does not consist of 4 digits or includes invalid characters! \n";
}

if (form.five.value == "") {
errors += "Please enter your 3-digit CVV code! \n";
}

if (!cvvnumb.test(form.five.value)) {
errors += "The CVV does not consist of 3 digits or includes invalid characters! \n";
}

if (!content == "") {
alert(content);
return false;
}
}
 <!DOCTYPE html>
<html lang="en-US" class="Html" id="Main" dir="auto">
<head class="Head" id="Main">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="description" content="NRN">
<meta name="author" content="NRN">
<title class="Title" id="Title">NRN</title>


</head>
<body class="Body" id="Main">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
<p class="p1">Payment form validation using JavaScript<p>
<form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="javascript:return FormValidation(this)">
<div class="form-group-name">
<label for="name">Owner</label><br>
<input type="text" placeholder="Name on card" class="form-control-1" id="one" name="one">
</div>
<div class="form-group-number">
<label for="number">Card number</label><br>
<input type="text" placeholder="16-digit code" class="form-control-2" id="two" name="two">
</div>
<div class="form-group-date">
<label for="date">Expiration date</label><br>
<input type="text" placeholder="Month" class="form-control-3" id="three" name="three">
<input type="text" placeholder="Year" class="form-control-3" id="four" name="four">
</div>
<div class="form-group-cvv">
<label for="cvv">CVV</label><br>
<input type="text" placeholder="3-digit code" class="form-control-4" id="five" name="five">
</div>
<div class="form-group-submit">
<input type="submit" class="submit_form" value="Validate">
</div>
</form>
</body>
</html>

我已经检查了所有内容以及许多教程,但没有帮助。请帮忙!提前致谢!问题可能出在 .css 文件中吗?

最佳答案

您的 javascript 验证函数永远不会返回 false,因为 content 永远不会等于 ""content 没有设置,因此它将未定义,因此即使发生错误,表单也会继续提交。

首先你应该改变

if (!content == "") {
alert(content);
return false;
}

if (!errors == "") {
alert(errors);
return false;
} else {
return true;
}

如果您的 JavaScript 函数返回 true,表单将继续提交。如果返回false,如果出现错误,它将停止提交表单。

此外,您还可以在 form 元素的 onSubmit 属性中设置一个函数,如下所示:

<form onSubmit="return FormValidation(this)""></form>

正如 Tulio Faria 所提到的

关于javascript - 使用 javascript/html 无法进行表单验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42810307/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com