web前端——页面动态交互（对注册页信息添加css及js）

按照下述要求为register.html补充外部CSS样式和JavaScript脚本。

1.补充register.css样式，实现如下功能（效果见图2）：

设置“注册信息”红、黄二重文本阴影，使用rgba设置阴影具有一定透明度；
姓名和密码输入框中显示背景图像；
单选按钮和复选按钮被选中时，其后的辅助文本动态变化为红色字体。

2.补充register.js脚本，实现如下功能：

当用户填写非空白用户名、学号和密码后，将输入域后的星号变为灰色，如果用户清除输入域内容，则再将星号变为红色，见图2；（可通过元素事件属性绑定）
当用户单击“注册”按钮时，读取用户的姓名、学号、性别、住址和爱好信息，然后使用确认消息对话框显示这些信息，并提示用户是否继续提交，见图3；（不能通过元素事件属性绑定事件处理函数）

3．如果继续，则对表单数据做如下检验、处理和提示，见图4：

检验用户名不能为空，清除用户名两端多余空格，最后向服务器提交去掉空格后的用户名；
密码必须为8位，且两次输入密码相同；
电话号码必须为11位数字；
邮件地址中必须包含且只包含一个“@”符号，并且“@”不能是地址第一和最后一个字符。

注意：若非特别说明，不能修改register****.****html中元素的标签及其属性。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>新生报到</title>
    <link href="style/register.css" rel="stylesheet" type="text/css">
    <script src="js/register.js"></script>
</head>

<body>
    <div id="wrapper">
        <h3 id="title" align="center">注 册 信 息</h3>
        <hr noshade size="1" width="99%">
        <form action="" name="regForm" id="regForm" autocomplete="on" method="get">
            <div class="info-item"><span class="item-name">姓名：</span>
                <input onchange="changeStatus()" type="text" class="item-inp" name="user_name" id="user_name" maxlength="10" autofocus/><span class="star"> *</span>
            </div>

            <div class="info-item"><span class="item-name">学号：</span>
                <input onchange="changeStatus()" type="text" class="item-inp" name="user_id" /><span class="star"> *</span>
            </div>

            <div class="info-item"><span class="item-name">密码：</span>
                <input onchange="changeStatus()" type="password" class="item-inp user_pwd" name="user_pwd1" placeholder="请输入8位密码" /><span class="star"> *</span>
            </div>

            <div class="info-item"><span class="item-name">确认密码：</span>
                <input onchange="changeStatus()" type="password" class="item-inp user_pwd" name="user_pwd2" placeholder="请输入相同的密码" /><span class="star"> *</span>
            </div>

            <div class="info-item"><span class="item-name">性别：</span>
                <div class="item-inp"><label><input type="radio" id="user_sex-man" name="user_sex" value="男" checked/><span>男</span></label>
                    <input type="radio" id="user_sex" name="user_sex" value="女" /><label for="user_sex">女</label>
                </div>
            </div>

            <div class="info-item"><span class="item-name">身高：</span>
                <input type="number" class="item-inp" name="user_height" min="150" max="190" value="178" step="5" /> 厘米
            </div>

            <div class="info-item"><span class="item-name">体重：</span>
                <input type="range" class="item-inp" name="user_weight" min="45" max="90" value="60" step="2" /> 千克
            </div>

            <div class="info-item"><span class="item-name">电话号码：</span>
                <input type="tel" class="item-inp" name="user_tel" placeholder="请输入11手机号码" />
            </div>

            <div class="info-item"><span class="item-name">E-mail：</span>
                <input type="text" class="item-inp" name="user_email" />
            </div>

            <div class="info-item"><span class="item-name">家庭住址：</span>
                <select class="item-inp" name="user_address">
                    <option value="0" >北京</option>
                    <option value="1"  selected>上海</option>
                    <option value="2" >成都</option>
                </select>
            </div>

            <div class="info-item"><span class="item-name">运动爱好：</span>
                <input type="checkbox" name="user_habit" value="篮球" checked/><span>篮球</span>
                <input type="checkbox" name="user_habit" value="足球" checked><span>足球</span>
                <input type="checkbox" name="user_habit" value="游泳"><span>游泳</span>
            </div>

            <div class="info-item"><span class="item-name">个人自述：</span>
                <textarea name="info" rows="5" cols="50">我是一位特别热爱学习的新世纪大学生。。。</textarea>
            </div>

            <input type="hidden" name="user_secret" value="7" />

            <div class="info-item" style="text-align:center;">
                <input type="button" class="item-bt" value="注册" style="margin-right:100px;" /> <input type="reset" class="item-bt" value="重置" />
            </div>
            <hr noshade size="1" width="99%">

            <ul class="info-item">
                <li><a href="tel:10086">电话</a></li>
                <li><a href="sms:10086">短信</a></li>
                <li><a href="mailto:[email protected]">E-mail</a></li>
                <li><a href="#title">返回顶部</a></li>
            </ul>
        </form>
    </div>
</body>

</html>

@charset "utf-8";

/* CSS Document */

* {
    font-size: 13px;
}

a {
    text-decoration: none;
}

a:link {
    color: blue;
}

a:visited {
    color: gray;
}

a:hover {
    color: red;
}

a:active {
    color: yellow;
}

#wrapper {
    width: 95%;
    min-width: 400px;
    max-width: 700px;
    margin: 10px auto;
    padding-top: 5px;
    border: 1px solid #ccc;
    background-color: #eee;
    letter-spacing: 0.2em;
}

#title {
    text-align: center;
    font-size: 1.5em;
    font-weight: bolder;
    margin: 10px;
    /*1.注册信息样式设计*/
    text-shadow: 0 4px rgba(253, 233, 4, 0.4), -4px 0px rgba(255, 0, 0, 0.4)
}

.info-item {
    margin: 10px;
    padding: 3px;
    /*border: 1px solid green;*/
    border-radius: 10px/6px;
    background-color: rgba(204, 204, 204, 0.4);
}

.item-name {
    width: 32%;
    display: inline-block;
    text-align: right;
    vertical-align: middle;
    /*文本和输入域均设置垂直居中对齐*/
}

.item-inp {
    width: 40%;
    box-sizing: border-box;
    /*否则设置了背景图像的输入域因padding-left而变宽*/
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em;
}

.user_pwd {
    background-image: url(../images/password.gif);
    background-repeat: no-repeat;
    padding-left: 20px;
}

input,
select {
    border: 1px solid #ccc;
    /*统一边框，否则用户名和密码输入框会因为设置背景图像而出现黑色立体边框*/
    outline: 1px solid #CCC;
    /*统一轮廓，消除chrome浏览器中输入域获得焦点时出现黑色立体边框*/
}

/*2.带有背景图像的输入域样式设计*/

/*3.设置被选中的单选按钮和复选框后的文字的颜色*/

textarea {
    width: 60%;
    vertical-align: middle;
}

/*设置导航链接的样式*/

ul,
li {
    box-sizing: border-box;
    border-radius: 10px/6px;
    background-color: rgba(204, 204, 204, 0.4);
}

ul {
    list-style: none;
    text-align: center;
}

li {
    width: 22%;
    display: inline-block;
}

.star {
    color: #F00;
}

#user_name {
    background-image: url(../images/name.gif);
    background-repeat: no-repeat;
    padding-left: 20px;
}

input:checked+span {
    color: red;
}

input:checked+label {
    color: red;
}

.grey {
    color: grey;
}

function changeStatus(obj) {
    //方法一：通过节点关系
    let content = document.getElementsByTagName('input');
    let requried = document.getElementsByClassName('star');
    let n = 0;
    for (n; n <= 4; n++) {
        if (content[n].value != '') {
            requried[n].classList.add('grey')
        } else {
            requried[n].classList.remove('grey')
        }
    }
}

function getFormData(form, keys = []) {
    let formData = new FormData(form)
    return [formData, keys.map(item => {
        return formData.get(item).trim()
    })]
}
window.addEventListener("load", () => {
    var button = document.getElementsByClassName('item-bt')
    button[0].onclick = function() {
        let m = document.getElementsByTagName('select')
            /*获得用户填写信息，在确认消息对话框中进行显示，并询问用户是否继续提交*/
        let re = document.forms[0]
        let [
            form, [
                name, sex, id, tel,
                email, pwd1, pwd2
            ],
        ] = getFormData(
            re, [
                "user_name", "user_sex", "user_id", "user_tel",
                "user_email", "user_pwd1", "user_pwd2"
            ]
        )
        let limit = /[^\d]/g
        let habits = form.getAll('user_habit').join(',')
        let index = m[0].selectedIndex
        let address = m[0].options[index].innerText
        let firm = 1;
        let email_i = 0;
        for (let i = 0; i < email.split('').length; i++) {
            if ("@" == email[i]) {
                email_i++;
            }
        }
        /*校验用户输入信息，合格则提交*/
        if (name === '') {
            alert('姓名不得为空');
            return;
        }
        if (pwd1.length != 8) {
            alert('密码必须为8位');
            return;
        }
        if (pwd1 !== pwd2) {
            alert('两次密码必须一致');
            return;
        }
        if (tel.length != 11) {
            alert('手机号码必须要11位');
            return;
        }
        if (limit.test(tel)) {
            alert('手机号码必须是数字');
            return;
        }
        if (email_i > 1 || email_i == 0) {
            alert('请输入正确的邮箱');
            return;
        }
        if (email.toString().indexOf("@") == 0 || email.toString().indexOf("@") == email.split('').length - 1) {
            alert('邮箱格式不正确');
            return;
        }
        if (firm) {
            confirm(
                `姓名：${name}` + '\n' +
                `学号：${id}` + '\n' +
                `性别：${sex}` + '\n' +
                `住址：${address}` + '\n' +
                `爱好：${habits}` + '\n' + '\n' +
                `请核对以下信息是否正确` + '\n' + '\n' +
                `单击确定继续，否则取消`
            )
        }
    }
})

测试结果截图：

标签：前端 html javascript

本文转载自: https://blog.csdn.net/weixin_65997960/article/details/129645145
版权归原作者 vin77云虞 所有，如有侵权，请联系我们删除。

web前端——页面动态交互（对注册页信息添加css及js）

发表评论

“web前端——页面动态交互（对注册页信息添加css及js）”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航