HTML示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>测试jQuery的validate插件的表单</title>
<!-- 1,导入三个js文件 -->
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<!-- 2,指定哪个表单在提交前要先进行验证 -->
<script type="text/javascript">
jQuery.extend(jQuery.validator.messages, {
required: "请填写本字段",
remote: "验证失败",
email: "请输入正确的电子邮件",
url: "请输入正确的网址",
date: "请输入正确的日期",
dateISO: "请输入正确的日期 (ISO).",
number: "请输入正确的数字",
digits: "请输入正确的整数",
creditcard: "请输入正确的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入指定的后缀名的字符串",
maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),
minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),
rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),
range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
$(function(){
$("#myForm").validate();
});
</script>
<style type="text/css">
label.error{
color: red;
margin-left: 15px;
}
</style>
</head>
<body>
<!-- 3,指定字段的验证规则 -->
<form action="" id="myForm">
名称(必填,至少3个字符)
<input type="text" name="loginName" class="required {minlength:3, messages:{required:'请输入用户名!!!'}}"><br>
密码(必填)
<input type="password" name="password" class="required"><br>
再次输入(要和密码一致)
<input type="password" name="password2" class="{equalTo:'[name=password]'}"><br>
E-mail(必填,格式要正确)
<input type="text" name="email" class="required email"><br>
E-mail(json)
<input type="text" name="email2" class="{required:true,email:true}"><br>
<input type="submit" value="提交">
</form>
<hr>
<a href="?">返回</a>
</body>
</html>
<!--
<label class="error">abc</label>
<font class="error">abc</font>
字段的name值不要相同,否则指定的验证不起作用。
-->
效果