使用正则表达式验证表单```js 用户名：请输入至少三位合法字符密码：请输入3-16位密码手机号：请输入合法的手

<body>
    用户名：<input class="username" type="text" placeholder="请输入至少三位合法字符" />
    <span></span>
    <br /> 密码：
    <input class="password" type="text" placeholder="请输入3-16位密码" /> <br /> 手机号：
    <input class="phone" type="text" placeholder="请输入合法的手机号" /> <br /> 邮箱：
    <input class="email" type="text" placeholder="请输入一个合法的邮箱地址" />
    <br />
    <button>提交</button>
    <script>
        let btn = document.querySelector('button')
        let username = document.querySelector('.username')
        let password = document.querySelector('.password')
        let phone = document.querySelector('.phone')
        let email = document.querySelector('.email')
        username.addEventListener('blur', function() {
            // 输入至少三个合法字符
            let regname = /^\w{3,}$/
            if (!regname.test(username.value)) {
                username.nextElementSibling.innerHTML = '用户名输入不合法'
                username.focus()
            }
        })

        // 提交按钮绑定单击事件
        btn.addEventListener('click', function() {
            // 输入至少三个合法字符
            let regname = /^\w{3,}$/
            if (!regname.test(username.value)) {
                alert('用户名输入不合法')
                return
            }
            // 输入3-16个合法字符
            let regpwd = /^\w{3,16}$/
            if (!regpwd.test(password.value)) {
                alert('密码输入不合法')
                return
            }
            // 输入1开头，第二位为[35789]其中的一种，和9个数字
            let regphone = /^1[35789]\d{9}$/
            if (!regphone.test(phone.value)) {
                alert('手机号输入不合法')
                return
            }
            // 至少一个合法字符，[@]，至少两个合法字符，[.]，至少两个合法字符
            let regemail = /^\w{1,}[@]\w{2,}[.]\w{2,}$/
            if (!regemail.test(email.value)) {
                alert('邮箱输入不合法')
                return
            }
            alert('登录成功')
        })
    </script>
</body>