【JS惯用插件】表单验证插件jquery.validate.js
日期：2014-05-16 浏览次数：20331 次
【JS常用插件】表单验证插件jquery.validate.js
-
我自己修改后的一个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>?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
