没有编程基础的的我,即使看了一遍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是回车

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

转载于:https://www.cnblogs.com/wufangfang/p/6184099.html

validate插件深入学习-01 小白从看透一个插件开始相关推荐

  1. 爬去图片插件_学不会你打我,一个插件爬取亚马逊数据!

    这是一个简单的插件使用教程.从入门到精通大概需要5分钟. 很多亚马逊运营小伙伴在运营过程中需要对市场进行分析,包含但不限于: 竞争对手review,分析消费者痛点,分析好评差评点. QA,分析消费者心 ...

  2. VS2010插件编写学习总结

    VS2010 Addins 外接程序(插件)开发 http://www.cnblogs.com/Leo_wl/archive/2013/03/21/2973886.html 简单做了一个添加文件头注视 ...

  3. 【从零学习OpenCV 4】Image Watch插件的使用

    本文首发于"小白学视觉"微信公众号,欢迎关注公众号 本文作者为小白,版权归人民邮电出版社所有,禁止转载,侵权必究! 经过几个月的努力,小白终于完成了市面上第一本OpenCV 4入门 ...

  4. 计算机编码二进制0001,二进制学习01(二进制,进制运算,数据宽度,无符号位有符号位编码规则)...

    二进制学习01 进制 一.二进制简介 1)什么是二进制? 2)二进制的简写形式 二.进制运算 1)八进制运算表 (1) 加法运算表 (2)乘法运算表 (3)八进制简单运算题 三.数据宽度 1)什么是数 ...

  5. 插件架构学习体会(一) -- 宿主程序说:插件你得听我的

    看了一段时间的#develop,首先接触到的就是程序的插件架构.园子里也有许多不错的资料可以学习.随时把自己的认识写下来和大家交流,无疑会有很大帮助.闲话就不说了,进入正题.      说到插件架构, ...

  6. 跟着小甲鱼学python怎么样_跟着小甲鱼的python视频学习,小白能够接受吗?

    查看: 3709|回复: 14 跟着小甲鱼的python视频学习,小白能够接受吗? 电梯直达 发表于 2018-4-29 16:57:27 | 只看该作者 |倒序浏览 |阅读模式 马上注册,结交更多好 ...

  7. 菜鸟学习----前端vue.js学习01

    菜鸟学习----前端vue.js学习01 项目使用vue.js脚手架,构建项目 1.vue.js构建登录框 登录框架构使用element ui Tabs 标签页,构建基础样式.用户登录,二维码查询,编 ...

  8. webservice学习01:wsdl文档结构

    webservice学习01:wsdl文档结构 wsdl文档结构 WSDL文档示例 <wsdl:definitions xmlns:xsd="http://www.w3.org/200 ...

  9. jenkins中文插件_Jenkins学习笔记(一)

    一.Jenkins基础jenkins是一款非常优秀的CI工具.但是我们如何去安装jenkins?这里我们学习一下.首先是下载,您可以下载您需要的环境的版本.因为jenkins是java编写的,所以我们 ...

最新文章

  1. python系统-python系统介绍
  2. 温州人集体大溃败,值得所有中国人警示!
  3. Dubbo系统间通信
  4. 侦听127.0.01_Spring 4.2中由注释驱动的事件侦听器
  5. mysql 字符转数值_深入MYSQL字符数字转换的详解
  6. Specification for springger thesis Writing
  7. 最新一二线城市知名 IT 互联网公司名单出炉!
  8. Oracle 宣布 Java EE 8 推迟到2017年年底发布
  9. 同比和环比真正的区别
  10. java axis2 jar包下载_axis2所有jar包
  11. 输入身高体重测身材_身高体重测试(女人标准体重计算器)
  12. Keil uVision5 创建STM32F4
  13. 户外佩戴哪款耳机好、户外运动耳机推荐
  14. Maven --- 简介
  15. Proteus 8 Professional安装教程
  16. Gay another
  17. SPSS 共同方法偏差(图文+数据集)【SPSS 040期】
  18. Keystone简介
  19. 大数据处理和编程实践Hadoop
  20. 程序员与黑客的区别?

热门文章

  1. GPSInfoProvider定位
  2. SpiderData 2019年2月12日 DApp数据排行榜
  3. python3 练习3
  4. C#中的Params、ref、out的区别
  5. 猴子请来的逗比项目流水总结
  6. 作为HTC在MWC2012移动世界大会上推出的全新系列产品。
  7. 远控软件VNC***案例研究
  8. Android技术点增长 - 收藏集 - 掘金
  9. visudo使用-怎样将mount权限给普通用户
  10. Python 面向对象 基础