40.尚硅谷_jQuery_jQuery插件_jQueryValidate.avi原创

嗯，刚才呢，我们已经能够制定简单的一个插件啊，无非就是去扩展两个方面，要把它扩展它的方法。就是它本身的方法，你要把它扩展它啊，返回值的方法，就这么两个方面，懂不懂啊OK。是这么回事。要搞清楚这个点就行，好，下面呢，我们来给大家看一些几个常见的一个几块已有的一些插件啊，这里面有几个啊，一个叫ary validation。什么意思？Va。Wonder，你如果是一个行为下是合法的啊，如果把它动词用了，就检验你是否合法，这个做一个什么事啊，做一个表单验证。

大家知道GS最先出来就是做表单验证的嘛，是吧，而他做表的验证就做的比较好啊，而且比较方便啊，下面一个叫几块UI，这是一个非常大的一个几块的插件。啊。它非常全的一个结块的插件UI嘛，因为UI各个方面都有啊，OK，而且它里面包含了很多只插件，它其实是收集了很多一些常见的一些一些极块的插件组合在一起，最终形成了一个大的插件。是一套啊这样一个插件呢，大家看了觉得是干嘛的哟。就日期共建，大家去买票的时候，一个输入框一点是不是跑出来一个一个日期的一个一个选择器啊，有没有感觉你点那输入框框，它它不是让不让你输入，不是让你选择对不对啊，这种效果是经常见的啊，其实这一个并不是接块插件啊，其实这一个你看名字里知道接块插件一般都会以什么开头的这块开头，那为什么我我去讲它呢，是因为他这哥们这个库呢，确实做的很好，他其实是个原生的插件，就是基于原生GS的。

啊，那这拍里面有没有插件去做那个日期选择呢？也有，那我找了半天，感觉别的比这个要差一些，我感觉这个挺好，而且在跟他使用的时候看的人用的人也挺多啊，所以我就给大家去介绍它啊。那我们啊，这个已经跟大家说过了啊，这块插件是基于这块编写的什么扩展库啊，在这块的主站啊，主页上面就有这样一个链接。不知道现在能不能跑啊。啊先，我还是来访问几块吧。难受啊，感觉。

这个是吧。快点下他。嗯。啊，这个里面啊，你看进入的就是它的一个库的一个列表啊，你看。看到吗？这还是他官方维护的这插件呢，那还有一些官方没有维护的。但是我觉得大家选的时候尽量选择什么官方维护的懂不懂啊，你看关于UI方面的有542个啊，关于应该是跟查询相关的吧，这是跟什么表单相关的，这个呢？动画输入框，图片响应这是什么？这知道吗？滑动speed滑动啊，后面呢，我们这个会讲这什么。滚动啊，加起来怎么着，1000以上有吧，不止1000，这都900多了，这都1000多了，将近两，应该有2000对不对啊，就就看成2000吧，那我跟大家说几块的差价，差价何止2000啊，挺多的。

所以如果你一旦你的项目选择了你j query和核心库的话，那基本上你就会去找他的个种插件用到你项目里面去，让你的开发更轻松。人说老师，我就想自己写，那那你要成功了，那只能说明牛逼，但是你你你想达到这一点，你不容易啊，你何必糟践自己呢？啊，至少在目前这个阶段，你还没那个实力。啊，OK。好，这是关于它的插件的一个理解，这个大家应该能懂啊，好，下面我们来去分别去看一下它的插件啊，你可以看。

嗯，我们先看哪个，先看一下，先看一下这个吧，好吧，来。看一下这个先看简单这个好。这个他有个地址。啊，这个里面呢，它还有包括我他实际上做什么的叫表单验证的一个插件啊，有一个有一个网站在菜鸟教程，不知道大家有没有上过，有吗？你说老师我的不是菜鸟在网上有的受不了。嗯，大家有时候学一个什么新的东西，其实还是有用的，菜鸟教程啊，各种各的。都很简单，一看就懂。为什么叫菜人就学基本的。

啊挺多的，基本基本上咱需要的前端的相关的一些技术都有。不仅是前端啊，各种你看服务器端都有C语言都有啊，数据库的是吧？啊服务器端的都有C加加C语言都有，而且它里面的教程呢，比较简单啊，譬如说我们找一个找一个找一个什么找个GS。你看就是语语法输出啊，语句注释怎么写，变量怎么定义，数据类型有哪些对象怎么的函数，怎么的中域事件，这都是最常用的一些语法。其实基本上你学一遍下来，那也怎么说呢，你要真正把这个学明白了，我觉得咱们班估计有的同学并不是能达到真正学完的水平。有的同学就是自己动手能力太差了，真正很多东西没有完全的懂啊。还是多下一次花点功夫啊，这干嘛呢，这是。

就因为我买过一个球，我来以后我就买了一个NBA斯伯丁的球，他就整天给我推广，这个球是智能的，很正常。啊好，当然如果想去学它这个里面也有这个菜鸟教程里面也有关于关于他的，关于这个看下我们来看一下的那个script是吧。呃，有这块UI的是吧，没有别的吗？嗯，哦，对，学习S，它最后面就应该有它的插件。有吗？没有吗？难道我记错了吗？嗯，那可我我有也有可能记错了，但好我觉得以前是应该是有一个的，现在现在暂暂时我看到的只有一个几块UI是吧，这不是也是一个插件吗？是吧，看现在好像没有了，是不是更新了还是怎么的。

不用去管它啊，我们这我们跟着我们自己学就行啊，那个使用呢，主要是首先我们要去下载啊，下载大家可以去在那个在他的官网上面去搜呗，是吧？啊搜搜哪个呢。嗯，这是我下载下来的，大家可以去搜它是吧。好像没反应了，这不是错了，问题就是网速太慢了，按着不动。应该就是这个。能不懂啊，就它下载量很大是吧，能看的出来啊好，那这个呢，我已经下载下来了，下载以后呢，大家需要去解压，得到是这个是吧，得到这个以后呢，这个里面有什么，是不是有DEMO呀，是不是DEMO里面有个什么index。

这里面就有两个表单啊来。提交一啊，看看你说老师这这这这我看不懂啊，你说我们中国人我在写中文，你想写中文就写中文呗，等会可以写可以指定的对不对。而且吧，关键是看他，他说什么意思。啊，我写个别的吧，写写个他看到吗，特别牛逼啊，你自己要做到，要做到他这个效果，你得写很多代码。他是实时的去检查的。他在你改变过程，大家看现在好了吗？看到了吧，啊OK，我们平成可能就是什么，点一下按钮，如果有错误不乐一下是不是这种，这种验证是上个世纪的验证啊，现在的验证它都是通过文本提示的方式去验证的，对不对，不是alert了，你不要再alert了好不好，你说老师那学的时候就是个了学和真正去开发不太一样，对吧，你学的时候你不很菜吗？

啊，你的水平就上世纪的水平好一样，你看这个一写，它是不是有新的提示，说你什么不是一个合法的email例子。是不是写的也好了，很爽的啊啊，他这个只是要求自己写多少，他有要求吗？没有，而这个呢，我不写啊，什么意思。选可选的，也就是我可不可以不说可以啊，很厉害啊，下面这个也可以啊，下面这个很多其实是一个意思啊，效果是类似的对吧，而且你看他还他还能把这个把这个周围加上一些什么红色的框的背景是吧，这其实是搞的样式吧，这你要做是不是也可以做，可以做的啊。

好，这是就是它的这个验证的一个DEMO，好，下面我们写用用啊，我这样啊，我把它整个整个库啊，整个库文件都拷到我这里来，放进来再说啊，放过来啊，东西比较多，考一会。好一会以后呢，我不在他里面做啊，我来去创建一个文件夹。叫什么呢？看到吧，啊，这个test好，我取个特别的名字吧，还是取个取一个他的名字叫啊，把这个名字写上啊，写query vali下划线开始，这样能好一点啊，到时候我别的也有。

好，我在这里面，我准备了去写一个页面来，页面呢，这个是吧，啊，这是写个太吧。好看着啊，我们这里面我们准备也去做用就用它，要用它的话，大家想我们得怎么做，得倒一些库吧，那我要不要导结块，要不要要那首先我得把结块库是不是搞进来，那结块库那我怎么看呢？我得看，我就我也不用自己找，我就看他怎么写的，我也我也怎么搞呗，他肯定也要赢的。是不是，那我就去找到它的位置吧，它不有一个什么退格尼，有吗？尼泊尼尼。你不在这里面，在外面他不退格吗？是吧，这里好多个，我随便找了一个是不是都可以，他找的是这个是吧，主要找这个我也看不到是什么版本，那我就在这里面找他最新的版本好吧，就这个把它拷贝到我们当前的这个测试文件夹里面来，除了它还有吗？

还有这一个验证框架插件是吧，来带来这个D。有吗？是不是这个啊，我就不考这个命了啊，搞过来。接着我在我的页面进行什么，是不是引入引呗来引入rap了啊，先引谁解query，接着去引谁插件是吧，来。插件接着去写我们的代码是不是啊，OK，好，但是呢，我是不是好歹要写个什么，是不是要写个份表单呢？啊写一个，诶大写。好来啊，空表单里面我其实按出来，我不知道大家学过没有一个action知道吗？Action是你提交到时表单提交的目标地址，我随便写一个啊，没什么太多意义，好里面我假设有用户名可以吧，哪一个什么是音input的text。

啊，我这个地方啊，我在里面啊，这样啊。我在这个地方拿一个P标签把它包走，搞几个。好，这个有用户名，有什么密码，还搞一个确认密码就得了，好吧，不搞太多了，搞太多了花时间了，学一下得了就收时间啊，这个呢，密码应该用什么？Password，这个其实也是password，对不对，是吧，也是password，好，这里面一般的input都会有一个什么name，这个叫user name可以吧，那这一个我们也取个名字啊，也取个名字，这个叫password，譬如说叫pw de啊，W可以不啊，PW行吗？啊不有一个R，还有。

区别太大。能看下来好没问题，那下面这一个，下面这个我不用了，我用什么呢？Some这个用你就什么不需要了，那肯定不需要了嘛，这里面再来一个value value是不是显示出来叫什么注册。是吧，好了，来我们来看一下这一个结构，其实有点小丑啊，明白吧，好来我点击它啊，它就会提交对不对，我们真正的效果应该什么。

就是围点提交，他要去验证是吧，如果通过了才会提交，如果不通过了不提交能不能理解，而且还要提示，那我这里面就说一些要求。啊，所以要求这个是什么呢？必须，而且他是多少位呢？用户名假设是六位啊，最小六位好吧，至少啊最小吧六位啊最多没有限制，可不可以可以好我这个密码也是什么必须啊，那个位数呢是呃六到八位。那也就是说最大是八位啊，啊，这个确认密码有什么要求，它没有任何要求，它就是要跟密码相同是吧？啊与密码相同。

可以吧啊，我们就提这些简单要求得了啊好，那下面我该怎么写呢？你说我该怎么做，也就现在就涉及到我们怎么样去学别人的插件怎么用。他这不有例子吗？我得看这个例子怎么做了呀，对不对，能懂吧，好来看一下它这里面这不是一个表单吗？这又是个表单，是不是他一共两个表单，来这我们看上面这个表单。看这里面特别有意思啊，他怎么验证的，看一下我看一下这个音input的。它特别意思，他来了，写了一个属性叫什么report，我跟大家说啊，写属性不写属性值，属性值是多少处啊，你就说这么写相当于什么。能不懂啊好，那除了这个你看啊，这说明什么呀，说明这一个输入框必须输入下面一个什么东西，最小长度是几啊。

能懂不能懂啊，OK，那有人说，那你到底能写哪些要求啊，这个名字我能写什么我也不知道啊，我能看到有require，看到有命。那别的有没有别的要求呢？到底有哪些要求可以写呢？是不是这个怎么看呢。看一下那个要求肯定定义在哪个里面了，是定义在这个里面吗？肯定不是定义在哪个里面，肯定定在这个里面了。给它打开啊，稍微翻一下，你说这么多怎么翻，翻一下啊就能翻到OK诶。还没到吗？哎，这个里面所有的就是他提供了一些什么呢，从这里面能看到两个东西，一个是它的，这叫验证规则。

啊，就。比较严格的说法叫验证规则，这是一种规则吧，这是不是一种物质，里面是不是有各种各样不同的规则？好，这边什么单元。这东西见过吗？这个见过，This field is required，这是什么？默认的错误提示？默认的错误提示能懂我意思吗？那我把这些规则不管那么多，先货比过去你的照着写啊，你到时候你写的时候怎么写呢？你懒得去背啊，我从来不背。放在这里面再说好，那我们也提要求呢，是吧，他们提要求我就不能提要求啊，说什么要求什么repair还有什么。

这个最小六位，那我应该用哪个，大家看这里面有，诶还有什么这什么意思哦，范围长度的范围，我是不是可以指定最小和最大同时之力。啊，好了，来，我快接着写什么。我这个写什么呢？接着写什么面nice，我的L，大写小写。你看名字嘛，是不是小写北好下面这个呢，也是什么require，现在这个有两种写法，一种这么写面认识这面什么，还有面呢，它除了面还有面认识这面什么意思啊，最小值是多少？不能把比这个值小来面对时界六还了mark认识世界八，其实我应该也可以用什么。

啊，就这么写的吧，下面来一个，这个写起来比较麻烦，它是要求什么与密码相同，我的天，这有有有可以用的吗？诶，这里有一个一颗to有没有，有人可能说老师你怎么就一眼看见我就看不见，其实我就知道在这里，我只是大家找一找啊。我要太快了，你觉得也不可思议，我要稍微慢一点，我太慢了，你到时候又说我有问题，所以我稍微慢一点点啊啊一块to关键词，后面这个不太好写，后面我们就直接告诉他写什啊，后面要写的是我的这个值跟哪一个输入框的值进行比较，他要写一个选择器，写一个选择器来找到与我比较的那个input。

能不懂，那我应该怎么写呢？是吧，最好是给他搞一个ID，能够找的快一点，你说我不找ID能不能搞定，肯定能啊，你这么行，看到我不找ID，那肯定也能搞定啊，这么这么一写是吧，接着呢，搞个中号，搞一个内，等于PWD是吧，一但这样我还是觉得啊，就是如果能能够玩ID的，尽量把ID是吧。啊，这个我们就叫它，它是我的好吧，可以吧，啊可以，那我这里写什么呢？是这么写的吗？不对，井号他说的。好了吧，好了啊，这个好像有点有点小长是吧，来到了这一步够了没有呢，还不够啊，看这里他还要写一个东西，写一个什么东西，我们看到它的这个index，呃，它的这个里面呢，是跟我的写法，是不是也是在这个标签里面写的，要写的规那个要求啊，写的规则他要执行一条语句。

啊，执行一条语句，这有一条语句。你说这个找什么，谁去啊，我们来看一下他找的是谁啊，这个是不是一个ID选择器，你看他找谁去啊，走走走走。找谁是不是就找定义了，验证规则的这个缝表达了你说这句话什么意思啊。什么意思？对我的这个表单进行什么，是不是进行验证，也就是说你不加这句话验证开始了吗？没有，即使你定义了验证规则，你要不掉那句话验证规则是没有开启，验证没开启那也不行，怎么办？那我现在是不是要开启啊，开启怎么开呢？首先我得给我最好是给我的form加一个什么ID啊，写一个叫什么my form好了来怎么写呢？

多了婆括号加号井号是吧，点诶怎么办不出来date啊，对表单进行验证，对表单词表单啊。是不是开始验证能懂吧，开始验证好了，来现在看一下我们的效果是一个什么效果啊。走，你。哎，这个时候哪个位置哪不不好的地方吗？这个有两个不好的地方，首先这个颜色不对是吧，最好是人是什么红色，诶它是不是自动插入了这个文本啊，这里面有个class叫什么，还有你说我该怎么办？

卡我自己写呗，它不固定会生成点什么I，我写什么color，为什么。是不可以好人说，诶这个怎么没提示呢，他们俩相等啊，是不是啊，好啦，你看啊，现在还有一个什么问题，这一个是太近视样式问题，到时候是自己可以控制对不对，你可以调，关键的问题就是这个英文不好是吧，说白了我是不是要自定义验证的错误提示文本。

验证信息能不能自定义呢？肯定是能的，怎么自定义？看一下他怎么做的呗，他后面诶，他后面他是不是还有一个副文表单进行验证了，这个验证跟上一个有点不太一样，我们上一个是把验证规则写到了。是不是写在标签里面了，你看这个验证他把规则写在哪里面了。是不是写在JS代码里面了？是不是啊，OK，但同时他写一个东西叫什么messages，什么东西啊，提示信息，什么提示信息啊，错误提示信息，那也就是说我的这个问的方法可以传一个什么，是不是传一个对象，对象里面包含的所有的错误信息信息来写一写，怎么写呢。这个写个什么对象啊，接着写message，为什么是十啊，因为多个嘛，好了，那下面就要说了，诶我要说一个事。

我这一个输入框有问题，我怎么标识提示什么文本呢，这个对应关系的，其实他这么写的，我跟大家写一写，它是这一个对象不有属性名和属性值吗？属性名写的是我的这个输入框的name的值，记住了是name的值。记住啊，是内的值，接着如果我有多个啊，我有多个验证规则，那得这么写。下面写什么呢？写这个啊，我写完了大家就懂了，秒懂啊，这个说什么说用户名是必须的，对不对？好，假设我违反的是这个规则呢。就提示什么用户名最小最少，至少为什么为六位，那你说你小于六位呗。

Able，好，来继续往下看，下面还有什么是password password有几个？一共三个是吧？有require，还有main，好像还有一个是ma是吧？啊，这不是这样的吗？能不懂这个，只是这里不能写这个嘛，这写什么密码是吧，而这一个用户名不是是密码，这一个密码最多是吧，为最多是不八位啊。是不是可以好最后一个这一个P这一个这一个确认密码，是不是就一个要求，一个要求的时候可以写的简单一点，直接就行。

因为我就一个要求嘛啊，不要先写这个啊，不好意思写错了啊，先还是要去写这个。还是要去写name啊，还是要去写name啊，啊name写完大家看他这个写完，这个写完了以后，我的这里面是不是就是只有这一个，你看呃，Equals two，呃，Equals to，我的这一个，这一个我能不能就写，就写这个什么必须与什么密码相同啊，能不能只写这个，就是如果我像他开始那么写，我应该怎么写。我是不是这么写，接着写什么名字写什么啊，Equal two接着是不是写这个。

诶。嗯，天哪。再回，对一下啊，回不过去了，再来一遍equal to。是不是啊，按正常写法是不是这么写了啊，我先正常写啊，先先别把这么复杂，就按照这个要求写啊，来看着那写好以后啊，我们的提示能不能变呢。看一下啊，奇迹就要发生了。这一个password我的是应该写什么，是不是p we说明ID是写ID吗？不是，是写什么name接着这个是什么，这个写对了吧，这个写对了啊好来看一下轴理前面行弟们，而且关键是而且我再输入一个文本，这个变不变变。

看来说一遍看懂吗？啊，你要想做出自己做出这样效果还是很费劲的。哎，好了好了啊，你说老师我能不能自已写出来，写出那个库来，现在还不行，但是你现在可以至少应该做到我能用它，说白了，你要站在巨人的键盘上干活。啊，OK，你不能成为巨人，这是肯定的，OK，但是你必须要成为那个巨人身上的人啊，肩膀上的人，对吧？好，来下面一个类似的吧，啊，我就我就说我就梳一下，输一下，我记得123123个好下面。你看我放去它是不是就提示了啊，必须定了，相当我输一个123行吗？不行123好了，我再输个一。

挺厉害吧，好，现在大家看啊，我现在有错，我能提交过去吗？好，我现在搞得没错啊，提交吉利，你说这也行，这说明提交了吗？你没有看到吗？能不能懂啊，还是听不懂的，这个我跟大家说一下啊。跟大家说一个事，这种叫声明式验证，什么意思？就是你看完你真正去做验证了吗？你你这个你写那个验证的代码了吗？你没有真正的去做验证，你只是声明了一下，诶那么我需要验证什么，而我需要必须看require必须有对吧，我面认识必须是六，这是不是声明一下。

啊，这种叫声明式验证，那真正验证的是谁做插件，插件帮你做呀。Okay。只需要声明是不是各种验证规则啊，各种验证什么规则，是你需要什么规则，你声明一下，但是你还是得开启嘛，你要不开启那他也不知道啊。懂吗？啊，还有一个它有是不是有一些默认的文本提示。啊，你来干嘛可以啊，也可以啊，自定义。是不是那个错误信息啊，验验证失败信息吧，验证错误信息就这么个事。

这东西难用吗？不知道，起码还没体验过。啊，大家把这个呢，就做到我这个程度就可以了，别的呢就暂时先不管，其实它里面还有很多东西啊，它还可以制定验证规则什么的啊，大家暂时呢就先别管了，先至少我希望大家至少能用啊。能用再说好吧，嗯，要求不能一上来提的太高，我觉得。