jQuery Validate使用笔记

最新推荐文章于 2024-03-14 07:00:00 发布
最新推荐文章于 2024-03-14 07:00:00 发布
阅读量1w 收藏 27
点赞数 8
分类专栏： JavaWeb jquery 文章标签： jquery-validate-js 表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxiaoan1234/article/details/77466720
版权

jQuery Validate使用笔记

1、简介

详细使用参考：菜鸟教程
官方网站：jQuery Validation Plugin

jQuery Validate是一款表单验证插件，提供了强大的表单验证功能，学习使用十分简单方便。

官方文档和菜鸟教程上写的很详细，写这篇博文的目的就是加深印象，熟练技术，记录一些平时自己用的方法，方便查阅。（也许里面就有你想找的）

为了突出使用jQuery Validate，所以没有使用样式。所有demo采用html默认样式。

2、引入插件

从官网上下载最新版的压缩包，里面包含js文件和demo。该插件依赖jQuery插件，所以要一同引入jQuery插件，并且jQuery插件的引入要放在放在前面。

隐藏的控件是不糊被校验的，即使写了对应校验规则，只要控件是hidden校验将忽略。这样就不用js判断控件是否隐藏而手动判断是否需要校验，这都是自动完成的。

或者直接引入我GitHub上面仓库文件：

<script type="text/javascript" src="https://wangxiaoan1234.github.io/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="https://wangxiaoan1234.github.io/jquery-validation-1.17.0/dist/jquery.validate.js"></script>

3、使用

把下面代码复制到html文件内可直接运行。

3.1 将规则写在控件内

注意：即使将规则写在了控件内，也要在js文件中加上$userForm.validate();否则规则不起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-Validate-Demo</title>
    <script type="text/javascript" src="https://wangxiaoan1234.github.io/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://wangxiaoan1234.github.io/jquery-validation-1.17.0/dist/jquery.validate.js"></script>
</head>
<body>

<form action="#" id="userForm" method="post">
    用户名：<input type="text" name="name" id="name" required max="150">

    <br><input type="submit" value="提交">
</form>

<script>
    var $userForm = $("#userForm");
    $userForm.validate();
</script>
</body>
</html>

3.2 将规则写到js文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-Validate-Demo</title>
    <script type="text/javascript" src="https://wangxiaoan1234.github.io/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://wangxiaoan1234.github.io/jquery-validation-1.17.0/dist/jquery.validate.js"></script>
</head>
<body>

<form action="#" id="userForm" method="post">
    用户名：<input type="text" name="name" id="name">

    <br><input type="submit" value="提交">
</form>

<script>
    $(function () {
        var $userForm = $("#userForm");
        $userForm.validate({
            rules: {
                name: {
                    required: true,
                    max: 150
                }
            }
        });
    })
</script>
</body>
</html>

效果：

这里写图片描述

4、高级配置项

4.1 本地化提示信息

引入中文提示包：messages_zh.js
注意：该文件要在jquery.validate.js文件之后引入。

这里写图片描述

该文件部分内容如下，如果想自定义提示信息可以修改该文件，或重新写一份js文件引入。

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else if (typeof module === "object" && module.exports) {
        module.exports = factory( require( "jquery" ) );
    } else {
        factory( jQuery );
    }
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend( $.validator.messages, { 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} 的数值" ) } );
return $;
}));

4.2 默认验证规则

默认验证规则如下：

序号规则描述
1required:true必须输入的字段。
2remote:”check.php”使用 ajax 方法调用 check.php 验证输入值。
3email:true必须输入正确格式的电子邮件。
4url:true必须输入正确格式的网址。
5date:true必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6dateISO:true必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7number:true必须输入合法的数字（负数，小数）。
8digits:true必须输入整数。
9creditcard:必须输入合法的信用卡号。
10equalTo:”#field”输入值必须和 #field 相同。
11accept:输入拥有合法后缀名的字符串（上传文件的后缀）。
12maxlength:5输入长度最多是 5 的字符串（汉字算一个字符）。
13minlength:10输入长度最小是 10 的字符串（汉字算一个字符）。
14rangelength:[5,10]输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15range:[5,10]输入值必须介于 5 和 10 之间。
16max:5输入值不能大于 5。
17min:10输入值不能小于 10。
  • required: true 值是必须的。
  • required: “#aa:checked” 表达式的值为真，则需要验证。
  • required: function(){} 返回为真，表示需要验证。

后边两种常用于，表单中需要同时填或不填的元素。

为了表示方便下面代码只贴出了<body>里面的内容，js引入等省略。

required: “#aa:checked”演示：

<form action="#" id="userForm" method="post">
    用户名：<input type="text" name="name" id="name" autocomplete="off">
    <br>是否必填：<input type="checkbox" name="flag" id="flag">
    <br><input type="submit" value="提交">
</form>

<script>
    $(function () {
        var $userForm = $("#userForm");
        $userForm.validate({
            rules: {
                name: {
                    required: "#flag:checked",
                    max: 150
                }
            }
        });
    })
</script>

这里写图片描述

required: function(){}演示：
form表单内容和上面一样，只是required内容不一样：

name: {
    required: function () {
        return $("#flag").prop("checked");
    },
    max: 150
}

这里写图片描述

4.3 其它方法及注意事项

4.3.1 用其他方式替代默认的 submit
$(function () {
  var $userForm = $("#userForm");
    $userForm.validate({
        submitHandler: function (form) {
            //在这里可以写一些代码
            alert("表单提交了");
            form.submit();//提交表单，这里可以进行逻辑判断，如果不想提交就不提交
        }
    });
})
上面表单提交写成`form.submit()`就好了，写成下面这两种情况会无限提交： 
$(form).submit();
$userForm.submit();

这里写图片描述

使用ajax方式提交表单：使用ajax方式提交时以下三种提交方式都有效：

$(form).ajaxSubmit();
//.ajaxSubmit();
//$userForm.ajaxSubmit();
var $userForm = $("#userForm");
$userForm.validate({
    submitHandler: function (form) {
       $(form).ajaxSubmit();
    }
});

想给ajax提交设置一些参数，及请求成功后执行一些操作可以这样做：

var $userForm = $("#userForm");
$userForm.validate({
     submitHandler: function (form) {
         var options = {
             dataType: 'json',
             success: function (responseText, statusText, xhr, $form) {
                 alert("ajax返回成功了");
                 //进行一些处理
             }
         };
        $(form).ajaxSubmit(options);
     }
 });

可以设置 validate 的默认值，写法如下：

$.validator.setDefaults({
    submitHandler: function(form) { alert("提交事件!");form.submit(); }
});
var $userForm = $("#userForm");
$userForm.validate();

这里写图片描述

4.3.2 debug，只验证不提交表单

设置里debug参数，即使验证通过了也不会提交表单。这样在调试起来就方便了，即使只写了一部分验证规则，也不用担心提交错误数据。如下图所示对name不进行任何校验，但是点提交按钮并没有提交表单。

var $userForm = $("#userForm");
$userForm.validate({
     debug: true,
     rules: {
         name: {
//          required: true
         }
     }
 });

这里写图片描述

同理如果一个页面中有多个表单都想设置成为 debug，则使用：

$.validator.setDefaults({
   debug: true
})
4.3.3 ignore：忽略某些元素不验证

暂时没用过，哪个元素不验证我不写对应控件的规格不就行啦吗，等发现用处再回来补上。

ignore: ".ignore"
4.3.4 更改错误信息显示的位置
<form action="#" id="userForm" method="post">
    用户名：<input type="text" name="name" id="name" autocomplete="off">
    <br>是否必填：<input type="checkbox" name="flag" id="flag">
    <br><input type="submit" value="提交">
    <br>
    错误将在这显示：<span id="errorSpan"></span>
</form>

<script>
    $(function () {
        var $userForm = $("#userForm");
        $userForm.validate({
            debug: true,
            errorPlacement: function(error, element) {
//                error.appendTo(element.parent());//这是默认的，就像前几个图显示的，直接追加到该控件的后面
                error.appendTo($("#errorSpan"))
            },
            rules: {
                name: {
                    required: true
                }
            }
        });
    })
</script>

效果如下：

这里写图片描述

4.3.5 更改错误信息显示的样式
参数类型描述默认值
errorClassString指定错误提示的 css 类名，可以自定义错误提示的样式。“error”
errorElementString用什么标签标记错误，默认是 label，可以改成 em。“label”
errorContainerSelector显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大。
errorContainer: “#messageBox1, #messageBox2”
errorLabelContainerSelector把错误信息统一放在一个容器里面。
wrapperString用什么标签再把上边的 errorELement 包起来。


下面修改一下样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-Validate-Demo</title>
    <script type="text/javascript" src="https://wangxiaoan1234.github.io/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://wangxiaoan1234.github.io/jquery-validation-1.17.0/dist/jquery.validate.js"></script>
    <script type="text/javascript" src="https://wangxiaoan1234.github.io/jquery-validation-1.17.0/dist/localization/messages_zh.js"></script>
    <style type="text/css">
        .myError {
            color: red;
        }
    </style>
</head>
<body>

<form action="#" id="userForm" method="post">
    用户名：<input type="text" name="name" id="name" autocomplete="off">
    邮箱：<input type="text" name="email" id="email" autocomplete="off">
    <br><input type="submit" value="提交">
    <br>
    错误将在这显示：<span id="errorSpan"></span>
</form>

<script>
    $(function () {
        var $userForm = $("#userForm");
        $userForm.validate({
            debug: true,
            errorClass: "myError",
            errorElement: "p",
            wrapper: "div",
            errorLabelContainer: $("#errorSpan"),
            rules: {
                name: {
                    required: true
                },
                email: {
                    required: true,
                    email: true
                }
            }
        });
    })
</script>
</body>
</html>

这里写图片描述

看这张图就清楚上面说的话了：

这里写图片描述

4.3.6 自定义错误提示信息

<form action="#" id="userForm" method="post">
    用户名：<input type="text" name="name" id="name" autocomplete="off" >
    <br><input type="submit" value="提交">
</form>

<script>
    $(function () {
        var validator = $("#userForm").validate({
            debug: true,
            rules: {
                name: {
                    required: true,
                    minlength: 2
                }
            },
            messages: {
                name: {
                    required: "这个你必须得填╭(╯^╰)╮",
                    minlength: "你太短了→_→"
                }
            }
        });
    })
</script>

这里写图片描述

4.3.7 表单所有字段段验证通过执行函数
success：String/Callback

如果跟一个字符串，会当作一个 css 类，也可跟一个函数。

回调函数：

<style type="text/css">
    .error {
        border-color: red;
        color: red;
    }
    .valid {
        border-color: green;
        color: yellow;
    }
</style>

<form action="#" id="userForm" method="post">
    用户名：<input type="text" name="name" id="name" autocomplete="off">
    <br><br>邮箱：<input type="text" name="email" id="email">
    <br><input type="submit" value="提交">
</form>

<script>
    $(function () {
        var $userForm = $("#userForm");
        $userForm.validate({
            debug: true,
            rules: {
                name: {
                    required: true
                },
                email: {
                    required: true
                }
            },
            success: function(label) {
                label.html("验证通过").addClass("valid");
            }

        });
    })
</script>

这里写图片描述
这里写图片描述

字符串：
这里写图片描述

4.3.8 验证的触发方式修改
触发方式类型描述默认值
onsubmitBoolean提交时验证。设置为 false 就用其他方法去验证。true
onfocusoutBoolean失去焦点时验证（不包括复选框/单选按钮）。true
onkeyupBoolean在 keyup 时验证。true
onclickBoolean在点击复选框和单选按钮时验证。true
focusInvalidBoolean提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。true
focusCleanupBoolean如果是 true 那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用。false
var $userForm = $("#userForm");
$userForm.validate({
     debug: true,
     rules: {
         name: {
             required: true
         },
         email: {
             required: true
         }
     },
     focusCleanup: true//如果是 true 那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用。
 });

看得出来label是通过style="display:none;切换来完成错误提示的显示与隐藏。

这里写图片描述

4.3.9 异步验证
remote：URL

假设需要验证用户输入的邮箱是否已经注册：
后台接收前台传过来的邮箱，从数据库里查询当前邮箱个数，并将该邮箱在数据库中的个数返回给前台。
由于后台传过来的是一个text型数据，remote想要的是boolean型，所以用dataFilter对ajax返回的数据进行预处理。

$(function () {
    var $userForm = $("#userForm");
    $userForm.validate({
        debug: true,
        rules: {
            name: {
                required: true
            },
            email: {
                email: true,
                required: true,
                remote:{
                    type: "post",
                    url: "url",
                    data:{
                        email: function () {
                            return $('#email').val();
                        }
                    },
                    dataType:"text",
                    dataFilter:function(data){
                        return data == 0;//如果为零则邮箱可用
                    }
                }
            }
        }
    });
})
4.3.10 添加自定义校验
addMethod：name, method, message

additional-methods.js文件里有很多校验规格，引入该文件就可以使用该文件内的方法。（放在最后引入，防止出错）
比如验证美国邮编：

$.validator.addMethod( "zipcodeUS", function( value, element ) {
    return this.optional( element ) || /^\d{5}(-\d{4})?$/.test( value );
}, "The specified US ZIP Code is invalid" );

还是写一个自己的验证规则吧：


<form action="#" id="userForm" method="post">
    用户名：<input type="text" name="name" id="name" autocomplete="off">
    <br><br>我帅吗：<input type="text" name="me" id="me" autocomplete="off">
    <br><input type="submit" value="提交">
</form>

<script>
    $(function () {
        var $userForm = $("#userForm");
        $userForm.validate({
            debug: true,
            rules: {
                name: {
                    required: true
                },
                me: {
                    checkMe: true,
                    required: true
                }
            }
        });

        jQuery.validator.addMethod("checkMe", function(value, element) {
            var reg = /^帅$/;
            return this.optional(element) || (reg.test(value));
        }, "必须填帅");
    })
</script>

这里写图片描述

4.3.11 radio 和 checkbox、select 的验证

这个很简单，直接从菜鸟教程拷来的例子。

radio 的 required 表示必须选中一个。

<input  type="radio" id="gender_male" value="m" name="gender" required />
<input  type="radio" id="gender_female" value="f" name="gender"/>

checkbox 的 required 表示必须选中。

<input type="checkbox" class="checkbox" id="agree" name="agree" required />

checkbox 的 minlength 表示必须选中的最小个数，maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

select 的 required 表示选中的 value 不能为空。

<select id="jungle" name="jungle" title="Please select something!" required>
    <option value=""></option>
    <option value="1">Buga</option>
    <option value="2">Baga</option>
    <option value="3">Oi</option>
</select>

select 的 minlength 表示选中的最小个数（可多选的 select），maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
    <option value="b">Banana</option>
    <option value="a">Apple</option>
    <option value="p">Peach</option>
    <option value="t">Turtle</option>
</select>
4.3.12 API
名称返回类型描述
validate(options)Validator验证所选的 FORM。
valid()Boolean检查是否验证通过。
rules()Options返回元素的验证规则。
rules(“add”,rules)Options增加验证规则。
rules(“remove”,rules)Options删除验证规则。
removeAttrs(attributes)Options删除特殊属性并且返回它们。
自定义选择器
:blankValidator没有值的筛选器。
:filledArray <Element>有值的筛选器。
:uncheckedArray <Element>没选择的元素的筛选器。
实用工具
jQuery.format(template,argument,argumentN…)String用参数代替模板中的 {n}。

使用方法：

1、为某个字段追加校验规则：

<form action="#" id="userForm" method="post">
    用户名：<input type="text" name="name" id="name" autocomplete="off">
    <br><input type="submit" value="提交">
</form>

<script>
    $(function () {
        var $userForm = $("#userForm");
        $userForm.validate();//使用.rules()首先要校验它爸爸
        $("#name").rules( "add", {
            required: true
        });

    })
</script>

这里写图片描述

使用.rules()方法一定要注意：使用该方法前控件的父form要被验证，即$("form").validate()首先被调用。否则你将会收到下面的错误：

这里写图片描述

2、移除控件校验规则：

移除字段全部检验规则：

$("#myinput").rules("remove");

移除字段某些校验规则：

$("#myinput").rules("remove", "min max");
3、试用自定义选择器

<form action="#" id="userForm" method="post">
    用户名：<input type="text" name="name" id="name" autocomplete="off" required value="wangxiaoan1234">
    邮箱：<input type="text" name="name" id="email" autocomplete="off" required >
    <br><input type="submit" value="提交">
</form>

<script>
    $(function () {
        $("input:blank").css("background-color", "#bbbbff");
        $("input:filled").css("background-color", "#fff");
    })
</script>

这里写图片描述

4、jQuery.validator.format()
$(function () {
    var template = jQuery.validator.format("{0} is not a valid value");
    console.log(template("abc"));

    console.log($.validator.format("请输入{0}-{1}之间的数字", 3, 5))
})

这里写图片描述

5、覆盖验证规则
$.validator.methods.email = function( value, element ) {
  return this.optional( element ) || /[a-z]+@[a-z]+\.[a-z]+/.test( value );
}
6、重置表单
<form action="#" id="userForm" method="post">
    用户名：<input type="text" name="name" id="name" autocomplete="off" required value="wangxiaoan1234">
    <br><button id="reset">重置表单</button>
    <br><input type="submit" value="提交">
</form>

<script>
    $(function () {
        var validator = $("#userForm").validate();
        $("#reset").click(function () {
            validator.resetForm();
        })
    })
</script>

这里写图片描述

7、用到了再来添加
wxainn
关注
  • 8
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
jquery validate使用
zhang06105586的博客
11-21 724
关于jquery的使用最近有点心得，记录在这 1、jquery validate的使用方式具体可以使用三种方式： ①、通过class定义，使用class定义必须引入jquery.metadata.js ②、通过().validate(rules:)的方式直接定义③、通过().validate({rules:{}})的方式直接定义 ③、通过().validate(rules:)的方式直接定义③、通...
jQuery Validate表单验证的使用
weixin_45819980的博客
11-02 262
结构 <div class="zlnr zl-btm"> <label> <span>*</span>证件号码</label> <input type="text" value="" id="u_identity_card" name="profile[id_card_num]" class="fn-tinput" placeholder="请填写证件证号码" required data-rule-idca
jquery validate 插件动态添加删除验证规则
oneniceman的博客
11-17 3697
使用jquery validate 表单验证插件的时候，需要做一个动态的添加删除验证规则： 动态添加：$("#id”).rules('add',规则);  如： $("#analysis_content").rules("add",{required:true,messages:{required: "编辑不能为空"}}); 动态删除：$("#id”).rules('r
JQuery Validate学习笔记
Varus学习笔记
11-12 889
导入JQuery validate的插件包，  http://jqueryvalidation.org。
jquery validate的rules方法使用注意
aben_sky的专栏
11-21 2696
使用jq validate校验form时, 我们经常要用到切换一个input的rule功能, 比如: 此时我们就可以使用组件提供的rules方法: rules(...
jQuery插件Validation学习（二）——rules的使用
小小黑
01-30 9208
rules可以获取用户已经设置好的校验规则，也可以动态增加新的校验规则和删除校验规则： 1.获取校验规则的方法如下： 控制台中输入： $("#username").rules() 2.添加新的校验规则： 控制台中输入： $("#username").rules("add",{minlength:2,maxlength:10}); 输出结果： 3.删
jQuery Validate详解
fendo
07-05 1万+
一、常见的表单验证插件 在项目开发过程中,我们需要对前台输入的一些数据进行校验,以到我我们要求的格式,这就难免要写很多正则表单式来进行判断,这是一件很费时的时,所有就出现了了一些表单验证框架,以下几种,是常见的: 1、jQuery Validate: 一款历史悠久的Jquery插件 2、jQuery Form Validator:  也是一款强大的验证
jQuery.Validate 使用笔记(jQuery Validation范例 )
10-29
学习jQuery Validation，于是手写一公共范例，并收藏以便后用,里面附有测试代码，需要的朋友一起来测试。
jQuery基础自学笔记（pink老师jQuery全内容）
04-12
《jQuery基础自学笔记》 jQuery 是一款非常流行的 JavaScript 库，由 John Resig 在2006年创建，它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery 的设计理念是“Write Less, Do ...
jQuery笔记
01-05
jQuery笔记，详细记录表单的验证。使用的是validate验证规则。
JQuery笔记(表单验证)
02-19
下面将详细介绍`jQuery Validate`插件的使用方法、常见规则以及如何自定义验证规则。 首先，要使用`jQuery Validate`插件，你需要在HTML文档中引入`jQuery`库和`jQuery Validate`插件的JS文件。例如： ```html ...
jQuery-Validate验证插件的使用步骤详解
热门推荐
武哥聊编程
05-25 8万+
我们知道，用户在注册的时候，会有个表单页面，然后有些选项是必填的，有些要填的内容是有规范的，这些都要在用户提交之前进行验证才行，如果不符合要求，需要在右边显示一个友好的提示，让用户修改。 　　记得以前在学习Servlet的时候，实现一个简单的用户注册功能的验证是在后台做的，有些用了正则表达式，有些没用，但是都比较简单。流程是这样的，前台提交表单数据后，servlet获取数据
jQueryValidate-(规则表单验证插件的使用)
m0_63300795的博客
04-23 2336
一，使用步骤 思维导图 1 将下载好的form表单插件复制到项目js文件夹里 2 引入到html页面中 要注意的点 ： 1 要引入的插件一定务必正确不能错 2 如果要引入jQuery文件库的话 jQuery文件库一定要比插件要先引入 插件是基于jQuery库的 3jQueryValidate规则图 二，如何用插件来验证form表单 1 将插件与jQuery文件库引入到html页面中 一定要注意顺序问题 插件基于jQuery文件库 所有jQuery文件...
jquery插件-表单验证插件-rules
afei2530的博客
03-13 312
ruels方法 1说明：查看、新增、移除一个表单控件的验证规则 2使用： 　　表单控件.rules(); 　　参数： 　　　　rules() 　　　　　　返回元素的验证规则 　　　　rules('add',rules) 　　　　　　增加验证规则 　　　　rules('remove',rules) 　　　　　　删除验证规则 valid()方法 1、介绍 　　检查表...
「jQuery系列」jQuery 校验表单（Validate）
最新发布
日常笔记/总结/系列知识梳理
03-14 2069
jQuery Validate的一些常见使用场景： 网站前端表单验证：无论是用户注册、登录、提交订单还是其他类型的表单输入，使用jQuery Validate可以确保用户输入的数据符合预设的规则，如邮箱格式、密码强度、必填项等。这有助于防止因用户输入错误而导致的数据错误或系统异常。 动态校验场景：在前端设计中，实时、动态的信息校验提醒能够提供良好的用户体验。jQuery Validate提供了强大的动态校验功能，能够实时检查用户的输入，并在不满足规则时即时给出提示，帮助用户快速修正错误。
jQuery Validate表单验证框架详解
zgphacker2010的专栏
09-02 3122
jQuery表单验证框架总结 jQuery Validate验证框架详解 jQuery校验官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation 一、导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6...
jQuery Validate验证框架详解
考拉很OK
12-21 2008
</td>中，如果是radio显示在<td>
jQuery Validate 表单验证插件
xiangxiao_bobo的专栏
08-18 2169
一、jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。 该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，.
jQuery validate插件完全指南
"jQuery validate使用攻略，包括基本用法、API说明、自定义验证和错误消息显示方式等内容。" jQuery Validate 是一个广泛使用的JavaScript库，它为表单验证提供了强大而灵活的功能。该插件能够帮助开发者轻松实现对...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值