JQuery验证插件validation的使用-阿里云开发者社区

开发者社区> lidoooudou> 正文

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>



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
动手实操快速搭建LAMP环境学习笔记
动手实操快速搭建LAMP环境学习笔记
10 0
无影云畅享
“无影是阿里云打造的云端一体、安全高效的一站式云上办公空间。无影的云桌面、云应用、应用中心、安全浏览器等一系列的云办公能力,通过流化的技术,提供给终端用户,在算力、安全、成本、敏捷、开放等方面,无影具有超越传统PC的优势。”
14 0
动手实操ECS云服务器新手上路笔记
动手实操ECS云服务器新手上路笔记
13 0
ECS使用体验
使用ESC服务器搭建过比赛使用的web应用、在上面做过深度学习的实验
8 0
快速搭建LAMP环境
CentOS 7.7的ECS实例(云服务器)。通过本教程的操作,您可以基于ECS实例快速搭建一套LAMP环境。
34 0
飞天加速计划·高校学生在家实践
我用阿里云服务器的一些心得
18 0
+关注
lidoooudou
桃花影落飞神剑 碧海潮生按玉箫
12
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载