1.方法一：
引用文件：
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-validate.js"></script> 代码：
<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.error{
color: red;
}
.active{
color: #32BC61;
}
</style>
</head>
<body>
<div class="rightInput">
<form >
<div>
<label>姓名</label>
<input type="text" class="required" data-tip="请输入文字" data-valid="isNonEmpty||between:2-6"
data-error="姓名不能为空||范围是2-6">
</div>
</form>
</div>
<div>
<input type="submit"/>
</div>
</body>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-validate.js"></script>
<script>
$('form').validate({
onFocus: function() {
this.parent().addClass('active');
return false;
},
onBlur: function() {
var $parent = this.parent();
var _status = parseInt(this.attr('data-status'));
$parent.removeClass('active');
if (!_status) {
$parent.addClass('error');
}
return false;
}
});
$('form').on('submit', function(event) {
event.preventDefault();
$(this).validate('submitValidate'); //return boolean;
});
</script>
</html> 2.方法二： jquery validate的两种方法 引用文件： <script src="jquery.validate.min.js" type="text/javascript"></script>
代码; <!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title>jquery.validate.min.js</title>
</head>
<body>
<form>
<div>
<label>输入内容</label>
<input type="text" minlength="6" data-msg-minlength="至少输入6个字符" required>
</div>
<input type="submit">
</form>
</body>
<script src="jquery.validate.min.js" type="text/javascript"></script>
</html>