没有编程基础的的我,即使看了一遍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是回车
定义全局变量在控制台才可以调用