jquery插件基础——Validation的总结与实例

最新推荐文章于 2025-05-24 15:06:15 发布

原创最新推荐文章于 2025-05-24 15:06:15 发布 · 366 阅读

0 ·

CC 4.0 BY-SA版权

此恨绵绵无绝期专栏收录该内容

27 篇文章

订阅专栏

这篇博客详细介绍了jQuery的Validation插件，包括基本验证语法如required、email等，自定义验证信息的方法，如何设置submitHandler以在表单提交前执行代码，提示信息的定制，以及如何自定义验证规则。提供了具体的代码实例和注意事项，帮助读者深入理解并应用该插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、基本语法

required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")

引入

 jquery插件<script type="text/javascript" src="lib/jquery.js"></script>
 validate插件<script type="text/javascript" src="dist/jquery.validate.min.js"></script>
 validate插件验证信息默认为英文，故需引入中文验证信息插件
 <script type="text/javascript" src="dist/localization/messages_zh.js"></script>

指定表单

利用选择器

         $(function(){ $('select ').validate();});

验证规则、

多条验证信息用{}包含

$('# ').validate({
                rules: {
                    标签name1: 'required',//required 表示是必填字段
                    标签name2: { required: true,minlength: 3 // 最小长度是3}
                }
            });

2、自定义验证信息

$('').validate({
rules: {标签name: {required: true, minlength: 5},
messages: {username: { required: "请输入用户名", minlength: "用户名必需由两个字母组成"},
            });

3、设置submitHandler

在表单提交前执行指定代码

$('# ').validate({ submitHandler: function(){alert("提交事件成功");}});

自动提交

$('#commentForm').validate({
                submitHandler: function(form){alert("提交事件成功");from.submit();}
                            });

注意：

以下写法表单会提交两次，前端造成stack 溢出，请遵循以上实例
submitHandler: function(){$(" ").submit();}

默认值

 $.validate.setDefaults({
             submitHandler: function(){alert("提交成功！");form.submit();}
         });

只验证不提交

 $(function(){
          $("#commentForm").validate({debug:true;});
         });

4、提示信息设置

参数	描述
errorPlacement	提示信息显示位置，默认在验证元素后面
errorClass	提示错误信息的样式即class
errorElement	包裹提示信息的标签，默认值是<label>
wrapper	设置包裹errorElement的标签
errorLabelContainer	使用标签统一包裹提示信息

显示位置

//默认位置
//error：错误信息
//element：当前元素
errorPlacement: function(error, element) { error.appendTo(element.parent()); }

实例
$('').validate({
errorElement: 'span',
errorClass: 'commentError',                 
wrapper: 'li',
errorLabelContainer: $('form div.error'),//此为已存在的标签，而前三者为动态创造得
            });
使用<span>标签包裹每条信息

class=commentError

再用<li>逐一包裹　

使用class为 error 的div统一包裹

自定义样式

input.error { border: 1px solid red; }//input为自定义标签，error为固定标签
        label.error {
          background:url("demo/images/unchecked.gif") no-repeat 0px 0px;
          padding-left: 16px;
          padding-bottom: 2px;
          font-weight: bold;
          color: #EA5200;
        }
label.checked {background:url("demo/images/checked.gif") no-repeat 0px 0px;}

success回调函数

 success: function(){ },

5、自定义验证规则

内部式

//value:当前value值
//element：当前元素
$.validator.addMethod("名称", function(value, element) {  },"提示信息");
$("").validate({
rules:{name:{required: true,名称：true}}
})

外部式

//通常命名为additional-methods.js
<script type="text/javascript" src="dist/additional-methods.js"></script>
$("").validate({
rules:{name:{required: true,名称：true}}
})

additional-methods.js

//value:当前value值
//element：当前元素
$.validator.addMethod("名称", function(value, element) {  },"提示信息");