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主文件
<script type="text/javascript" src="jq/jquery-3.1.1.js"></script>
<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是回车
定义全局变量在控制台才可以调用
validate插件深入学习-01 小白从看透一个插件开始的更多相关文章
- 简述 Mybatis 的插件运行原理,以及如何编写一个插件?
Mybatis 仅可以编写针对 ParameterHandler.ResultSetHandler. StatementHandler.Executor 这 4 种接口的插件,Mybatis 使用 J ...
- 简述 Mybatis 的插件运行原理,以及如何编写一个插件。
Mybatis 仅可以编写针对 ParameterHandler.ResultSetHandler. StatementHandler.Executor 这 4 种接口的插件,Mybatis 使用 J ...
- Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
- discuz论坛插件设计学习培训视频全套教程
discuz模板跟插件开发的教程比较少,特搜集给大家学习插件做的好,在dsicuz应用中心出 售也是可以卖不少的呢 教程目录:第1章 本章的标题第1节Discuz! X 产品安装与配置第2节模板风格 ...
- Java虚拟机JVM学习01 流程概述
Java虚拟机JVM学习01 流程概述 Java虚拟机与程序的生命周期 一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这 ...
- Android Testing学习01 介绍 测试测什么 测试的类型
Android Testing学习01 介绍 测试测什么 测试的类型 Android 测试 测什么 1.Activity的生命周期事件 应该测试Activity的生命周期事件处理. 如果你的Activ ...
- IM通信协议逆向分析、Wireshark自定义数据包格式解析插件编程学习
相关学习资料 http://hi.baidu.com/hucyuansheng/item/bf2bfddefd1ee70ad68ed04d http://en.wikipedia.org/wiki/I ...
- JQuery插件的学习
此前一直想就关于Jquery插件的开发,做一个深入的学习,由于各种原因,当然主要是自己太懒了...今天就系统分析一下Jquery插件的开发(参考了http://www.xprogrammer.com/ ...
- Java学习01
Java学习01 第一章 1.JRE与JDK JDK(JAVA Develop Kit,JAVA开发工具包)提供了Java的开发环境和运行环境,主要用于开发JAVA程序,面向Java程序的开发者; J ...
随机推荐
- ios移动端部分手机不支持background-attachment: fixed 的解决办法
ios系统和某些移动端background-attachment:fixed不兼容性,没有任何效果,但可以hack一下就可以了,代码如下: ps:想在哪个标签加背景,可以在它class后:before ...
- 2-MySQL数据库编码uft-8
mysql> show variables like 'character%'; mysql> show variables like 'collation%'; mysql> st ...
- Windows Phone 十三、吐司通知
弹出通知对话框 <Grid> <Button Content="弹出通知" Click="Button_Click"/> </Gr ...
- phpstorm git no changes detected
没有检测到的原因是符号链接了另一个 git 导致有两个git,这个时候应该排除掉其中一个.
- 使用百度地图api接口获取公交地图路线和车站
需要在页面文件中引用百度的js @*<script type="text/javascript" src="http://api.map.baidu.com/api ...
- ios异常错误
1,mach_msg_trap处异常 http://www.jianshu.com/p/2b3f58c61d7d 在lldb下敲入bt (lldb) bt
- app开发方式大汇总
1.原生方式.android平台使用java方式.IOS平台使用object-c或者swift方式.优点:可以将app的性能做到极致.缺点:开发效率低.维护成本高. 2.纯前端方式.比如用jquery ...
- Motor XT615 开机无限卡屏重启的取证与分析
hello,大家好! 今天我给大家你们带来摩托罗拉 XT615 开机无限卡屏重启的取证与分析, 手机开机后卡屏,一直停留下面这画面,无限重启! 接下来,经过我们工程师的分析,图上报错必定由于机身程序太 ...
- JVM基础知识
JVM简介 JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的.J ...
- 用python在linux下获取网卡地址
使用一个第三方库,名为psutil 代码如下: #!/usr/bin/python # -*- coding:utf-8 -*- import psutil def get_netcard(): ne ...