Question

我正在尝试完成javascript和HTML的在线作业。问题是：

预订机票页面 - 这将包含用户输入的预订火车票的详细信息
感谢您的页面 - 用户成功预订门票后会显示感谢页面

门票的数量应该大于孩子的数量（使用java脚本进行此验证）。在警告框中提供错误消息“门票的数量不应大于儿童的数量”。

·显示日期和时间应为当前日期或未来日期。（使用java脚本进行此验证）。在警告框中提供错误消息“显示日期和时间应该是当前日期或将来的日期”。

·所有字段都是必填字段（应使用HTML5完成）。

·票价应根据以下逻辑计算。（使用Java脚本进行计算）。

o假设1张票的票价是200。

·儿童票价为100票。

·用户提交表格后，应计算机票价格并在警告框中显示为“您的大致机票金额为INR”。

用于计算票价的JavaScript方法应返回布尔值。

示例：没有门票：4没有孩子：1然后票价将是700.

发生以下错误：

已正确提供所有输入，但票证计算是错误或JavaScript方法未返回任何布尔值

即使我从方法中返回了值并且它正在计算预期输出，即票数为No：4 No of children's：1则票价将为700.

function validations(){
    var noTickets=document.getElementById("tickets").value;
    var noChildrens=parseInt(document.getElementById("childrens").value);
    var value=document.getElementById("showdate").value;
    if(noTickets < noChildrens)
    {

        alert("No of tickets should be greater than the no of children");
        return false;

    }
    if(new Date() > new Date(value))
       {
            alert("Show date and time should be either current date or future date");
           return false;
       }
    else{
    var adults=noTickets-noChildrens;
    var ticketfare=(adults*200) + (noChildrens*100);
    alert("Your approximate ticket amount is "+ticketfare+" INR");
    return true;
    }

}

.left{
            display: inline-block;
            width:140px;
            text-align: left;
        }
        .right {
            margin-top: 5px;
            margin-bottom: 5px;
            display:inline;
            margin-left: 100px;
        }
        header{
        width:100%;
        margin: 0 auto;
        }
        .item {
          position: relative;
          overflow: hidden;
          width: 200px;
        }
        .item img {
          max-width: 100%;

          -moz-transition: all 0.3s;
          -webkit-transition: all 0.3s;
          transition: all 0.3s;
        }
        .item:hover img {
          -moz-transform: scale(1.2);
          -webkit-transform: scale(1.2);
          transform: scale(1.2);
        }

<html>
<body bgcolor="aqua">
    <header><h1>Movie Ticket Booking</h1></header>

<form action="thankyou.html" method="post" onsubmit="return validations()" autocomplete>

    <label for="name" class="left">Name</label>
    <input type="text" name="name" pattern="[a-zA-Z]+[ ][a-zA-Z]+" class="right" placeholder="Enter the Name" required /><br>

    <label for="moviename" class="left">Movie Name</label>
    <input list="movies" name="moviename" autocomplete="on" class="right" required="required">
    <datalist id="movies">
    <option value="Irada"></option>
    <option value="Rangoon"></option>
    <option value="Logan"></option>
    <option value="Fist Fight"></option>
    </datalist><br>

    <label for="circle" class="left">Circle</label>
    <input list="circles" name="circle" autocomplete="on" class="right" required="required">
    <datalist id="circles">
    <option value="Silver"></option>
    <option value="Gold"></option>
    <option value="Platinum"></option>
    </datalist><br>

    <label for="phone" class="left">Phone no</label>
    <input type="text" name="phone" placeholder="Enter Mobile # here" maxlength="10" pattern="[0-9]{10}" class="right" required ><br>

    <label for="showdate" class="left">Show date and time</label>
    <input type="datetime-local" name="showdate" class="right" required="required" id="showdate"><br>

    <label for="tickets" class="left">No of tickets</label>
    <input type="number" name="tickets" min="1" max="10" class="right" required="required" id="tickets"><br>

    <label for="childrens" class="left">No of children's</label>
    <input type="number" name="childrens" min="1" max="5" class="right" required="required" id="childrens"><br>

    <input type="submit"  name="Book My Show" value="Book My Show" class="left" style="text-align: center">

    <input type="reset" name="reset" value="Reset" class="right">
</form>
<footer>
<div class="item">
<img src="contactus.jpg" id="contactus" alt="image not found">
</div>
</footer>
</body>
</html>

我不知道如何解决此错误。任何帮助/建议都将非常感激。

Answer 1

我就是这样做的。为了节省空间，我已经将示例简化为必要的位。

现在的问题是你 - 除非你阻止事件的默认操作 - 表单将在你的事件监听器执行之前提交。因此，您需要阻止默认操作，验证表单，然后提交结果，如果它通过验证。

这个例子大部分都是这样，现在你只需要将经过验证的响应发送到服务器。请记住，客户端验证不应取代服务器端验证。任何面向客户端的东西都不应该被信任，因为它可以很容易地从控制台进行修改。

有许多方法可以序列化表单，然后将请求发送到服务器是相当简单的（再次，有几种方法可以做到这一点）。

@foreach (Reservation r in Model)
{
    string alertClass = "";
    if (r.DateTo.AddDays(-1).Day <= DateTime.Now.Day)
    {
        alertClass = "danger";
    }
    else
    {
        alertClass = "";
    }

    //Rest of your original Razor

const form = document.getElementById('booking-form');

form.addEventListener('submit', event => {
    event.preventDefault();
    
    const tickets  = +form.tickets.value;
    const children = +form.children.value;
    const date     = form.date.value;
    const adults   = tickets - children;
    const fare     = (adults*200) + (children*100);
    
    try {
        if(adults < 0) {
            throw "Number of children should not exceed number of tickets."
        }

        if(Date.now() > Date.parse(date)) {
            throw "Cannot book showings in the past.";
        }
    } catch(error) {
        alert(error);
        return false;
    }
    
    alert(`Your approximate ticket amount is ${fare} INR`);
    return true;
});

Answer 2

您从getElementById().value返回一个字符串，因此您需要将其转换为数字。例如，var not = parseInt(document.getElementById("tickets").value)。

另外，尝试使用更具描述性的变量名称。 not可以是numTickets，noc可以是numChildrensTickets

JavaScript函数未返回任何布尔值或票证计算错误

2 个答案: