首先要加载jquery.js与jquery.validate.js两个文件。
<script type="text/javascript" src="js/jquery.ui.1.8.2.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script>
然后可以写验证规则,与错误提示语,也可以写自定义的验证函数。
这里的验证一般针对于html表单中的各种控件。根据它们的名字进行验证。
<script type="text/javascript"> //自定义函数验证日期大小 $.validator.addMethod("greaterThan", function(value, element, params) { if (!/Invalid|NaN/.test(new Date(value))) { return new Date(value) >= new Date($(params).val()); } return isNaN(value) && isNaN($(params).val()) || (Number(value) > Number($(params).val())); },'Must be greater than {0}.'); $(document).ready(function() { //一些验证规则 $("#form1").validate({ rules: { //标题不能为空 title: "required",// simple rule, converted to {required:true} //描述不能为空 DESCRIPTION: "required", //开始日期不能为空 start_date: "required", //有两种验证,一种是不能为空,一种是调用自定义函数,结束时间必须大于等于开始时间 end_date: { required: true, greaterThan: "#start_date" }, //州id必须大于1 state_id:{ min:1 }, //email 必须正确,并且不能为空 email: {// compound rule required: true, email: true }, url: { url: true }, comment: { required: true } }, messages: { title: "The title field is required.", start_date: "Start date is required.", state_id:"Please select the proper state", //针对必须与结束日期大于开始日期的两种提示语 end_date: { required: "End date is required.", greaterThan: "End date must be greater than Start date." }, DESCRIPTION: "Description is required." } }); }); </script>
然后可以修改一下错误提示的样式。
<style type="text/css"> label.error { position: relative; left: 285px; top:-125px; width: 205px; display: inline; color: red; white-space:nowrap; font-size:12px; font-family:Arial; } .error { color: #FFFFFF; font-family: Arial; font-size: 22px; font-weight: bold; margin-bottom: 0px; margin-top: 0px; text-align: left; } </style>
做了上述的工作之后,如果表单提交了,jQuery 就会对数据进行相应的验证工作,并将错误提示显示在界面上。
更多验证知识,还要结合实例进行摸索,学习。
本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/archive/2012/09/05/2672319.html如需转载请自行联系原作者