简单表单验证

最新推荐文章于 2023-01-13 21:23:11 发布

chiguang1213

最新推荐文章于 2023-01-13 21:23:11 发布

阅读量168

点赞数

原文链接：https://my.oschina.net/u/3696728/blog/1591297

版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<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>
<script>
window.onload = function(){
function $(id){ return document.getElementById(id);}
$("txt").onblur = function(){ // 离开焦点判断
// alert($("txt").value);
//alert(this.value);
if(this.value == "")
{
$("result").className ="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 = "输入正确";
}
}