html forms 中的年齡驗證有問題
[英]Having trouble with age validation in html forms
問題描述
我想打印出輸入正常的段落標簽，只閃爍一秒鍾然后消失。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>HOMEWORK</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h1 style="text-align:center">FORM FILL</h1>
<p>Kindly fill in the following details as mentioned below : </p>
<form name="FORM" onsubmit="checkform()">
<!---- <label for="FName">Name :</label><br>
<input type="text" id="FName" name="FName"><br><br>--->
<label for="Age">Age :</label><br><br>
<input type="text" id="Age" name="Age"><br><br>
<input type="button" value="Submit">
</form><br><br>
<p id="demo"></p>
<script>
function checkform()
{
var x, text;
x = document.forms["FORM"]["Age"].value;
if (x<1||x>100||x==''||isNaN(x))
{
alert("Invalid Age !!!");
text = "Input not valid";
// return false;
}
else
{
text = "Input OK";
// return true;
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
有人可以告訴我我做錯了什么嗎？ 還有驗證表單的最短方法是什么？
1 個解決方案
解決方案1
1 2020-04-15 06:58:48
您需要防止重定向頁面對您的代碼進行了一些更改檢查一次：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>HOMEWORK</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h1 style="text-align:center">FORM FILL</h1>
<p>Kindly fill in the following details as mentioned below : </p>
<form name="FORM" onsubmit="return mySubmitFunction(event)">
<!---- <label for="FName">Name :</label><br>
<input type="text" id="FName" name="FName"><br><br>--->
<label for="Age">Age :</label><br><br>
<input type="text" id="Age" name="Age"><br><br>
<input type="submit" value="Submit">
</form><br><br>
<p id="demo"></p>
<script>
function mySubmitFunction(e) {
e.preventDefault();
try {
checkform();
} catch (e) {
throw new Error(e.message);
}
return false;
}
function checkform()
{
var x, text;
x = document.forms["FORM"]["Age"].value;
if (x<1||x>100||x==''||isNaN(x))
{
alert("Invalid Age123 !!!");
text = "Input not valid";
// return false;
}
else
{
text = "Input OK";
// return true;
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
希望這可以幫助！
表單驗證有問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.