【Web动态网页设计作业】简单的JavaScript验证表单

最新推荐文章于 2020-06-12 15:10:23 发布

小呀小二笙

最新推荐文章于 2020-06-12 15:10:23 发布

阅读量7.9k

点赞数 9

分类专栏：【心情/杂谈】

本文链接：https://blog.csdn.net/qq_38790716/article/details/85308779

版权

【心情/杂谈】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

编写一个JavaScript程序验证表单，其中，表单中有四个元素，分别是姓名，年龄，email，以及一个专业的复选框，其中专业选项为“计算机科学与技术”“通信工程”，“英语”。要求在表单提交的时候做如下判断：
（1）姓名年龄和email三个元素的内容均不能为空；
（2）年龄必须为数字；
（3）email中必须有一个@符号。完全满足上述三个条件时方可提交，否则弹出给用户提示信息。
（4）在此基础上，编写后台处理php代码，使用php获取并输出所有用户提交的数据，注意，复选框为多个值输出。

设计思路及代码

思路如下：

1.先将表单设计完成
2.然后使用JavaScript函数进行表单的判断
3.提交到php文件，并进行处理
4.调整表单格式

html文件：

//fhh.html --此为注释
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证表单</title>
    //调整表单格式  --此为注释
    <style>
        table {
            width: 500px;
            margin-left: 500px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<form method="POST" action="check.php" >  //提交到php文件进行处理
    <table>
        <tr>
            <td> 姓名：  </td>
            <td><input type = "text" id="name" name="name"></td>
        </tr>
        <tr>
            <td> 年龄：  </td>
            <td><input type = "text" id="age" name="age"></td>
        </tr>
        <tr>
        	//增加的表格，并设置为单选框  --此为注释
            <td>性别：  </td>
            <td><input type = "radio"  name="sex" value="0">男
                <input type = "radio" name="sex" value="1">女</td>
        </tr>
        <tr>
            <td>Email：</td>
            <td><input type = "text" id="email" name="email"></td>
        </tr>
        <tr>
            <td>专业：  </td>
            <td><input name = "choose[]" type="checkbox" value="computer">计算机科学与技术
                <input name = "choose[]" type="checkbox" value="communication">通信工程
                <input name = "choose[]" type="checkbox" value="english">英语</td>
        </tr>
        <tr>
            <td><input type="submit" id="Submit" value="Submit"></td>
        </tr>
    </table>
</form>
<script src="check.js"></script>  //链接到JavaScript文件处理
</body>
</html>

js文件：

//check.js
var bt = document.getElementById("Submit");
bt.onclick=function () {
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    var email = document.getElementById("email").value;
    var format = /^[0-9]+$/;  //正则表达式处理年龄是否合法，即要求全为数字
    if (name == "") {
        alert("用户名不能为空");
        return false;
    }
    if (age == "") {
        alert("年龄不能为空");
        return false;
    }
    else if (format.test(age) == false){
        alert("非法的年龄");
        return false;
    }
    if (email == "") {
        alert("电子邮件地址不能为空");
        return false;
    }
    if (email.indexOf("@") == -1 ) {
        alert("不合法的电子邮件");
        return false;
    }
};

php处理文件：

//check.php
<?php
/**
 * Created by PhpStorm.
 * User: 二笙
 * Date: 2018/12/26
 * Time: 21:26
 */
echo "姓名: ".$_POST["name"];
echo "<br/>";
echo "年龄: ".$_POST["age"];
echo "<br/>";
echo "性别: ";
if ($_POST["sex"] == 0)
    echo "男";
else
    echo "女";
echo "<br/>";
echo "Email: ".$_POST["email"];
echo "<br/>";
echo "专业: ";
for ($i=0;$i<count($_POST["choose"]);$i++) {
    if ($_POST["choose"][$i] == "computer") {
        echo "计算机科学与技术 ";
    }
    else if ($_POST["choose"][$i] == "communication") {
        echo "通信工程 ";
    }
    else if ($_POST["choose"][$i] == "english") {
        echo "英语 ";
    }
}
?>

结果展示

合法的表单：
在这里插入图片描述

判断各类不满足要求的表单：

复选框输出结果：

遇到的问题及解决方法

1.开始时将js验证函数置于< title>之下，js验证函数并没有成功调用进行验证？

解决方法：(1) 将js验证函数移到< /form>之后位置，让表单设计完之后再进行调用 (2)实则与第一种处理方式相同，即将js验证函数写在js文件中，然后在html链接到js文件 < script src="check.js">< /script>

2.在写php处理文件时，发现输出的是其value值，并没有输出其后的中文，比如输出性别得到的是其value值？

解决方法：对其得到的value值进行判断，如果满足哪个条件就输出想要得到的中文

if ($_POST["sex"] == 0)
    echo "男";
else
    echo "女";

个人总结

在做完设计作业后，个人感觉对于html、js及php有了一个更加全面的认识，对于课程上老师讲到的内容也有了更深的理解。

（内心os：课上没认真听讲的后果就是遇到了好多的bug= = ）

小呀小二笙

关注

9
点赞
踩
119

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录