简单的form表单验证

在线演示

html:

<div class="box">
    语文: <input type="text" id="txt"/>  <span id="result">请输入成绩</span>
</div>

css:

<style>
    .box {
        text-align: center;
        margin:100px auto;
    }
    span {
        display: inline-block;
        width: 150px;
        height: 20px;
        border: 1px solid #ccc;
        font-size:12px;
        line-height: 20px;
        text-align: left;
        padding-left: 20px;
        background-color: #eee;
        color:#999;
    }
    .right {  /*正确的*/
        color: #5EFF5E;
        background:url(images/right.png) no-repeat #DFFFDF 4px 3px;
        border: 1px solid #ACFFAC;
    }
    .wrong {  /*错误的*/
        background:url(images/wrong.png) no-repeat #FFDCD0 4px 3px;
        border: 1px solid #FFAC91;
        color: #FF6B39;
    }
</style>

js表单验证：

<script>
    window.onload = function(){
        function $(id){ return document.getElementById(id);}

        $("txt").onblur = function(){   // 离开焦点判断
            if(this.value == ""){
                $("result").className ="wrong";//如果值为空，那么result类名是“wrong”
                $("result").innerHTML = "内容不能为空";
            }else if(isNaN(this.value)){  // 判断不是数字
                $("result").className ="wrong";
                $("result").innerHTML = "请输入数字思密达";
            }else if(this.value >150 || this.value<0){
                $("result").className ="wrong";
                $("result").innerHTML = "请输入合理的范围";
            }else{
                $("result").className ="right";
                $("result").innerHTML = "输入正确";
            }
        }
    }
</script>