实验一 HTML 应用

最新推荐文章于 2024-04-17 16:42:41 发布

空午

最新推荐文章于 2024-04-17 16:42:41 发布

阅读量303

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/kuugo_/article/details/133324202

版权

实验内容

编写一个用户注册界面。实现用户登录功能

1、登录页面

设计实现一个用户注册页面，使用表单进行提交。页面应包含的元素如图 2-1 所示，注意选取适当的输入元素类型，并对其命名；表单的 action 属性课设置为空。图中“用户注册”几个字可以不和示意图一样。

2、实现用户输入信息的校验

利用 JavaScript 或者 jQuery 等完成页面元素合法性的校验，例如当用户输入的姓名不符合要求的情况，一旦鼠标离开姓名输入框，则后面的文字变为红色；反之当用户输入的姓名符合要求时，鼠标离开姓名框则后面的文字变为绿色。

<!--作者:henu 计算机与信息工程学院 空午-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <style type="text/css">
        .red-text {
            color: red;
        }

        .text-right {
            text-align: right;
        }

        .center-title {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }

        .yellow-bg {
            font-size: 24px;
            background: yellow;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1 class="center-title"><span class="yellow-bg">用户注册</span></h1>
<form>
    <table align="center">
        <tr>
            <td>
                <div><span class="red-text">*</span>用户名:</div>
            </td>
            <td id="usernameCell">
                <input name="username" type="text" onblur="checkname()">
                用户名由3-5个字符组成
            </td>
        </tr>
        <tr>
            <td>
                <div><span class="red-text">*</span>密码:</div>
            </td>
            <td id="userPasswordCell">
                <input name="password" type="password" onblur="checkpassword()">
                请输入8-12位密码
            </td>
        </tr>
        <tr>
            <td>
                <div><span class="red-text">*</span>确认密码:</div>
            </td>
            <td>
                <input name="pwdrepeat" type="password" onblur="checksame()">
                <span id="passwordRepeatCell">两次密码要一致</span>
            </td>
        </tr>
        <tr>
            <td>
                <div><span class="red-text">*</span>Email:</div>
            </td>
            <td>
                <input name="email" type="text" onblur="checkemail()">
                <span id="email">格式示例: xxxxxxxx@163.com</span>
            </td>
        </tr>
        <tr>
            <td>
                <div><span class="red-text">*</span>手机号码:</div>
            </td>
            <td>
                <input name="phone-number" type="text" onblur="checkPhoneNumber()">
                <span id="phone-number">格式示例: 13803780000</span>
            </td>
        </tr>
        <tr>
            <td>
                <div><span class="red-text">*</span>真实姓名:</div>
            </td>
            <td id="realNameCell">
                <input name="real-name" type="text" onblur="checkRealName()">
                由2-5个中文组成
            </td>
        </tr>
        <tr>
            <td>
                <div><span class="red-text">*</span>省份:</div>
            </td>
            <td>
                <select name="province">
                    <option value="0">--请选择--</option>
                    <option value="1">河南省</option>
                </select>
                请选择省份
            </td>
        </tr>
        <tr>
            <td><span class="red-text">*</span>技术方向:</td>
            <td>
                <input name="Technical Direction" type="radio" value="Java"/>Java
                <input name="Technical Direction" type="radio" value=".Net"/>.Net
                <input name="Technical Direction" type="radio" value="PHP"/>PHP
                <input name="Technical Direction" type="radio" value="网页"/>网页
                <input name="Technical Direction" type="radio" value="IOS"/>IOS
                <input name="Technical Direction" type="radio" value="Andriod"/>Android
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input name="resign" type="submit" value="注册" onclick="validateForm()"/>
                <input name="reset" type="reset" value="重置"/>
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    function checkname() {
        var name = document.getElementsByName("username")[0].value;// 获取输入框中的值
        var usernameCell = document.getElementById("usernameCell");
        var nameLength = name.length;//获取用户名的长度
        if (nameLength >= 3 && nameLength <= 5) {
            //满足条件,将文本颜色设置为绿色
            usernameCell.style.color = "green";
            return true;
        } else {
            // 不满足条件，将文本颜色设置为红色
            usernameCell.style.color = "red";
            return false;
        }
    }

    function checkpassword() {
        var password = document.getElementsByName("password")[0].value;
        var passwordlength = password.length;
        var userPasswordCell = document.getElementById("userPasswordCell");
        if (passwordlength >= 8 && passwordlength <= 12) {
            userPasswordCell.style.color = "green";
            return true;
        } else {
            userPasswordCell.style.color = "red";
            return false;
        }
    }

    function checksame() {
        var password = document.getElementsByName("password")[0].value;
        var password_repeat = document.getElementsByName("pwdrepeat")[0].value;
        var passwordRepeatCell = document.getElementById("passwordRepeatCell");
        if (password == password_repeat) {
            passwordRepeatCell.innerText = "两次密码一致";
            passwordRepeatCell.style.color = "green";
            return true;
        } else {
            passwordRepeatCell.innerText = "两次密码不一致";
            passwordRepeatCell.style.color = "red";
            return false;
        }
    }

    function checkemail() {
        var email = document.getElementsByName("email")[0].value;
        var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        var text_email = document.getElementById("email");
        if (emailRegex.test(email)) {
            text_email.innerText = "邮箱合法";
            text_email.style.color = "green";
            return true;
        } else {
            text_email.innerText = "邮箱格式不正确";
            text_email.style.color = "red";
            return false;
        }
    }

    function checkPhoneNumber() {
        var phone = document.getElementsByName("phone-number")[0].value;
        var phoneRegex = /^\d{11}$/;
        var text_phonenumber = document.getElementById("phone-number");
        if (phoneRegex.test(phone)) {
            text_phonenumber.innerText = "电话号码格式正确";
            text_phonenumber.style.color = "green";
            return true;
        } else {
            text_phonenumber.innerText = "电话格式不正确";
            text_phonenumber.style.color = "red";
            return false;
        }
    }

    function checkRealName() {
        var real_name = document.getElementsByName("real-name")[0].value;
        var realNameCell = document.getElementById("realNameCell")
        var length = real_name.length;
        if (length >= 2 && length <= 5) {
            realNameCell.style.color = "green";
            return true;
        } else {
            realNameCell.style.color = "red";
            return false;
        }
    }

    function validateForm() {
        var isNameVaild = checkname();
        var isPhoneVaild = checkPhoneNumber();
        var isRealNameVaild = checkRealName();
        var isPasswordVaild = checkpassword();
        var isTheSame = checksame();
        var isEmailVaild = checkemail();
        if (isEmailVaild && isPasswordVaild && isPhoneVaild && isRealNameVaild && isTheSame && isNameVaild) {
            document.getElementByName("resign").submit();
        } else {
            alert("请检测信息是否正确");
        }
    }
</script>
</body>
</html>