<style>
.red{border: 1px solid red;}
.wrong-tip{color: red;}
</style>
<form action="http://fanyi.baidu.com/">
昵称：<input type="text" class="name"> 密码：<input type="password" class="password"><br/><br/>
<div class="wrong-tip"></div>
<input type="submit" value="提交" class="submit" />
</form>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(function() {
var ok1 = false;
var ok2 = false; function check1() {
if($(".name").val().length >= 3 && $(".name").val().length <= 12 && $(".name").val() != '') {
$(".name").removeClass("red");
$(".wrong-tip").html("");
ok1 = true;
} else {
$(".name").addClass("red");
$(".wrong-tip").html("用户名应该为3-20位之间！");
ok1 = false;
}
} function check2() {
if($(".password").val().length >= 6 && $(".password").val().length <= 20 && $(".password").val() != '') {
$(".password").removeClass("red");
$(".wrong-tip").html("");
ok2 = true;
} else {
$(".password").addClass("red");
$(".wrong-tip").html("密码应该为6-20位之间！");
ok2 = false;
}
} $(".name").blur(function() {
check1();
})
$(".password").blur(function() {
check2();
}) $(".submit").click(function() {
check1();
check2();
if(ok1 && ok2) {
return true;
//如果用的是模拟按钮，则用这个。 $('form').submit();
} else {
return false;
}
})
})
</script>
以前觉得表单校验好难，今天终于弄明白了。