首先导入js文件
<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="messages_cn.js"></script>
由于Validate框架本身是英文提示，如果需要中文请自建一个messages_cn.js
关于messages_cn.js
$.extend($.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: $.validator.format("不能少于 {0}的字符串 "),
rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: $.validator.format("请输入一个最大为 {0} 的值"),
min: $.validator.format("请输入一个最小为 {0} 的值")
});
页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="jquery-2.2.1.min.js"></script>
<!-- 导入validate验证框架插件 -->
<script src="jquery.validate.min.js"></script>
<!--导入中文提示-->
<script src="messages_cn.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
//页面开始时启动插件
$().ready(function() {
$("#commentForm").validate();
});
</script>
<style>
/*设置提示信息颜色*/
.error{
color:red;
}
</style>
</head>
<body>
<!--required表示必须填写,minlength=“？”表示字符长度最少为？ -->
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>输入您的名字，邮箱，URL，备注。</legend>
<p>
<label for="cname">Name (必需, 最小两个字母)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<!--type="email"表示此文本框必须是正确的邮箱地址-->
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="pass">密码</label>
<input id="pass" type="password" minlength="6" required>
</p>
<p>
<label for="curl">URL (可选)</label>
<input id="curl" type="url" name="url" >
</p>
<p>
<label for="ccomment">备注 (必需)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>
想了解更多请参考官网文档
![Javascript构建Bingo卡片游戏[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)