Question

我已经在home.html页面中包含了一个外部javascript文件“ check.js”，但似乎无法正常工作。这是check.js的代码：

function required()
{   var empt=document.forms["form1"]["city_name"].value;
    if(empt=="")
    {
        alert("City name is required");
        return false;
    }
    return true;
}

home.html的代码为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Weather Forecast</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
    <script src="check.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
    <p>
        <form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="required()">
       <h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here....">  <br/>
        <input class="input2" type="submit" name="form" value="Submit">
        </form>
    </p>
</body>
</html>

怎么了？

Answer 1

在HTML文件中使用内联脚本：

<script>
    your code here
</script>

Answer 2

由于the return value from the handler determines if the event is canceled，您需要更改此部分：

onsubmit="required()"

具有：

onsubmit="return required()"

function required(e)
{   var empt=document.forms["form1"]["city_name"].value;
    if(empt=="")
    {
        console.log("City name is required");
        return false;
    }
    return true;
}

<form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="return required()">
    <h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here....">  <br/>
    <input class="input2" type="submit" name="form" value="Submit">
</form>

Answer 3

这里有一些问题。首先，您不能在<form>元素内包含<p>元素，因此您的HTML应该如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Weather Forecast</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
        <script src="check.js"></script>
        <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
    </head>
    <body>
        <form name="form1" action="/weather" method="post" autocomplete="off" onsubmit="required()">
            <h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here....">  <br/>
            <input class="input2" type="submit" name="form" value="Submit">
        </form>
    </body>
</html>

第二，您需要停止提交表单以便可以对其进行检查，但是如果可以，则需要将该表单提交到数据所在的位置。要解决此问题，请使用提交按钮的required()事件（而不是表单的onclick事件）触发onsubmit。还要添加一个e参数供以后使用：

<form name="form1" action="/weather" method="post" autocomplete="off">
    <h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here....">  <br/>
    <input class="input2" type="submit" name="form" value="Submit" onclick="required(e)">
</form>

您还需要placeholder而不是input的{{1}}文字，因此如果人们不触摸它，它实际上就不会被填充：

value

然后使您的函数如下所示：

<input class="input1" type="text" name="city_name" onfocus="this.value=''" placeholder="enter city name here....">

现在应该可以了！

Answer 4

您编写的代码正在工作。该警报永远不会显示，因为该值永远不会为空。要解决此问题，请使用占位符属性代替输入元素中的值：

function required(event) {
    event.preventDefault();
    var empt=document.forms["form1"]["city_name"].value;
    if(!empt) {
        alert("City name is required");
        return;
    }
    document["form1"].submit();
}

Answer 5

已修复： 1-使用getElementByID 2-您有一个值集，也要对此进行测试 3-将return添加到您的onsubmit

function required()
{   let empt=document.getElementById("city_name").value;

    if(empt=="" || empt.includes("enter"))
    {
        //alert("City name is required");
        return false      
    }
    return true;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Weather Forecast</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
    <script src="check.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
    <p>
        <form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="return required()">
       <h1>City Name:</h1><input class="input1" type="text" id="city_name" name="city_name" onfocus="this.value=''" value="enter city name here....">  <br/>
        <input class="input2" type="submit" name="form" value="Submit">
        </form>
    </p>
</body>
</html>

外部javascript文件未加载

5 个答案: