GDPU JavaWeb Web前端开发

最新推荐文章于 2024-08-22 11:06:05 发布

孑么

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量436

点赞数 7

分类专栏： # JavaWeb 文章标签：前端 html5 css3 javascript

本文链接：https://blog.csdn.net/visitorcsdn/article/details/136593021

版权

JavaWeb 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

刚学JavaWeb的有福气了，数据的处理无疑在日常生活显得越来越重要。本次实验通过制作表格与表单，对前端三剑客进行了一些复习与巩固。

表格

用了不对齐的单元格，可以用rowspan与colspan进行跨行跨列。除了这个，还可以把表格的边框去掉，在css中设置格子的样式即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
         <!-- <style> 
            table{
                 text-align:center;
            }数据全居中对齐，但题设不是
           </style> -->
</head>
<body>
    <table align="center" border="3px" >
        <!-- 不要忘了标题哦 -->
        <caption>全年级成绩清单</caption>
        <tr align="center" >
            <td rowspan="2">所在班</td>
            <td rowspan="2">姓名</td>
            <td rowspan="2">班别</td>
            <td colspan="3">成绩</td>
            <td rowspan="2">评估</td>
                <tr>
                  <td>语文</td>
                  <td>数学</td>
                  <td>英语</td>
              </tr>      
         </tr>
         <tr>
             <td rowspan="3" align="center">一班</td>
             <td>张勇</td>
             <td>男</td>
             <td>98</td>
             <td>97</td>
             <td>94</td>
             <td rowspan="2">优</td>
         </tr> 
         <tr>
            <td>李勇</td>
            <td>女</td>
            <td>87</td>
            <td>83</td>
            <td>89</td>
         </tr>
         <tr>
            <td>王明</td>
            <td>男</td>
            <td>65</td>
            <td>76</td>
            <td>72</td>
            <td>差</td>
         </tr>
     </table>
</body>
</html>

表单

要求如下：（1）用户名必须以字母开头。（2）密码必须6-8位数之间。（3）确认密码要和密码一致。（4）验证电子邮箱格式。（5）省市级联。

看到这道题，以前没怎么做过表单设计的，这次还是学了不少的。在级联中要存储省市的数据进去，实际开发应该是要用数据库方面的，单页面就选了一些存进js的变量即可，然后获取进行操作。在用户验证过程中，一些是要用到正则表达式的，要记得表单要有submit按钮才能验证，题给的图就没有注册按钮，可以自行添上去。接着，验证过程有几个选项，按题给的，应该几个表单项的验证是没有先后顺序的，因此用了一个数组存进去，等到所有表单项满足才让它提交，否则报出警告信息。注意一下，原题图的报错不是弹警示框，而是在框后接一行，在这里可以用div或span，但如果是div，要有"display: inline"样式作为行内元素。接着，在js中调用innerhtml即可。还有一点，在表单里嵌表格可以让表单更整齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<script type="text/JavaScript" src="ss.js"></script>
<script type="text/JavaScript">
    window.onload=function(){
                document.getElementById("myform").onsubmit=function(){
                    //获取表单元素中的值
                    var username=this.username.value;
                    var psw=this.password.value;
                    var repsw=this.repassword.value;
                    var eml=this.email.value;
                    var err=[];
                    //验证用户名
                    if(username.length!=0){
                    var pattern = /^[a-zA-Z][a-zA-Z0-9_]*$/;             
                      if (!pattern.test(username)) {
                             divuser.innerHTML="<font color='#CC0000'>×必须以字母开头</font>";
                               err.push("×必须以字母开头");      
                            }       
                    }else{
                        divuser.innerHTML="<font color='#CC0000'>用户名不能为空</font>";
                        err.push("用户名不能为空");          
                    }
                     
                    //验证密码
                    if(psw.length!=0){
                        if(psw.length<6 || psw.length>8){
                            divpsw.innerHTML="<font color='#CC0000'>必须在6位以上</font>";
                            err.push("必须在6位以上");
                        }
                    }else{
                        divpsw.innerHTML="<font color='#CC0000'>密码不能为空</font>";
                        err.push("密码不能为空");
                    }
                     
                    //验证重复密码
                    if (repsw.length!=0) {
                        if (psw!=repsw) {
                            divrepsw.innerHTML="<font color='#CC0000'>密码须一致</font>";
                            err.push("密码须一致");
                        }
                    } else{
                        divrepsw.innerHTML="<font color='#CC0000'>密码不能为空</font>";
                        err.push("密码不能为空");
                    }
                         
                    //邮箱验证
                    if (eml!=0) {
                        if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(eml))) {
                            divem.innerHTML="<font color='#CC0000'>邮箱格式不正确</font>";
                            err.push("邮箱格式不正确");
                        }
                    } else{
                        divem.innerHTML="<font color='#CC0000'>邮箱不能为空</font>";
                        err.push("邮箱不能为空");
                    }
                    if (err.length > 0) { 
                        alert(err.join("\n"));//这个框也可以不写
                        return false; 
                    }
                         alert("注册成功！");
                            return true;
                }
                 
            }
</script>

<body>
    <form action="#" method="post" id="myform">
        <table cellpadding="2" align="center">
            <hr color="cc66cc" size="10" width="50%">
            <caption>用户注册</caption>

            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" name="username"><span id="divuser"></span>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" name="password">
                    <div id="divpsw" style="display: inline;"></div>
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td>
                    <input type="password" name="repassword">
                    <div id="divrepsw" style="display: inline;"></div>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="gender" value="male">男
                    <input type="radio" name="gender" value="female">女
                </td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <input type="checkbox" name="hobby" value="reading">读书
                    <input type="checkbox" name="hobby" value="swim">游泳
                    <input type="checkbox" name="hobby" value="games">游戏
                    <input type="checkbox" name="hobby" value="travel">旅游
                </td>
            </tr>
            <tr>
                <td>来自：</td>
                <td>
                    <select id="province" onchange="updateCities()">
                        <option>---省或直辖市</option>
                        <option value="province1">北京市</option>
                        <option value="province2">广东省</option>
                        <option value="province3">上海市</option>
                        <option value="province4">天津市</option>
                        <option value="province5">重庆市</option>
                        <option value="province6">江苏省</option>
                        <option value="province7">浙江省</option>
                        <option value="province8">四川省</option>
                        <option value="province9">云南省</option>
                        <option value="province10">湖北省</option>
                        <option value="province11">湖南省</option>
                        <option value="province12">海南省</option>
                    </select>
                    <select id="city">
                        <option>---城市----</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td>
                    <input type="text" name="email"><span id="divem"></div>
                </td>
            </tr>
            <tr>
                <td>上传图片：</td>
                <td>
                    <input type="file" name="photo">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="注册">
                    <input type="reset" value="重填">
                </td>
            </tr>
        </table>
    </form>
</body>

</html>

var citiesData = {
    province1: ["北京市"],
    province2: ["广州市","深圳市","中山市","珠海市","东莞市","佛山市","云浮市"],
    province3: ["上海市"],
    province4: ["天津市"],
    province5: ["重庆市"],
    province6: ["南京市","苏州市","无锡市","扬州市","南通市"],
    province7: ["杭州市","温州市","嘉兴市","宁波市"],
    province8: ["成都市","广元市","宜宾市","大凉州"],
    province9: ["昆明市","大理州"],
    province10: ["武汉市","宜昌市"],
    province11: ["长沙市","岳阳市"],
    province12: ["三亚市","海口市"],
};

function updateCities() {
    var selectedProvince = document.getElementById("province").value;
    var citySelect = document.getElementById("city");
    citySelect.innerHTML = ""; // 清空城市选项

    if (citiesData[selectedProvince]) {
        citiesData[selectedProvince].forEach(function(city) {
            var option = document.createElement("option");
            option.text = city;
            citySelect.add(option);
        });
    } else {
        var option = document.createElement("option");
        option.text = "请选择省份";
        citySelect.add(option);
    }
}
// 页面加载时初始化城市列表
updateCities();