输入框表单验证

对于在输入框输入的值简单验证：

<label>您的成绩：</label>
<input type="text" id="text">
<span id="span">请输入您的成绩</span>

1、在JS中直接更改正确和错误的样式。使用if-else语句

$("text").onblur= function(){
    var Value=parseInt($("text").value);
    if (Value > 100 || Value < 0) {

        $("span").innerText = "输入的成绩错误";
        $("span").style.color = "red";
        $("text").style.border="1px solid red";
    }
    else{
        $("span").innerText = "输入的成绩正确";
        $("span").style.color = "green";
        $("text").style.border="1px solid green";
    }
}

2、现在style中先写好正确和错误的样式，然后在JS中更改className。再添加#text的样式

.right{
    color:yellowgreen;
    border:1px solid green !important;
}
.Error{
    color:red ;
    border:1px solid red ;!important
}

$("text").onblur= function(){
    var Value=parseInt($("text").value);
    if (Value > 100 || Value < 0) {
    $("text").style.border="1px solid red";
    $("span").className="Error";
    $("span").innerText="输入的成绩错误";
}
else{
("text").style.border="1px solid green";
        $("span").innerText = "输入的成绩正确";
        $("span").className="right";
    }
}