JQuery验证插件validation的使用

简介: 下载:        下载validatation插件地址:jqueryvalidation.org/;这里需要注意的是validation验证插件有依赖于JQuery的,所以连同JQuery也要一起放置到项目中。

下载:

       下载validatation插件地址:jqueryvalidation.org/;这里需要注意的是validation验证插件有依赖于JQuery的,所以连同JQuery也要一起放置到项目中。

使用:

简单配置:

 使用的时候很简单,首先如果我们使用环境为中文,可以自定义中文提示信息(也可以另存为文件):如下代码:


/**
 * Created by Administrator on 2017/6/14.
 */
(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } 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} 的数值")
    });

}));

入门使用:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>validate</title>
</head>
<body>
<form id="formID" action="">
    <legend>用户注册</legend>
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username">
   <p>
       <label for="password">密码:</label>
       <input type="password" name="password" id="password">
   </p>
   <p>
       <input type="submit" value="注册">
   </p>
</form>
</body>
<script src="jquery.js" type="application/javascript"></script>
<script src="validate.js" type="application/javascript"></script>
<script src="validate_cn.js" type="application/javascript"></script>
<script>
    $(function () {
        $('#formID').validate({
            debug:true,
            rules:{
                username:{
                    required:true,
                    minlength:2,
                    maxlength:10
                },
                password:{
                    required:true,
                    minlength:2,
                    maxlength:12
                }
            }
        })
    })
</script>
</html>


显示效果:
43453bf8ec45143dbfcf63482693685108e6ac3d

自定义校验规则:

自定义校验规则我们使用 需要使用 $.validator.addMethod 完成。简单实例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>validate</title>
</head>
<body>
<form id="formID" action="">
    <legend>用户注册</legend>
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username">
   <p>
       <label for="password">密码:</label>
       <input type="password" name="password" id="password">
   </p>
   <p>
       <input type="submit" value="注册">
   </p>
</form>
</body>
<script src="jquery.js" type="application/javascript"></script>
<script src="validate.js" type="application/javascript"></script>
<script src="validate_cn.js" type="application/javascript"></script>
<script>
    $(function () {
        $('#formID').validate({
            debug:true,
            rules:{
                username:{
                    required:true,
                    phone:true

                },
                password:{
                    required:true,
                    minlength:2,
                    maxlength:12
                }
            }
        }),
            /*
            *自定义校验规则
            *phone  要验证规则名称
            * func  校验处理
            * value 获取输入的值
            * Element  当前的文本框
            *params 校验参数
            * */
        $.validator.addMethod('phone',function (value,element,params) {
            /*手机的正则匹配*/
            var phone =/^1[3578]\d{9}$/;
            return this.optional(element)||(phone.test(value));
        },'请填写正确的手机号码!')
    })
</script>
</html>


远程校验:

remote用法:
1、remote使用get请求访问服务器
访问服务器后返回校验结果:正常的时候返回true,检验不通过的时候返回错误提示信息
remote:url
2、remote使用post请求访问服务器
remote:{
url:请求地址
type:请求类型post/get
data:{
需要传递的参数
}
}

<script>
    $(function () {
        $('#formID').validate({
            debug:true,
            rules:{
                username:{
                    required:true,
                    /*远程的校验*/
                    /*remote:"check.php"*/
                    remote:{
                        url:"check.php",
                        type:"post",
                        data:{
                            xxx:xxx
                        }
                    }
                },
                password:{
                    required:true,
                    minlength:2,
                    maxlength:12
                }
            }
        }),

radiocheckboxselect的验证

.radiorequired表示必须选中一个
<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input  type="radio" id="gender_female" value="f" name="gender"/>

checkbox的required表示必须选中
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间
<input type="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" id="spam_mail" value="mail" name="spam[]" />

select的required表示选中的value不能为空
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
    <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>



目录
相关文章
|
3天前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
25 7
|
3天前
|
JavaScript 前端开发 API
漂亮的jQuery对话框插件Dialogify
这是一款jQuery对话框插件。该对话框插件使用dialog元素和 HTMLDialogElement API来制作对话框, 可以生成漂亮的对话框效果。
24 7
|
3天前
|
JavaScript
jQuery响应式垂直侧边栏插件rvnm
jQuery响应式垂直侧边栏插件rvnm
|
10天前
|
JavaScript
jQuery简单实用的圆形进度条插件
CirclesProgressbar是一款简单实用的jQuery圆形进度条插件。该插件可以自定义圆形进度条的大小,填充颜色,边框颜色和是否带动画效果等。该圆形进度条插件在使用上非常简单。
|
15天前
|
JavaScript
可自由配置的jQuery消息提示框插件toast
jquery.toast.js是一款可自由配置的jQuery消息提示框插件。该消息提示框可以自定义背景和前景色,提示框的位置,提示框的显示时间,提示框的动画效果等。
20 2
|
18天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
28 5
|
18天前
|
移动开发 JavaScript 前端开发
基于canvas的jQuery图片剪裁插件
imageResizer是一款基于canvas的jQuery图片剪裁插件。它使用简单,可以基于HTML5 canvas实现图片的平移和剪裁。
|
1天前
|
JavaScript
超炫酷UI效果的jQuery滑块插件
超炫酷UI效果的jQuery滑块插件
14 0
|
2天前
|
JavaScript
jQuery新闻类轮播图插件sliderBox
sliderBox.js是一款jQuery新闻类轮播图插件。该jQuery新闻类轮播图插件可以创建兼容ie8、带缩略图导航、以及多种过渡效果的轮播图。
8 0
|
4天前
|
JavaScript 前端开发
灵活的jQuery垂直手风琴插件
这是一款使用jQuery和css3 transitions制作垂直手风琴插件。
20 0