登录页面 

<!DOCTYPE html>
<html>
<head>
    <title>Register</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

        input[type="email"],
        input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #4caf50;
            color: #ffffff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        .text-center {
            text-align: center;
        }
        .form-group>p{
            color: #ff4222;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Register</h1>
    <form>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
<!--            require 第一是要求必填,第二要求格式正确,否则不submit-->
            <p id="emailTip"></p>
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <p id="passWordTip"></p>
        </div>
        <div class="form-group">
            <label for="passwordAgain">Password:</label>
            <input type="password" id="passwordAgain" required>
        </div>
        <div class="text-center">
            <button type="submit">Register</button>
        </div>
    </form>
</div>
</body>
</html>
<script>
    const email=document.getElementById('email')
    const emailTip=document.getElementById('emailTip')
    email.onchange=()=> {
        if (/^[0-9a-zA-Z._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/.test(email.value)) { //通过正则判断格式

            const xhr = new XMLHttpRequest()
            const params = `/test_email?email=${email.value}`
            xhr.open('get', params, true)

            xhr.onreadystatechange = () => {
                //当后端的response成功回转后,readyState将变成为4,status将变为200
                if (xhr.readyState === 4 && xhr.status === 200) {

                    console.log(xhr.responseText)//输出后端回应给前端的信息
                    if (xhr.responseText) {
                        emailTip.innerHTML  =xhr.responseText
                    }

                }
            }
            xhr.send()
            return true
        }
        document.getElementById('emailTip').innerHTML = '邮箱格式不正确'

    }
        document.getElementsByTagName('form')[0].onsubmit = () => {
            const password = document.getElementById('password').value//定义password的值
            const passwordAgain = document.getElementById('passwordAgain').value
            if (password === passwordAgain) {
                return true

            }
            document.getElementById('passWordTip').innerHTML = '两次密码不一致'
            return false
        }


</script>
posted @ 2023-06-30 12:51  创克杨戒不掉  阅读(22)  评论(0)    收藏  举报