<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>
        用户名：
        <input type="text" onblur="usernamecheck()" id="username"/>
        <span id="yhmtext"></span>
        </p>
        <p>
        密码：
        <input type="password" id="psw"  onblur="pswcheck()"/>
        <span id="pswtext"></span>
        </p>
        <p>
        确认密码：
        <input type="password" id="repsw" onblur="repswcheck()"/>
        <span id="retext"></span>
        </p>
        <p>
        年龄：
        <input type="text" id="age" onblur="agecheck()" />
        <span id="agetext"></span>
        </p>
    </body>
    <script type="text/javascript">
        //校验用户名
        function usernamecheck(){
            //获取dom
            var username = document.getElementById("username");
            //获取输入的值
            var usernameValue = username.value;
            //校验用户名是否为空
            if(usernameValue == ''){
                //alert("用户名不能为空");
            //  var span = document.getElementById("yhmtext");
            //   span.innerText = "用户名不能为空";
            //  span.style.color = "red";
            //  //输入框变成红色
            //  username.style.borderColor = "red";
            //  username.style.borderStyle = "solid"
            //  username.style.borderWidth = "1px"
                showMess('yhmtext','[用户名不能为空]','red')
                return;
            }
             //校验用户名是否为纯数字
            if(!isNaN(usernameValue)){
                showMess('yhmtext','[用户名不能为纯数字]','red');
                return;
            }
             //执行到这里表示用户名已经通过校验
            showMess('yhmtext','[√]','green');
        }
        function showMess(spanId,msgText,msgColor){
            //获取span对象
            var span = document.getElementById(spanId);
            //span里的提示内容
            span.innerText = msgText;
            //span的字体颜色
            span.style.color = msgColor;
        }
        function pswcheck(){
            var  psw = document.getElementById("psw");
            var pswValue = psw.value;
            if(pswValue == ''){
                showMess('pswtext','[密码不能为空]','red');
                return;
            }
            showMess('pswtext','[√]','green');
        }
        function repswcheck(){
            var repsw = document.getElementById("repsw");
            var repswValue = repsw.value;
            var psw = document.getElementById("psw");
            var pswValue = psw.value
            if(repswValue != pswValue){
                showMess('retext','[两次密码不一致]','red');
                return;
            }
            showMess('retext','[√]','green');
        }
        function agecheck(){
            var age = document.getElementById("age");
            var ageValue = age.value;
            if(ageValue <15 || ageValue >150){
                showMess('agetext','[年龄要在15-150之间]','red');
                return;            
            }
            showMess('agetext','[√]','green');
        }
    </script>
</html>