JS

<html>
<head>

<script type="text/javascript">

    function show(obj)
    {
        var str = obj.value.toString();
        var len = obj.value.length;
        var pattern = /^[0-9]*$/;
        document.getElementById("phone").innerHTML = str; 
        for(var i=0;i<len;i++)
        {
            if(!pattern.test(str[i]))
            {
                //document.getElementById("phone").innerHTML = str;
            }
        }
    }
    
    function check()
    {
        document.getElementById("phone").innerHTML = "";
    }
    
    function get(obj)
    {
        var len = obj.value.length;
        var str = obj.value.toString();
        if(len>0) document.getElementById("phone").innerHTML = str;
        else document.getElementById("phone").innerHTML = "请输入手机号";
    }


</script>

<style type="text/css">

body
{
    background-color: rgb(0,0,0);
    padding-right: 32px;
    margin-top: 20px;
    padding-left: 32px;
    font-size: 12px;
    padding-bottom: 32px;
    color: #000;
    padding-top: 32px;
    font-family: verdana,Arial,Helvetica,sans-serif;
}

#main
{
    border-right: #bbb 1px solid;
    border-top: #bbb 1px solid;
    background-color: #fff;
    border-left: #bbb 1px solid;
    border-bottom: #bbb 1px solid;
    text-align: left;
    padding: 30px 20px 20px 50px;
     350px;
}

#heading
{
    padding-right: 0;
    padding-left: 0;
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 15px;
    margin: 0;
    color: #904;
    padding-top: 0;
}

.label-line {
    display: block;
    font-size: 12px;
    margin: 0;
}

.tip {
    color: red;
}

#agreement {
    vertical-align: middle;
    margin: 0 5px 0 0;
}

.block {
    margin-bottom: 10px;
}

#phone
{
    display:block;
}

</style>

</head>

<body>

<div style="100%;">
    <div align = "center">
        <div id = "main">
        
        <form method="post" onsubmit="false">
        <fieldset>
        <div id = "heading">QL</div>
        <div class = "block">
        <label>手机号</label>
        <strong id ="phone">请输入你的手机号</strong>
        <input type = "text" id = "input1" value class = "input-text" onkeydown = "check_enter(event)" onkeyup="show(this)" onblur="check()" onfocus="get(this)">
        <span id = "tip_input1" class = "tip"></span>
        </div>
        <div class = "block">
        <label>所在班级</label>
        <form>
        <select name="classes">
        <option value="s2">软工2班</option>
        <option value="s3">软工3班</option>
        <option value="s1" selected="selected">软工1班</option>
        <option value="i1">网工1班</option>
        </select>
        </form>
        </div>
        <div class = "block">
        <label class="label-line">输入密码</label>
        <input type = "password" id = "input2" value class = "input-text" onkeydown = "check_enter(event)">
        <span id = "tip_input2" class = "tip"></span>
        </div>
        <div class = "block">
        <label class="label-line">再次输入密码</label>
        <input type = "password" id = "input3" value class = "input-text" onkeydown = "check_enter(event)">
        <span id = "tip_input3" class = "tip"></span>
        </div>
        </fieldset>
        <div class = "block">
        <input type = "checkbox" id = "agreement" name = "agreement" onkeydown = "check_enter(event)">
        <label for="agreement" onkeydown = "check_enter(event)">遵守本站约定</label>
        </div>
        <div class = "block">
        <input type = "submit" id = "signin" class = "button" value = "Register">
        <span id = "tip_input2" class = "tip"></span>
        </div>
        </form>
        
        </div>
    </div>
</div>

</body>
</html>
原文地址:https://www.cnblogs.com/qlky/p/6024037.html