对于在输入框输入的值简单验证:
<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";
}
}