-
我自己修改后的一个jquery.validate.js表单验证插件,这个比较简单,大家改起来也方便。复杂的功能演示我都去掉了,当然如果想了解全面jquery.validate.js的强大功能,我也提供了jquery-validation-1.9.0.zip的最新版本,欢迎学习交流。
以下介绍jquery.validate.js的使用方法
//导入jquery库
<script src="http://www.zhiliren.net/js/jquery.js" type="text/javascript"></script>
//导入jquery.validate.js表单验证插件
<script src="../jquery.validate.js" type="text/javascript"></script>
//导入支持中文语言的插件,jquery.validate.js插件提供了很多国家的语言
<script src="../messages_cn.js" type="text/javascript"></script>
//绑定需要验证的表单
<script type="text/javascript">
$(document).ready(function() {
$("#commentForm").validate();
});
</script>
//以下HTML代码的样式
<style type="text/css">
#commentForm {width:800px; margin:auto; padding:30px;}
#commentForm label {width: 200px; display:inline-block; text-align:right;}
//这个就是那个错误消息的显示位置
#commentForm label.error{margin-left: 10px;width: auto;display: inline;}
#commentForm input.submit{margin-left:200px;}
.red{color:#F00}
</style>
//HTML代码
//重点是在表单控件的class上,以下介绍这几种不同的验证形式
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} 的值")
<form id="commentForm" method="post" action="">
<fieldset>
<legend>表单验证</legend>
<p>
<label for="cname"><span class="red">*</span>用户名:</label>
<input id="cname" name="name" class="required" minlength="2" />
</p>
<p>
<label for="cemail"><span class="red">*</span>邮箱:</label>
<input id="cemail" name="email" class="required email" />
</p>
<p>
<label for="curl">网址:</label>
<input id="curl" name="url" class="url" value="" />
</p>
<p>
<label for="ccomment"><span class="red">*</span>内容:</label>
<textarea id="ccomment" name="comment" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>