zoukankan      html  css  js  c++  java
  • validate插件深入学习-01 小白从看透一个插件开始

    没有编程基础的的我,即使看了一遍jq文档也不知道怎么写程序,一个新的插件看了也不知道怎么用。

    总是想做自己会的,自己不会的永远不去触碰,就永远不会。

    都说编程这东西,很多都有很像的地方了,一个语言学通了,其他的看看就会了。

    那么先从最简单的学起,建立信心,成就感,一步一步得让自己成为程序员~~

    先要有目标才有动力,熟练使用validate插件,想到要用这个插件写程序不犯怵。

    我不是一个优秀的程序员,我也不是一个有天赋的程序员,但起码我要是一个知道努力的程序员。

    好了,开始!

    开发过程中如何选取插件?

    比如我想实现一套表单验证,风格统一,开发方便的,后续维护方便。

    自己写?nono,第一步应该是先看看有没有现成的插件。

    怎么选择插件呢?作者是不是大牛,是否还在更新,社区活跃度,插件支持是否全面等等,

    其目的都是为了保证后续的更新维护,出现了问题容易找到解决办法,等等。。

    validation插件是jquery最常用的插件之一,从2006年出版一直到现在,支持常用的百分之90的验证并支持自定义验证,这么全面我为啥不用呢?每次写验证都要头疼死了

    http://plugins.jquery.com/validation/项目下载地址

    validation插件的常用配置

    一般一个插件想使用它都要给他进行配置,这个插件的常用语法规则如下:

    ①这个用validate()核心方法进行配置,里面用大括号"{}"包裹配置数据,每个配置项:加"{}"填写具体配置,以逗号","分割。

    ②name的值带"-"要用引号括起来,比如"confirm-password"

    在这里区别两个概念 验证方法和验证规则。

    method 验证方法,校验逻辑 

    1 username:{
    2        required:true,//每一项叫method
    3         minlength:2,
    4              maxlength:16
    5           },

    rule 验证规则 元素和验证方法的关联  username元素和验证方法关联在一起,叫验证规则。

    那么开始实际操作一下吧

    ①body最后要引入这两个文件,一个jquery库,一个validate主文件

    1 <script type="text/javascript" src="jq/jquery-3.1.1.js"></script>
    2 <script type="text/javascript" src="jq/jquery.validate.js"></script>

    ②html主要结构

    <form id="demoform">
            <fieldset>
                <legend>用户登录</legend>
                <div class="input-group">
                    <label class="control-label" for="username">用户名</label>
                    <input id="username" name="username" type="text"></input>
                </div>
                <div class="input-group">
                    <label class="control-label" for="password">密码</label>
                    <input id="password" name="password" type="password"></input>
                </div>
                <div class="input-group">
                    <label class="control-label" for="confirm-password">确认密码</label>
                    <input id="confirm-password" name="confirm-password" type="password"></input>
                </div>
                <div class="input-group">
                    <label class="control-label" for="number">0-100</label>
                    <input id="number" name="number" type="text"></input>
                </div>
                <div class="input-group">
                    <label class="control-label" for="email">邮箱</label>
                    <input id="email" name="email" type="text"></input>
                </div>
                <div class="input-group">
                    <label class="control-label" for="telephone">手机号</label>
                    <input id="telephone" name="telephone" type="text"></input>
                </div>
                <div class="input-group">
                    <label class="control-label" for="url">url</label>
                    <input id="url" name="url" type="number"></input>
                </div>                        
                <div class="input-group">
                    <label class="control-label" for="date">出生日期</label>
                    <input id="date" name="date" type="text"></input>
                </div>
                <input type="submit" value="登录"></input>
            </fieldset>
        </form>

    ③jq代码 一定要放在引入的jq库和validate库后

    rules是规则,messages是响应的规则不符合时候的提示

        <script type="text/javascript">
            var b=10;
            $(document).ready(function(){
                var a=10;
                var validate=$('#demoform').validate({
                    //debug:true,
                    //验证规则    
                    rules:{                
                        username:{//name值
                            required:true,
                            minlength:2, 
                            maxlength:16,
                            //get请求
                            //remote:"remote.json" 
                            //post请求
                            /*remote:{
                                url:'remote.jiso',
                                type:'post',
                                data:{
                                    loginTime:function(){
                                        return +new Date;//取一个gettime,返回一个long型的毫秒数的时间,+把一个字符转成一个数字                                    
                                    }
                                }
    
                            }*/
                        },
                        password:{
                            required:true,
                            rangelength:[8,16]
                        },
                        //"带-要用引号括起来"
                        "confirm-password":{
                            equalTo:"#password"//选择器,此处是id选择器,判断与该选择器元素的值是否相同
                        },
                        number:{
                            max:100,
                            min:0,
                            //range:[0,100] 也是0-100可以有小数
                            //number:true,//数字
                            digits:true//整数
                        },
                        email:{
                            required:true,
                            email:true
                        },                    
                        url:{
                            url:true,
                        },
                        telephone:{
                            required:true,
                            number:true,
                            rangelength:[11,11]
                        },
                        date:{
                            date:true,//用new date()来转换,转换成功就是对的
                            dateISO:true //2012-11-12 或是/
                        }
                        
    
                    },
                    //错误提示
                    messages:{
                        username:{
                            required:"必须填写用户名",
                            minlength:"用户名最少为两位",
                            maxlength:"用户名最多为十位"
                        },
                        password:{
                            required:"必须填写密码",
                            rangelength:"密码最少为八位,最多为十六位"
                        },
                        "confirm-password":{
                            equalTo:"两次输入密码不一致"
                        },
                        number:{
                            max:"最大值100",
                            min:"最小值0",
                            //number:"请输入数字",
                            digits:"请输入整数"
                        },
                        email:{
                            required:"必须填写邮箱",
                            email:"请正确填写邮箱地址"
                        },                    
                        url:{
                            url:"请填写以http开头的正确url地址",
                        },
                        telephone:{
                            required:"必须填写手机号",
                            number:"请输入数字",
                            rangelength:"手机号为11位数字"
                        },
                        date:{
                            dateISO:"2012-11-12 或是/分隔" 
                        }
                    }
    
                })
            })
        </script>

    常识我竟然不知道

     调试 shift+enter是回车

     定义全局变量在控制台才可以调用

  • 相关阅读:
    k3 cloud套打模板中出现单元格数据为空的情况,及无法正确的选择数据源
    k3 cloud中列表字段汇总类型中设置了汇总以后没有显示出汇总值
    k3 cloud查看附件提示授予目录NetWorkService读写权限
    k3 cloud中提示总账期末结账提示过滤条件太长,请修改此过滤条件
    金蝶云k3 cloud采购入库单校验日期不通过
    C# Code First 配置(二)
    C# Azure 远程调试
    C# ABP源码详解 之 BackgroundJob,后台工作(一)
    C# 在webapi项目中配置Swagger(最新版2017)
    高并发之
  • 原文地址:https://www.cnblogs.com/wufangfang/p/6184099.html
Copyright © 2011-2022 走看看