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是回车
定义全局变量在控制台才可以调用
