Question

我是第一次尝试使用JS，我正在尝试执行一些基本任务，只是为了检查一切是否正常，当我点击提交只是检查一些变量显示它们是'警报'时，我是返回404找不到的页面。我找不到任何有用的东西。我在表单标签中尝试了action =“＃”以及我发现的prevent.Default方法，但到目前为止无济于事。下面是我的HTML和JavaScript文件。在此先感谢!!

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="scripts.js"></script>
<title>Classical Ciphers Test</title>
</head>
<body>
<div id="wrapper_ciphers">
<div id="container_ciphers">
<div id="heading"><h1><br>Classical <br>Ciphers</h1></div>
    <div id="caesar_cipher">
        <div id="inner_caesar"><h1>Caesar Cipher</h1>
        <form onSubmit="caesarEncipher()">
            <input type="text" id="caesar_text" required>
            <input type="text" id="caesar_key" required>
            <input id="caesar_submit" type="submit" value="Submit" >
        </form>

    </div>
    <div id="hill_cipher">
        <div id="inner_hill"><h1>Hill Cipher</h1></div>
    </div>
    <div id="vigenere_cipher">
        <div id="inner_vigenere"><h1>Vigenere Cipher</h1></div>
    </div>
</div></div>

这是JavaScript文件。

function validateKey(){
alert("Hello");
if(isNAN(document.getElementById("caesar_key").value)){
    alert("Please input a valid number")
}   
}

function caesarEncipher(){
validateKey();
alert(document.getElementById("caesar_key").value))

}

Answer 1

要默认不提交，请尝试以下

<form onSubmit="caesarEncipher(); return false;">

我会像这样使用错误检查。

if(document.getElementById("caesar_key").value == ""){

function validateKey(){
 alert("Hello");
  if(document.getElementById("caesar_key").value == ""){
    alert("Please input a valid number")
  }   
}

function caesarEncipher(){
  validateKey();
  alert(document.getElementById("caesar_key").value)
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="scripts.js"></script>
<title>Classical Ciphers Test</title>
</head>
<body>
<div id="wrapper_ciphers">
<div id="container_ciphers">
<div id="heading"><h1><br>Classical <br>Ciphers</h1></div>
    <div id="caesar_cipher">
        <div id="inner_caesar"><h1>Caesar Cipher</h1>
        <form onSubmit="caesarEncipher(); return false;">
            <input type="text" id="caesar_text" required>
            <input type="text" id="caesar_key" required>
            <input id="caesar_submit" type="submit" value="Submit" >
        </form>

    </div>
    <div id="hill_cipher">
        <div id="inner_hill"><h1>Hill Cipher</h1></div>
    </div>
    <div id="vigenere_cipher">
        <div id="inner_vigenere"><h1>Vigenere Cipher</h1></div>
    </div>
</div></div>

Answer 2

所以我通过取走表格标签并解决了各个元素来解决它。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="scripts.js"></script>
<title>Classical Ciphers Test</title>
</head>
<body>
<div id="wrapper_ciphers">
<div id="container_ciphers">
<div id="heading"><h1><br>Classical <br>Ciphers</h1></div>
    <div id="caesar_cipher">
        <div id="inner_caesar"><h1>Caesar Cipher</h1>
            <input type="text" id="caesar_text" >
            <input type="text" id="caesar_key" >
            <input type="submit" value="Submit" onClick="caesarEncipher()" >


    </div>
    <div id="hill_cipher">
        <div id="inner_hill"><h1>Hill Cipher</h1></div>
    </div>
    <div id="vigenere_cipher">
        <div id="inner_vigenere"><h1>Vigenere Cipher</h1></div>
    </div>
</div></div>
</body>
</html>

和JS

function caesarEncipher(){
if (document.getElementById("caesar_text").value === "") {
            alert("Please enter some text to encipher.");
            return false;
        } else if (document.getElementById("caesar_key").value === "") {
            alert("Please enter a valid key.");
            return false;
        }
if(isNaN(document.getElementById("caesar_key").value))  {
    alert("Please input a valid number");
    return false;
}
alert(document.getElementById("caesar_key").value); 
}

一切正常。

HTML / JavaScript为什么我的表单会重定向我，我该如何阻止它？

2 个答案: