wangzhe
/
sign.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/sign.css">
</head>
<body>
    <script>
        window.onload= function(){
            //表单绑定onsubmit事件
            document.getElementById("form2").onsubmit=function(){
                return checkUsername() && checkPassword() && checkPassword1() && checkEmail();
            }
            //绑定离焦事件
            document.getElementById("username").onblur=checkUsername;
            document.getElementById("password").onblur=checkPassword;
            document.getElementById("password1").onblur=checkPassword1;
            document.getElementById("email").onblur=checkEmail;
            //绑定聚焦事件
            document.getElementById("username").onfocus=cleanUser;
            document.getElementById("password").onfocus=cleanPwd;
            document.getElementById("password1").onfocus=cleanPwd1;
            document.getElementById("email").onfocus=cleanEmail;

        }
        //用户验证
        function checkUsername(){
            // 获取用户名

            var username=document.getElementById("username").value;
            // 正则表达式
            var reg_username=/^[a-zA-Z0-9_-]{4,16}$/;
            //验证用户名
            var flag=reg_username.test(username);
            //提示信息
            var s_username=document.getElementById("s_username");
            if(!flag){
                s_username.innerHTML="用户名格式错误 ";
            }
            return flag;
        }
        //获得焦点,清除span内容
        function cleanUser(){
            //如果username等于一个或多个空格
            //清除非法value,使用index函数,结果等于-1,则不含有该字符串
            if(!(s_username.innerText.indexOf("不")==-1)){
                //如果username不为空串,字符串中含有'不'清空value
                username.value="";
            }
            //清除span内容
            s_username.innerText="";
        }
        function checkPassword(){
            //获取密码
            var password=document.getElementById("password").value;
            //定义正则表达式
            var reg_password=/^\w{6,12}$/;
            //验证密码是否合格
            var flag=reg_password.test(password);
            //提示信息
            var s_password=document.getElementById("s_password");
            if(!flag){
                s_password.innerHTML="密码格式错误"
            }
            return flag;
        }
        //获得焦点,清除span内容
        function cleanPwd(){
            //如果password等于一个或多个空格
            //清除非法value,使用index函数,结果等于-1,则不含有该字符串
            if(!(s_password.innerText.indexOf("不")==-1)){
                //如果password不为空串,字符串中含有'不'清空value
                password.value="";
            }
            //清除span内容
            s_password.innerText="";
        }
        function checkPassword1(){
            //获取密码
            var password=document.getElementById("password").value;
            //获取确认密码
            var password1=document.getElementById("password1").value;
            //判断两个密码是否一致,给出提示

            if(password!==password1){
                s_password1.innerHTML="两次密码不一致"
            }
        }
        //获得焦点,清除span内容
        function cleanPwd1(){
            //如果password1等于一个或多个空格
            //清除非法value,使用index函数,结果等于-1,则不含有该字符串
            if(!(s_password1.innerText.indexOf("不")==-1)){
                //如果password1不为空串,字符串中含有'不'清空value
                password1.value="";
            }
            //清除span内容
            s_password1.innerText="";
        }
        function checkEmail(){
            //获取邮箱
            var email=document.getElementById("email").value;
            //定义正则表达式
            var reg_email=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-z0-9_-])+/;
            //验证邮箱是否合格
            var flag=reg_email.test(email);
            //提示信息
            var s_email=document.getElementById("s_email");
            if(!flag){
                s_email.innerHTML="邮箱格式错误";
            }
            return flag;
        }
        //获得焦点,清除span内容
        function cleanEmail(){
            //如果email等于一个或多个空格
            //清除非法value,使用index函数,结果等于-1,则不含有该字符串
            if(!(s_email.innerText.indexOf("失")==-1)){
                //如果email不为空串,字符串中含有'失'清空value
                email.value="";
            }
            //清除span内容
            s_email.innerText="";
        }


            function output(){

                if(document.getElementById("lab2").checked){
                    document.getElementById("sign_in").style.display='none';
                    document.getElementById("sign_up").style.display='block';
                    document.getElementById("sign").style.height='500px';
                }else{
                    document.getElementById("sign_in").style.display='block';
                    document.getElementById("sign_up").style.display='none';
                    document.getElementById("sign").style.height='400px';
                }

            }

    </script>
    <div id="sign">
        <div class="way">
            <input type="radio" name="tab" id="lab1"checked="checked" onchange="output()"  value="1">
            <label for="lab1" class="tab">登录</label>
            <input type="radio" name="tab" id="lab2"  onchange="output()" value="2">
            <label for="lab2" class="tab">注册</label>
        </div>
        <div id="sign_in">
            <div class="sign_html">
                <form action="#" id="form1" method="post">
                    <label for=""> 用户名</label>
                    <input type="text" id="user">
                    <label for=""> 密码</label>
                    <input type="password" id="psd">
                    <span></span><i style="font-size: .75rem;">记住密码</i> </label>
                    <input type="button" value="登录">
                </form>

            </div>
            <a href="#" style="margin-left: 5.4375rem ; display:block">忘记密码?</a>

        </div>
        <div id="sign_up">
            <form action="#" id="form2" method="post">
                <label for="username"> 用户名</label>
                <input type="text" id="username" placeholder="请输入用户名(4~16位英文字符或数字)">
                <span id="s_username" class="error"></span>
                <label for="password"> 密码</label>
                <input type="password" id="password" placeholder="请输入密码(长度在6~12之间)">
                <span id="s_password" class="error"></span>
                <label for="password1"> 确认密码</label>
                <input type="password" id="password1" placeholder="两次密码需一致">
                <span id="s_password1" class="error"></span>
                <label for="email"> 邮箱</label>
                <input type="email" id="email" placeholder="请输入邮箱">
                <span id="s_email" class="error"></span>
                <input type="submit" value="注册">
                <a href="#" style="margin-left: 5.4375rem ; display:block">已注册登录?</a>
            </form>
        </div>
    </div>
</body>
</html>