【JS惯用插件】表单验证插件jquery.validate.js

【JS常用插件】表单验证插件jquery.validate.js

//导入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 name="name" minlength="2" />
</p>
<p>
<label for="cemail"><span name="email" />
</p>
<p>
<label for="curl">网址：</label>
<input id="curl" name="url" value="" />
</p>
<p>
<label for="ccomment"><span name="comment" type="submit" value="提交"/>
</p>
</fieldset>
</form>
?