javascript - 使用 Javascript 验证表单数据-6ren

javascript - 使用 Javascript 验证表单数据

转载作者：行者123 更新时间：2023-11-30 21:18:57

我昨天问了一个问题，在大家的建议下，我能够让我的 switch 语句正常工作(不错)。我还有两个问题:

switch 语句现在可以正常工作了。感谢所有的建议。不过，我有两个问题。

1.) 如果我的类(class)和部分不匹配，我会收到验证消息，告诉我我的部分无效(太棒了!)，但在单击“确定”后，它仍会前进到确认消息，然后表单处理器页面。关于如何防止这种情况的任何建议？

2.) 在确认信息中，如果我点击取消，我会收到我的注册已被取消的正确信息(太棒了!)，但它仍会前进到表单处理器页面...告诉我我的表单已被取消已提交。关于如何防止这种情况的任何建议？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--Document Head-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--Title Element-->
<title>Greendale Community College</title>
<!--Style Element-->
<style type="text/css">
    body {
        background-color: white;
    }

    h1 {
        text-align: center;
        font-family: Impact;
        color: green;
    }

    p {
        font-size: 72px;
        color: green;
    }
</style>
<!--Script Element-->
<script type="text/javascript">
    /* <![CDATA[ */
    // function to validate and create message confirm box
    function submitRegistration() {
        var fName = document.registration.firstName.value;
        var lName = document.registration.lastName.value;
        var cwid = document.registration.cwid.value;
        var semester = document.registration.semester.value;
        var course = document.registration.courses.value;
        var section = document.registration.section.value;
        var major = document.registration.needForMajor.value;
        var semesterDisplay;
        // To display semester info in confirm message
        if (semester == "fall")
            semesterDisplay = "Fall";
        if (semester == "spring")
            semesterDisplay = "Spring";
        if (semester == "summer")
            semesterDisplay = "Summer";
        //To display major requirement in confirm message
        var checkDisplay;
        if (document.registration.needForMajor.checked == true) {
            checkDisplay = "Course Needed For Major";
        }
        else {
            checkDisplay = "";
        }
        //Validates first name
        if (fName == "") {
            window.alert("You must enter your first name!");
            return false;
        }
        //Validates that first name is non-numeric
        if (isNaN(fName) == false) {
            window.alert("Your First Name must be non-numeric values!");
            return false;
        }
        //Validates last name
        if (lName == "") {
            window.alert("You must enter your last name!");
            return false;
        }
        //Validates that last name is non-numeric
        if (isNaN(lName) == false) {
            window.alert("Your Last Name must be non-numeric values!");
            return false;
        }
        //Validates CWID
        if (cwid == "") {
            window.alert("You must enter your cwid!");
            return false;
        }
        //Validates that CWID is numeric
        if (isNaN(cwid) == true) {
            window.alert("Your CWID must be numeric values!");
            return false;
        }
        //Validates semester
        var validateSemester = false;
        for (var i = 0; i < 3; ++i) {
            if (document.registration.semester[i].checked == true) {
                validateSemester = true;
                break;
            }
        }
        if (validateSemester != true) {
            window.alert("You must select a Semester!");
            return false;
        }
        //Validates course
        if (course == "") {
            window.alert("You must select a Course!");
            return false;
        }
        // Validates that the course and section are compatible
        var error = true;
        switch (course) {
            case "CIS 100":
                if (section == '100001') {
                } else if (section == '100gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 100!");
                    error = false;
                }
                break;
            case "CIS 120":
                if (section == '120001') {
                } else if (section == '120gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 120!");
                    error = false;
                }
                break;
            case "CIS 220":
                if (section == '220001') {
                } else if (section == '220gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 220!");
                    error = false;
                }
                break;
            case "CIS 299":
                if (section == '299001') {
                } else if (section == '299gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 299!");
                    error = false;
                }
                break;
            case "CIS 302":
                if (section == '302gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 302!");
                    error = false;
                }
                break;
            case "CIS 304":
                if (section == '304001') {
                } else if (section == '304gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 304!");
                    error = false;
                }
                break;
            case "CIS 321":
                if (section == '321001') {
                } else if (section == '321gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 321!");
                    error = false;
                }
                break;
            case "CIS 322":
                if (section == '322gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 322!");
                    error = false;
                }
                break;
            case "CIS 325":
                if (section == '325gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 325!");
                    error = false;
                }
                break;
            case "CIS 330":
                if (section == '330001') {
                } else if (section == '330gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 330!");
                    error = false;
                }
                break;
            case "CIS 332":
                if (section == '332001') {
                } else if (section == '332gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 332!");
                    error = false;
                }
                break;
            case "CIS 341":
                if (section == '341001') {
                } else if (section == '341gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 341!");
                    error = false;
                }
                break;
            case "CIS 343":
                if (section == '34301a') {
                } else if (section == '34301b') {
                } else {
                    window.alert("You must select a valid section for CIS 343!");
                    error = false;
                }
                break;
            case "CIS 352":
                if (section == '352gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 352!");
                    error = false;
                }
                break;
            case "CIS 354":
                if (section == '354001') {
                } else if (section == '354gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 354!");
                    error = false;
                }
                break;
            case "CIS 401":
                if (section == '401gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 401!");
                    error = false;
                }
                break;
            case "CIS 419":
                if (section == '419x01') {
                } else {
                    window.alert("You must select a valid section for CIS 419!");
                    error = false;
                }
                break;
            case "CIS 490":
                if (section == '490001') {
                } else if (section == '490gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 490!");
                    error = false;
                }
                break;
            case "CIS 492":
                if (section == '492gw1') {
                } else {
                    window.alert("You must select a valid section for CIS 492!");
                    error = false;
                }
                break;
            case "MAT 195":
                if (section == '195001') {
                } else if (section == '195w01') {
                } else {
                    window.alert("You must select a valid section for MAT 195!");
                    error = false;
                }
                break;
            case "MAT 215":
                if (section == '215001') {
                } else if (section == '215w01') {
                } else {
                    window.alert("You must select a valid section for MAT 215!");
                    error = false;
                }
                break;
            case "MAT 225":
                if (section == '225001') {
                } else if (section == '225w01') {
                } else {
                    window.alert("You must select a valid section for MAT 225!");
                    error = false;
                }
                break;
            case "MAT 281":
                if (section == '281001') {
                } else if (section == '281w01') {
                } else {
                    window.alert("You must select a valid section for MAT 281!");
                    error = false;
                }
        }

        //Validates section
        if (section == "") {
            window.alert("You must select a Section!");
            return false;
        }  
        //Confirm message
        var confirmation = window.confirm("Student Name: " + fName + " " + lName + "   CWID: " + cwid + "   Semester: " + semesterDisplay + "   Course: " + course + "   Section: " + section + "   " + checkDisplay);
        //Ok and Cancel buttons
        if (confirmation) {
            window.alert("You have been registered for your course!");
        }
        else {
            window.alert("Your registration has been canceled.");
        }
    }
    //Reset function
    function resetRegistration() {
        var resetForm = window.confirm("Are you sure you want to reset the form?");
        if (resetForm == true)
            return true;
        return false;
    }
    //Functions for mouseover and mouseout
    function mouseOver(target) {
        target.src = 'greendale_paper.png'
        target.alt = 'paper'
    }

    function mouseOut(target) {
        target.src = 'greendale.jpg'
        target.alt = 'greendale'
    }
    /* ]]> */
</script>
</head>
<body>
<!--Heading Element-->
    <h1>Greendale Community College</h1>
        <!--Added a mouseover and mouseout-->
        <center><img src="greendale.jpg" alt="greendale"  width="560" height="315" 
            onmouseover="mouseOver(this)"
            onmouseout="mouseOut(this)" 
        /></center>
    <h3 align="center">Greendale Community College Orientation Video</h3>
    <center><iframe width="560" height="315" src="https://www.youtube.com/embed/i3z5QO2O3cU" frameborder="0"></iframe></center>
    <h2 align="center">Course Registration Page</h2>
<form action="FormProcessor.html" name="registration" method="get"
      onsubmit="return submitRegistration()"
      onreset="return resetRegistration()">
    <h3>Student Information Form</h3> 
    <!--Student Information-->
    First Name:<input type="text" name="firstName"/><br />
    Last Name:<input type="text" name="lastName"/><br />
    CWID:<input type="text" name="cwid" size="8" /><br />
    <h3>Semester</h3>
    <h4>(choose a semester)</h4>
    <!--Radio Buttons to Choose Semester-->
    <input type="radio" name="semester" value="fall" /> Fall 2018 <br />
    <input type="radio" name="semester" value="spring" /> Spring 2018 <br />
    <input type="radio" name="semester" value="summer" /> Summer 2018 <br />
    <h3>Courses</h3>
    <h4>(choose one course)</h4>
    <table>
        <!--Drop Down Box for Courses-->
        <tr><td style="background:white;border:0">Courses:</td>
            <td>
                <select name="courses" size="1">
                    <option value=""></option>
                    <option value="CIS 100">CIS 100 Intro to CIS</option>
                    <option value="CIS 120">CIS 120 Application Prog I</option>
                    <option value="CIS 220">CIS 220 Application Prog II</option>
                    <option value="CIS 299">CIS 299 System Analysis I</option>
                    <option value="CIS 302">CIS 302 Visual Programming</option>
                    <option value="CIS 304">CIS 304 Cobol</option>
                    <option value="CIS 321">CIS 321 DB Mgt Sys and Design</option>
                    <option value="CIS 322">CIS 322 DB App Development</option>
                    <option value="CIS 325">CIS 225 Dec Support Systems</option>
                    <option value="CIS 330">CIS 330 Web Programming I</option>
                    <option value="CIS 332">CIS 332 Web Programming II</option>
                    <option value="CIS 341">CIS 341 CISCO CCNA I</option>
                    <option value="CIS 343">CIS 343 CISCO CCNA III</option>
                    <option value="CIS 352">CIS 352 Global Ethics in Comp</option>
                    <option value="CIS 354">CIS 354 Sys Project Mgt</option>
                    <option value="CIS 401">CIS 401 Concepts Enter Res Planning</option>
                    <option value="CIS 419">CIS 419 CIS Internship</option>
                    <option value="CIS 490">CIS 490 Systems Analysis II</option>
                    <option value="CIS 492">CIS 492 Systems Dev and Imp</option>
                    <option value="MAT 195">MAT 195 Discrete Math Structures</option>
                    <option value="MAT 215">MAT 215 Statistics</option>
                    <option value="MAT 225">MAT 225 Business Statistics</option>
                    <option value="MAT 281">MAT 281 Calculus I</option>
                </select>
            </td>
        </tr>
    </table>
    <h3>Sections</h3>
    <h4>(choose one section)</h4>
    <table>
        <tr><td style="background:white;border:0">Section Numbers:</td>
            <td>
                <!--Selection Box-->
                <select name="section" multiple="multiple" size="5">
                    <option value=""></option>
                    <option value="100001">CIS 100 001</option>
                    <option value="100gw1">CIS 100 GW1</option>
                    <option value="120001">CIS 120 001</option>
                    <option value="120gw1">CIS 120 GW1</option>
                    <option value="220001">CIS 220 001</option>
                    <option value="220gw1">CIS 220 GW1</option>
                    <option value="299001">CIS 299 001</option>
                    <option value="299gw1">CIS 299 GW1</option>
                    <option value="302gw1">CIS 302 GW1</option>
                    <option value="304001">CIS 304 001</option>
                    <option value="304gw1">CIS 304 GW1</option>
                    <option value="321001">CIS 321 001</option>
                    <option value="321gw1">CIS 321 GW1</option>
                    <option value="322gw1">CIS 322 GW1</option>
                    <option value="325gw1">CIS 325 GW1</option>
                    <option value="330001">CIS 330 001</option>
                    <option value="330gw1">CIS 330 GW1</option>
                    <option value="332001">CIS 332 001</option>
                    <option value="332gw1">CIS 332 GW1</option>
                    <option value="341001">CIS 341 001</option>
                    <option value="341gw1">CIS 341 GW1</option>
                    <option value="34301a">CIS 343 01A</option>
                    <option value="34301b">CIS 343 01B</option>
                    <option value="352gw1">CIS 352 GW1</option>
                    <option value="354001">CIS 354 001</option>
                    <option value="354gw1">CIS 354 GW1</option>
                    <option value="401gw1">CIS 401 GW1</option>
                    <option value="419x01">CIS 419 X01</option>
                    <option value="490001">CIS 490 001</option>
                    <option value="490gw1">CIS 490 GW1</option>
                    <option value="492gw1">CIS 492 GW1</option>
                    <option value="195001">MAT 195 001</option>
                    <option value="195w01">MAT 195 W01</option>
                    <option value="215001">MAT 215 001</option>
                    <option value="215w01">MAT 215 W01</option>
                    <option value="225001">MAT 225 001</option>
                    <option value="225w01">MAT 225 W01</option>
                    <option value="281001">MAT 281 001</option>
                    <option value="281w01">MAT 281 W01</option>
                </select>
                </td>
            </tr>
    </table>
    <!--Checkbox-->
    <input type="checkbox" name="needForMajor" />
    Check if the course is required for your major!<br />
    <!--Submit and Reset Buttons Created-->
    <input type="submit" name="submit" value="Submit"/><br />
    <input type="reset" name="reset" value="Reset"/>
    </form>
    </body>
</html>

最佳答案

您似乎没有对 error = false 做任何事情。也许你的意思是 return false；

无论如何，您可以添加一个 if 语句来检查错误的值并根据它返回 false:

                break;
        case "MAT 225":
            if (section == '225001') {
            } else if (section == '225w01') {
            } else {
                window.alert("You must select a valid section for MAT 225!");
                error = false;
            }
            break;
        case "MAT 281":
            if (section == '281001') {
            } else if (section == '281w01') {
            } else {
                window.alert("You must select a valid section for MAT 281!");
                error = false;
            }
    }
    if (error==false){
        return false;
    }

此外，您需要在警报中返回 false 以使其正确取消:

//Ok and Cancel buttons
if (confirmation) {
    window.alert("You have been registered for your course!");
}
else {
    window.alert("Your registration has been canceled.");
    return false;
}

关于javascript - 使用 Javascript 验证表单数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45379587/

文章推荐： javascript - Vue.JS 多个复选框系列来过滤应用程序

文章推荐： javascript - React 从生成的子组件访问父方法

文章推荐： javascript - 启用了 CORS 但仍然得到 405

文章推荐：带有 if 语句和按钮的 JavaScript

mysql - 同步/流式传输 MySQL 表/表(连接表)与 PostgreSQL 表/表
我有一台 MySQL 服务器和一台 PostgreSQL 服务器。需要从多个表中复制或重新插入一组数据 MySQL 流式传输/同步到 PostgreSQL 表。这种复制可以基于时间(Sync)或事
php - 从用户(表)获取数据其中用户(表)的id等于 friend (表)的id
如果两个表的 id 彼此相等，我尝试从一个表中获取数据。这是我使用的代码: SELECT id_to , email_to , name_to , status_to
sql - Excel 表 SQL 表
我有一个 Excel 工作表。顶行对应于列名称，而连续的行每行代表一个条目。如何将此 Excel 工作表转换为 SQL 表？我使用的是 SQL Server 2005。最佳答案这取决于您使用哪
mysql - 如何将两个django模型(表)合并为一个模型(表)
我想合并两个 Django 模型并创建一个模型。让我们假设我有第一个表表 A，其中包含一些列和数据。 Table A -------------- col1 col2 col3 col
mysql - 表 1、表 2 的多列左连接
我有两个表:table1，table2，如下所示 table1: id name 1 tamil 2 english 3 maths 4 science table2: p
sql - 大传感器数据最佳选择。表 SQL 与 Azure 表
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 1 年前。 Improve th
dynamics-ax-2009 - 表=表与表.数据(表)
下面两个语句有什么区别？ newTable = orginalTable 或 newTable.data(originalTable) 我怀疑 .data() 方法具有性能优势，因为它在标准 AX 中
SQL Server 表 -(或可能是任何 SQL 表)没有主键会影响性能吗？
我有一个表，我没有在其中显式定义主键，它并不是真正需要的功能......但是一位同事建议我添加一个列作为唯一主键以随着数据库的增长提高性能...... 谁能解释一下这是如何提高性能的？没有使用索引(
php - 将产品详细信息插入 'product' 表，并将产品图像插入 'image' 表
如何将表“产品”中的产品记录与其不同表“图像”中的图像相关联？我正在对产品 ID 使用自动增量。我觉得不可能进行关联，因为产品 ID 是自动递增的，因此在插入期间不可用! 如何插入新产品，获取产品
python - 创建一个新的 sql 表，其中的列源自另一个 sql 表
我有一个 sql 表，其中包含关键字和出现次数，如下所示(尽管出现次数并不重要): ____________ dog | 3 | ____________ rat | 7 | ____
MySQL LAST_INSERT_ID() 与 INSERT INTO 表 SELECT FROM 表
是否可以使用目标表中的LAST_INSERT_ID更新源表？ INSERT INTO `target` SELECT `a`, `b` FROM `source` 目标表有一个自动增量键id，我想将其
mysql - 查询 - 在简单的 mysql 内连接中定义(表，表)
我正在重建一个搜索查询，因为它在“我看到的”中变得多余，我想知道什么 (albums_artists, artists) ( ) does in join? is it for boosting pe
innodb - mysqldump 备份缺少所有 innodb 表，但没有 MyISAM 表
以下是我使用 mysqldump 备份数据库的开关: /usr/bin/mysqldump -u **** --password=**** --single-transaction --databas
html - 为什么 MySQL 表中的所有行都是相同的？ (MySQL 表 > HTML 表)
我试图获取 MySQL 表中的所有行并将它们放入 HTML 表中: Exam ID Status Assigned Examiner
mysql - 查询 'photos' 表，同时查询 'bookmarks' 表，以便知道添加书签的照片
如何查询名为 photos 的表中的所有记录，并知道当前用户使用单个查询将哪些结果照片添加为书签？这是我的表格: -- -- Table structure for table `photos` -
Mysql MEMORY 表 vs InnoDB 表(很多插入，很少读取)
我的网站都在 InnoDB 表上运行，目前为止运行良好。现在我想知道在我的网站上实时发生了什么，所以我将每个页面浏览量(页面、引荐来源网址、IP、主机名等)存储在 InnoDB 表中。每秒大约有 10
mysql - 如何在 mysql 中存储客户数据(2 表 vs 1 表)
我在想我会为 mysql 准备两个表。一个用于存储登录信息，另一个用于存储送货地址。这是传统方式还是所有内容都存储在一张表中？对于两个表...有没有办法自动将表 A 的列复制到表 B，以便我可以引用
mysql - 表 1 包含名字和姓氏，表 2 包含两列引用表 1 上的名称
我不是程序员，我从这个表格中阅读了很多关于如何解决我的问题的内容，但我的搜索效果不好我有两张 table 表 1:成员 id*| name | surname -------------------
c# - 如何在 ASP.NET 中显示 "View"表(SQL 表)？
我知道如何在 ASP.NET 中显示真实表，例如 public ActionResult Index() { var s = db.StaffInfoDBSet.ToList(); r
php - INSERT INTO 表 VALUES.. 与 INSERT INTO 表 SET 错误
我正在尝试运行以下查询: "insert into visits set source = 'http://google.com' and country = 'en' and ref = '1234

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 Javascript 验证表单数据