<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端表单验证</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
margin: 50px auto;
width: 500px;
font-size: larger;
/*overflow: hidden;*/
}
input{
font-size: 18px;
}
.right{
background: url("./image/ok_1.png") no-repeat 5px center;
padding-left: 30px;
background-size: 20px;
color: #9bd45e;
}
.error{
background: url("./image/error_1.png") no-repeat 5px center;
padding-left: 30px;
background-size: 20px;
color: red;
}
</style>
</head>
<body>
<div>
<label for="score">成绩:</label>
<input type="text" id="score" placeholder="请输入成绩">
<span id="span"></span>
</div>
<script>
var content = document.getElementById("score");
content.onblur = function () {
var value = parseFloat(content.value);
if (isNaN(value)){
document.getElementById("span").innerHTML = "输入有误!";
document.getElementById("span").setAttribute("class","error")
}else if (value <= 100 && value >= 0){
document.getElementById("span").innerHTML = "输入正确!";
document.getElementById("span").className='right';
}
}
</script>
</body>
</html>
结果