我们经常看到如下效果，那么它是如何实现的呢？看下面：
废话少说，直接上代码，大家直接Copy就能看到上面的效果啦。
<html>
<head>
<title>验证内容</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$(function(){ $("#signupForm").validate({
rules:{
firstName:"required",
lastName:{required:true,maxlength:}
},
message:{
firstName:"请输入您的姓名",
lastName:{required:"请输入您的姓氏",maxlength:"输入的字符个数超限"}
}
})
}) </script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form id="signupForm">
<fieldset>
<legend>验证完整的表单</legend>
<p>
<label for="firstName">名字</label>
<input id="firstName" name="firstName" type="text">
</p>
<p>
<label for="lastName">姓氏</label>
<input id="lastName" name="lastName" type="text">
</p>
<p>
<input type="submit" class="submit" value="提交"/>
</p> </fieldset>
</form>
</body>
</html>
详细学习可参考: http://www.runoob.com/jquery/jquery-plugin-validate.html