<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>校验</title>
<link rel="stylesheet" type="text/css"href="yz.css"/>
<script type="text/javascript"src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//创建一个*
$(".a1").each(function(){
var hdv=$("<strong class='redcolor'>*</strong>");
$(this).parent().append(hdv);
});
//结束
//判断
$('form:input').blur(function(){
$(this).parent().find(".a2").remove();
if($(this).is('#username')){
if(this.value==""||this.value.length<6){
var hdv1=$('<span class="a2">用户名不能小于6位</span>');
$(this).parent().append(hdv1);
}else{
var hdv1=$('<span class="a2">正确</span>');
$(this).parent().append(hdv1);
}
}
});
});
</script>
</head>
<body>
<form method="post" action="">
<div class="one">
<label name="username">用户名:</label>
<input type="text"id="username" class="a1"/>
</div>
<div class="one">
<label for="password">密码:</label>
<input type="password"id="password" class="a1"/>
</div>
<div class="one">
<label for="password1">确认密码:</label>
<input type="password"id="password1" class="a1"/>
</div>
<div class="one">
<label for="email">邮箱:</label>
<input type="text"id="email" class="a1"/>
</div>
<div class="one">
<label for="tel">手机:</label>
<input type="text"id="tel" class="a1"/>
</div>
<div class="two">
<input type="submit" id="send"value="提交">
<input type="reset" id="res"value="重置">
</div>
</form>
</body>
</html>
css代码
*{padding:0;margin:0;}
body{font-size:12px;padding:100px;}
.one{margin:10px 0;}
.one label{width:100px;float:left;text-align:right;height:20px;line-height:20px;}
.one input{border:1px solid #0F0;height:20px;}
.two{padding-left:100px;}
.redcolor{color:#C03;}