直播软件app开发，js 表单验证，登录注册

<!DOCTYPE html><br><html><br> <br><head><br>    <meta charset="UTF-8"><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <title>Document</title><br>    <style><br>        .conter {<br>            margin: 0 auto;<br>            /* padding: 20px; */<br>            width: 550px;<br>            height: 500px;<br>            box-shadow: 1px 1px 3px #000;<br>            overflow: hidden;<br>        }<br> <br>        input {<br>            width: 250px;<br>            height: 30px;<br>        }<br> <br>        h1 {<br>            line-height: 1;<br>            width: 550px;<br>            /* height: 100px; */<br>            border-bottom: 5px solid #3275c3;<br>            margin: 0;<br>            padding: 20px;<br>        }<br> <br>        p {<br>            margin-left: 40px;<br>        }<br> <br>        button {<br>            width: 100px;<br>            height: 40px;<br>            <br>            border: 2px solid #d3e1fb;<br>            border-radius: 10px;<br>            font-size: 18px;<br>            color: #fff;<br>            margin-left: 150px;<br>        }<br> <br>        .cuowu {<br>            border: 2px solid #f00;<br>        }<br> <br>        .dui {<br>            border: 2px solid #3275c3;<br>        }<br>    </style><br></head><br> <br><body><br>    <div>`<br>        <h1>新用户注册</h1><br>        <form action=""><br>            <p><br>                <span>&emsp;用户名：</span><input type="text" id="id"><br>            </p><br>            <p><br>                <span>&emsp;&emsp;密码：</span><input type="password" id="pwd"><br>            </p><br>            <p><br>                <span>确认密码：</span><input type="password" id="pswd"><br>            </p><br>            <p><br>                <span>电子邮箱：</span><input type="text" id="you"><br>            </p><br>            <p><br>                <span>手机号码：</span><input type="text" id="shouji"><br>            </p><br>            <p><br>                <span>&emsp;&emsp;生日：</span><input type="text" id="sheng"><br>            </p><br>            <button type="submit" id="submit">注册完成</button><br>        </form><br>    </div><br> <br></body><br><script><br>    var oIpt1 = document.getElementById("id");<br>    var oIpt2 = document.getElementById("pwd");<br>    var oIpt3 = document.getElementById("pswd");<br>    var oIpt4 = document.getElementById("you");<br>    var oIpt5 = document.getElementById("shouji");<br>    var oIpt6 = document.getElementById("sheng");<br>    var obtn = document.getElementById("submit");<br>    var false1 = false, false2 = false, false3 = false,<br>        false4 = false, false5 = false, false6 = false;<br> <br> <br>    // 用户名--------------------------<br>    oIpt1.onblur = function () {<br>        var zh = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;<br>        var val = oIpt1.value;<br>        if (val.length === 0) {<br>            alert("名字不能为空");<br>            false1 = false;<br>            oIpt1.className = "cuowu"; //条件不成立时  添加 类名（边框变红）<br>            return;<br>        } if (zh.test(val) === false) {<br>            alert("输入格式不对");<br>            false1 = false;<br>            oIpt1.className = "cuowu";  //条件不成立时  添加 类名（边框变红）<br>            return;<br>        } else {<br>            oIpt1.className = "dui"; //条件成立时  添加 类名（边框变蓝）<br>            false1 = true;<br>        }<br>    }<br> <br>    // 密码--------------------------<br>    oIpt2.onblur = function () {<br>        var zh = /^[a-zA-Z0-9]{4,13}$/;<br>        var val = oIpt2.value;<br>        if (val.length === 0) {<br>            alert("名字不能为空");<br>            false1 = false;<br>            oIpt2.className = "cuowu"; //条件不成立时  添加 类名（边框变红）<br>            return;<br>        } if (zh.test(val) === false) {<br>            alert("输入格式不对");<br>            false1 = false;<br>            oIpt2.className = "cuowu";  //条件不成立时  添加 类名（边框变红）<br>            return;<br>        } else {<br>            oIpt2.className = "dui"; //条件成立时  添加 类名（边框变蓝）<br>            false2 = true;<br>        }<br>    }<br> <br> <br>    // 确认密码--------------------------<br>    oIpt3.onblur = function () {<br>        var val = oIpt3.value;<br>        if (val.length === 0) {<br>            alert("名字不能为空");<br>            false1 = false;<br>            oIpt3.className = "cuowu"; //条件不成立时  添加 类名（边框变红）<br>            return;<br>        } if (val !== oIpt2.value) {<br>            alert("输入密码不一致");<br>            false1 = false;<br>            oIpt3.className = "cuowu";  //条件不成立时  添加 类名（边框变红）<br>            return;<br>        } else {<br>            oIpt3.className = "dui"; //条件成立时  添加 类名（边框变蓝）<br>            false3 = true;<br>        }<br>    }<br> <br>    // 电子邮箱--------------------------<br>    oIpt4.onblur = function () {<br>        var val = oIpt4.value;<br>        var zh = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;<br>        if (val.length === 0) {<br>            alert("邮箱不能为空");<br>            false4 = false;<br>            oIpt4.className = "cuowu"; //条件不成立时  添加 类名（边框变红）<br>            return;<br>        } if (zh.test(val) === false) {<br>            alert("输入邮箱格式不对");<br>            false4 = false;<br>            oIpt4.className = "cuowu";  //条件不成立时  添加 类名（边框变红）<br>            return;<br>        } else {<br>            oIpt4.className = "dui"; //条件成立时  添加 类名（边框变蓝）<br>            false4 = true;<br>        }<br>    }<br> <br>    //手机号----------------------------------------------<br>    oIpt5.onblur = function () {<br>        var val = this.value;<br>        var zh = /^[1][0-9]{10}$/;<br>        if (val.length === 0) {<br>            alert("不能为空");<br>            false5 = false;<br>            oIpt5.className = "cuowu"; //条件不成立时  添加 类名（边框变红）<br>            return;<br>        } if (zh.test(val) === false) {<br>            alert("输入号码格式不对");<br>            false5 = false;<br>            oIpt5.className = "cuowu";  //条件不成立时  添加 类名（边框变红）<br>            return;<br>        } else {<br>            oIpt5.className = "dui"; //条件成立时  添加 类名（边框变蓝）<br>            false5 = true;<br>        }<br>    }<br> <br>    //生日-------------------------------------------------<br>    oIpt6.onblur = function () {<br>        var val = this.value;<br>        var zh = /^(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)$/;<br>        if (val.length === 0) {<br>            alert("不能为空");<br>            false6 = false;<br>            oIpt6.className = "cuowu"; //条件不成立时  添加 类名（边框变红）<br>            return;<br>        } if (zh.test(val) === false) {<br>            alert("输入格式不对");<br>            false6 = false;<br>            oIpt6.className = "cuowu";  //条件不成立时  添加 类名（边框变红）<br>            return;<br>        } else {<br>            oIpt6.className = "dui"; //条件成立时  添加 类名（边框变蓝）<br>            false6 = true;<br>        }<br>    }<br> <br> <br>    //提交-------------------------------------------------<br> <br>    obtn.onclick = function () {<br>        if (!false1 || !false2 || !false3 || !false4 || !false5 || !false6) {<br>            alert("请重新检查表单");<br>            return false<br>        }<br>    }<br> <br></script><br> <br></html>