107-尚硅谷-尚品汇-vee-validate表单验证使用

好了，各位同学，咱还有一件事要做啥？表单验证。咱呢曾经呢，做过一个地，就是这里的登录和注册表单，所有的表单都没有验证。咱只是加了一些什么简单的判断。对不，还有点印象吗？我当时说过一句话，什么话我说表证最后。而表单验证呢，咱会用到一个什么呢？用到一个小插件叫VE valid。而这个插件呢，你可以去啊，你可以去get去看他的官网，你也可以去npi。当然咱这个网你应该知道去这个。Get呢，它有点直立。随缘。但是呢，老师呢，先把这个呢，先给你看一下，就是它叫V。这个东西呢，老师只有一个要求，什么要求。

了解即可，因为这里边儿的东西吧，你会发现吧。就是不是说看不懂，能看懂吃力不讨好。就是说你可能看到他的官网看了有一周。但是你会发现，回首。还是不贵。因为它里面的东西是超多的一个文件里面可能。又引其他十个文件，这个文件又引其他的十个。所以说老师呢，给你们看一下，当然你可以去get her去找去看，但老师不建议，因为真的是吃力不讨好。所老师的一个要求是什么？VE validate，你能看懂，能会用就行。这个能懂不？啊，咱们先搜一下。首先这个单词。那就是veate啥意思？啊，不叫蒙叫验证，我说让什么蒙叫验证。OK吧，再松一下。

叫VE。这个单词呢，老师说一下这个单词就是验证的意思。百度分。总你看一下啊。搞这个流量怎么不给力呢？是吧？走，做饭。搁这这呼一下走。这不一样吗？来出来是不是验证。OK吧，所以说呢，咱们可以先去看一下啊，你先看下走看着啊VE。那咱们先看一下子啊，它的下载量。每周各十百千万，十万二十将近26万，说多不多。说少他也挺多，就这这个20几万不少。这样咱们先看一个，那你用你得安装，但是要注意版本号。最新版本版本。300本。

三版本呢，就是咱们的很多带项目老师发现带了好多班的，这个讲三版本发现讲完三之后。就是你们都要哭了。超级难。所以说呢，几版本的相对而言呢，还算好一些。二点几。OK吗？所以说老师今天也是一样，咱用啥的。二点几。而且呢，它的这个文档你看一下子啊，你看啊。这有这么简简单单的几话？看这这老师这不好简单吗。这只是。冰山的。一角角。这，这好简单，没了。这不没了吗啊。你可以网络给力的情况下，你跳到哪。给他哈，你去看一下，诶进来。

假象你可以跳到给后面当中，你会发现它里边东西是挺多的，这有一说一挺多的。而且他们之间这些文件都是咋的，相互之间还咋有这联系的，虽然你会发现你看完之后跟没看没啥区别。所以说老师的一个要求就是啥，这玩意儿你看能看懂就行。最能动工。烧，诶，是不是进来了。这太慢。所以说老师要求是能看。能稍微会用就行。这OK不OK吧，好了。太赚了。自己办。走走。那所以说表单验证地有几个地儿俩登录和谁。注册那老说我把登录给你搞定了，注册你能不能给我搞定。

注册说搞定了，我问你这还搞不定。这用户名不就是这儿吗？这密码它不就是。这吗？不就是这对吧，啊，所以咱们把注册这块的表单验证给他。那当然，第一件事你得先干什么？安卓。好，那咱去安装一下。先把这没药先给他关了。加走CD。那要注意安装的时候，你装的是几版本。200的，那咱装下走。记住，艾特几。点有空格没有了，走按照去。OK。安装完之后，老师说你看它是不是一个插件。

你看吧。是不是引入插件，使用插件。对不？那当然老说，你说这玩意咱要捅在捅。命点GS，但老师还是那句话，这点GS里面东西现在有点早，现在。有点多了。表达验证，咱别在这里掺和了，行过。可不可以，可以吧，你可以专门咋的。在这你再来一个文件，专门是搞谁的表单，验证将来的入口文件意是不是相当于在入口文件里边写的。听得懂不懂吧，那咱叫啥，咱就叫did。因为这个名字它本身就是啥意思。也，咱就起个名叫Y0。一个logo走。所以说咱回到这儿，咱给人家起个名儿找找啊，就在这完你放别地也行啊，叫y date点谁。这样。第二，谁呀？这个。

当然将来你这个GS，你需要在哪。入口文件，好吧，这是写呀，这是谁VE杠。Y。May date。插件。表单啊。验证的区域。老师问你他是不是一个插件。你第二，你得眼神。E，为什么不一点路子啊？对不对吧，第二件事，你是不是得引一个差价。插件呢，咱引一下，咱就直接捞过来啊，就直接看。说得插件，你说给他捞过来。那你说你将来干啥？是不是使用这个插件，那就是Ve.use使用这个插件V。是。这能看懂吧。这你要看不懂可可可就坏了。这没问题吧，就相当于是不是引了个插件用了一下，那我说你说这个文件咋用。现在这个文件咱用了吗。

没有，你回到哪儿？入口文件是不是引一次就行了，咱就别把那些代码全往这里面怼了就能懂了，懂吧，所以咱这引一下引入谁是不是引入咱的校验插件啥校验。表单校验插件延。老师问你，咱需要对外暴露？不想，你只需要里面代码啥的。直行是不是就行I的杠。找一下叫啥plugins下的。啥玩意儿？叫Y的Vali.T点啥啊？当然点DS可以不写。对不？那咱们先运行几天看有没有错，刷新指定不会有错。没问题吧？那接下来你是不是得用的来在一点来啊，这老师给你们整理一个文档，咱们先先先说一下有几个玩意需要表达验证。

五个。五个。一二三四十五。对吧，在一点来看，老师都给你们准备好是这的。咱一会再说这。它这块呢是有什么，比如说你看这样，比如说你表单验证成功，底下是不是显示成功的信息，如果失败是不是显示失败的信息。你这些要不要变成表单验证，要表单验证的规则老师给你写好了，在这在。着想。在这儿。咱把它呢，我给你捞回来。走，那当然到时候你们老老老师这个笔记就行，这啥表达的啥。验证。这啊，走。老师呢，大概说一下，你看这啊，咱先把这一会先给你住了啊，咱先看这看这你看这第一个。We validate。是不是他？说白了，他挂了，我说是个啥？

你猜对象，对象是不是打点very，第2LOCAL size是不是这个方法，这个方法老师问你传了几个两，我给你传这是啥。中文，因为他默认的提示信息表现验证管理成功失败，它默认是展示，展示英文。所以咱需要要变成啥呢，中文的。而且你看这这玩意是不是有一个设置。看这是不是配置对象。配置对象当中有个叫message，他用到一个东西叫CH-CN.yc至少中文信息，比如说你将来提示成功与失败的信息用上用中文。那我说真有这个东西。没有没有怎么办。你一来引这。这个咱应该知道CH-C代表啥。中文的对不想一下，这是中文的。题是啥气息？这大概能够看懂。

可以啊，这块在证。让确认密码和密码相同的。规则。OK吧，那以及你看啊，需要交印哪些字段，老师是不是写了，你看咱总几个。五个。手机号今晚的字段是有手机号。验证法。密码确认密码还有个叫叫叫叫叫啥来着。叫叫叫协议，就是那个小钩子，这五是不是要验证。这大概能看懂吧。好了，那你说接下来咱要干啥什么要用。用怎么用，你看老师叠给你多好，就这用啊，你看。这老师给我找。走走快点，咱找找那个组件，哪个组件。什么老找那个注册，咱一个成功。

几乎所有的就就成功了。这先给它折上，咱先找先找，先找这个手机号。科长。是他吧，是吧，来，再去测糖。咱进行表单验证的时候，就不能再用这个音读的。咱用谁呢？用老师给你们准备好这音频的，但是这个音谱的你看绝对能看懂，老师给他拉回来说C。找到谁是找到这。咱把这个老师给你替换了，就一。这么看是不是很恶心啊？来。老师给它折上来，你看啊，现在的place hold是默认展示的那个站位符。微是不是进行数据刷向绑定的，跟绑绑绑定，但是你发现它多了一个啥。不是，看后面是不是多了一个name。这就代表着啥，代表着将来这个表单元素的哪个字段需要印的。

Name name啥是放输手机号？这种总共。比如说你手机号这玩意儿，他老是问你，他为什么要加这个字段。你将来是不得知道你验证的是哪一个，是不是得区分这这几个表达元素，我得知道我验证的是哪一个，这能懂不？二。完之后咱们再看，你看它底下多了一个啥。自定义成we，搞did就自定义指令。你看蕊块代表啥？必须，你必须得得打，是不是得得得校验，你看后面是啥。校验规则。老师，这个写的很简单啊，因为正常说手机号的正则。一开头的后面可能是三，可能是几，但老师写的是就是一，后面只要是数字是幂，但加起来一共是多少是一，这能不能看懂？对吧，但是咱得首先说这个正则写的对吗。不对啊，你可以去百度当中搜一下，咱以前说过正则这个东西没必要死记硬背，但手机上你也知道，比如说他现在这种情况是不可能出现幺二级。

幺三几幺几幺五几幺六几是几几有可能。但是咱至少能保证它是几位数字，11位，这样能能看到。而且你看他给他加了啥类。诶，看这是不是动态加个类名。啊，这是他那以及如果出现错误的提示信息，这里能是死的吗？我说你这能是死的吗？不是也是一样，你给他打替换，替换成咱这个。咱把它给它替换一下。你看它中间有一个地，你会发现这是活的。A，如果你error是错误。而且是俩是对应对象的first，你看他在验证哪个字段for，如果成功，那显示啥？成功的奇迹。如果失败。先失败的，这大概能不能看懂。可以，你给咱试一下啊，举个例子你看。

一。你看是不是已经告诉你救援信息了，手机号格式不对。为啥得多少位，11位。而且你看老师回首再说一下这个地，你看啊，你看这。回到哪，回到咱这个。在哪拉梯子这呢，你看这。咱当时是不是说了一件事啥事，你看老师把放字段我给它改成英文。不是就是改成这个做好。或者咱啥都不写。就举个例子，老师这个H校验的这个字段不行，你看啊。刷新下看着。看。它是不是显示英文。而且你看老师再扯。我把这儿也打开。也住了，你看啊。

这能懂不？这能懂？就是this value is not，什么value，我问你什么文。英文的就是咱要啥。中文的就这两个代码，大概能不能懂。能懂，而且你看放这老是不写，你看他默认是不是显示那个字段。叫格式无效，因为你这个字段你是不是也得变少。中文的，所以说老师在这需要写个啥。将来遇见这个字段给它变成。什么中文叫手机智能？大概能懂吧，哎，手机号。当然去了个。等会。诶逗号诶对吧，所以你看这回是不是就OK了，你看嘛，这。是手机格式不对幺？867572236。

不整。少一位是不都行。这能走高大概能不能懂能吧，但你说他搞定后面能搞定。后边验证码，验证码几位。六位，那咱得换来，你看咱找谁找到这个。注册就这你看啊。手机号再搞定搞谁？验证码，验证码问你都要换银铺的，是不是要换。是86。对，那你看老师把这个的来。把它放在哪呢？放在这，这是不是要替换，但是你要改啥。改数据老师把这给他折上啊，你在改谁？咱不说微不微感冒了，你这玩意还还手机号吗？说请你输入你的验证码。完了，你看这，这应该是谁？

证就是绑定数据扣的，你来证是哪个段？那建筑的规则是该自己写？能这么想？是不是六位数，那老师你六位数会不会自己写成。回答的很干脆，不会。Y-D代表啥？几个数字？2D代表六个，是不是一个，但是得要几个，就六个，你这么写行不行？花括号里面写就代表数量，代表出现了。次数。这。能不能啊，能吧，那一阵你得换成啥。他出现错误是不是得是扣子弹提示信息对吧，那当然子弹也得打。你也得换。那这块你得换成谁。空的。

是不是给他换成空的。对吧，COD，那咱咋的测试下走。一。23456。缺一个什么都行。这能弄不老吧？那再来，你说这俩完事一样。再不换呗，那咋咋的对吧，折成。这那咋的？拷贝一份。给他折上。找到这。把这个音不的是给他换了。咱一道来。那我问你这块应该是。请你输入你刀。密码我问你给哪个绑定，说出上保定pass是或者。就是password password password哪个字段。Password。OK，不，那我问你块是必须要校验的，我问你是不是还得写子。

那咱聊聊，你说这个密码大概是什么样的。它得有中英文，可能大写可能小写，还有数字一般是八到。二。能不能写这个？咋写？就假如说有。因为英文，英文可能是大写或者小写的，到20名会不会写。说他。流动。九。大一到。大Z，这玩意大概能看懂吗？小A到小Z多少A？八到。20、这两款。偶尔中间有杠。

PA swd password。那当然底下这。也得换啊。BA，对吧？单词没错吧，没有吧，就底下这提示信息，这你是不是也得换。照一下烫。这给它合上。那这的患者。成的那个。哎。Passw，那咱先测试一下对不对，看一下看写。2345678对不对。对不？苏老师，他没有中中中中没有那个。呃，字母啊。这能看懂不？你只要是零到九，只要是大A到大Z，只要是小A小C，只要有八个到20是不是就行，我全数字小。

这这个正和能看懂吗？是不是可以要你只要缺一个。说白扯。对不？但是接下来他的这个就有点担心了，为啥。他的密码必须跟他是咋的一样，这能懂不？咱还在哪？还得考虑一下。CTRLC找下一页。是不是找他？这是不是得替换？你看这块呢，你得你你得看这说请你请你输入确认你。确认密码。去。人密码。这是几一，这是几一，但是这个验证的规则让写了。验证的规则应该是什么？他说他。必须一样，这就不能这么写。

大型的这个行。叫is。适不适合password？相同。单词没错，T s wo。2B。这个。叫is password啥意思，就PASSWORD1。和pass等不等，是真还是假，这能懂不？大概能到。那当然你这块也得换成钱。一那底下底下这。手机在看。改成谁？改成这个是是这吧，是一。咱们测试一下，你看。先别格式化，格式化它更难看。老师把它给它折上，你看走。举个例子，老师这来个12345678没问题吧？12345678，你看。确认密码。

必须与密码相同是不同。你如果想。是不是？是不是OK？这大概能看懂吧，就说A这个判断它存在啥。是不是PASSWORD1跟谁？Password是不是相等？OK吧，但是最后一个是最难的。就这这个校验咋校验。说老师写正则，你写啥正则？我说你这你能搞定吗。就公与不公。你说选择。不是的。他这玩意吧，需要用到，需要用到啥，用到这个插件里边一个叫自定义规则。就是你自定义来一个教育规则。找一下就是谁就这。就这玩意儿。老师呢，给他拿过来了。这个叫叫做叫老师问你啥意思。

破展继承代表是不是在已有基础上是在新增的。这叫自定义教育规则。老师让把他的也给你拿过来，再找一下老师，这是这老师给你放在这，这就叫自定义教研规则。这叫自定义校验，哎，写错了，这叫自定义校验。规则。老师给他格式化一下。啥意思呢，你勾上了。那就是不显示，你没勾上它一直会显示。你必须要懂。但是定义了这个自印规则的名字呀，叫。OK吗？说老师我不叫瑞行不行，行，你叫啥叫同意我都行啊，不是同意。都可以，这叫，这叫自定义教育规则的名字。那你看再找一下，找一下谁找一下咱的这个按钮应该是哪。是这个库的，应该是完成注册的上涨。

是不是？这好像应该是谁呀。是不是就是他？咱得咋地，别错了。对准啊。摄像头是不是这你还得咋找一个。但是这块的校验规则跟顶都不一样。你需要用到这个自定义教育。那这块咱下这块老你还是。Holder不是的，它类型什么类型的。Model你绑定在底下。叫啥来忘了。Agree，你看咱当年是不是叫agree，直接写一下A，这是不是也是一样。校验的字段叫AG。Re。但是这里面的教练规则它变了。

变傻了。那个你叫那个自义的名叫啥来着，叫统一，你知道那些。统一。同诶同意为啥为处用这个自定义。那当然你这块也得改。叫a j re，那当然底下这等底下这你是不是也得换？在哪，在这？这也给了患者钱。好。是不是这个叫agree？对不AGR走你看一下。现在老师勾是没有提示，你只要不勾。这明显不对。我说你这块是不是都不认识啊。协议吧，应该显示不应该显示啥。不应该显示这英文吧，应该是应该是什么呀。

什么是必须的？协议是必须要勾选。对吧，至少说恶人你不应该斩杀。不是，应该是同一，同一是必须的，你问咱不如比的书不应该写啥？不应该写英文的，你说在哪里？就在这儿。对不，这块不应该叫check叫啥。叫agree，是跟点一样的AJ不是啥。就同一吧，还要读啊，不AG为啥协议？你看吧。那你看这。对不对。这能够好。说老师啊。那你说以后这玩意我要用咋用啊。就直接把老师鸡巴。搬过去了，老师还在说话，说老师，我今天晚上必须要看一下吧。

你相信老师，老师不会坑自己去。费力，不通。有一说一。OK吗？当然，在表达验证后面还会讲另外一个问题啊，记不记得饿了不意外那里的表达验证至少说你能看得懂，这玩意你要翻。有一说一，真看不懂。不是看不懂，你能看懂，但是你要花啥。花大量的时间，这个时间和产出它咋的。不成。这个东西大概能不能看懂。能看懂吧，但是老师问你一件事，啥事你看啊，你最终是不是这些都验证完毕，是才能注册。对不？那举个例子，11111111111。我现在我就点击能不能发请求能。一切不行。你必须这些表单都验证成功之后，你才能注册，你要举例子，现在老师就就就就你看咱找架子在哪注册的。

找一下在哪是这样，你看啊，老师给他折上。我先给他住了，你看啊，现在老师alert一个。一一就是我现在是用户是我注册了，你提示我咋的。无效，但我就不听，我就点能不能化解。能这能懂不？所以说你要保证啥。保证这123455个元素必须打。全部验证之后是不是才能发请求？所以得用到它的一个小方法，谁呢，就这玩。就这。我找一下就是这。行可以确定什么。可以确定你所有的表单都已经咋了。验证成功，你再去做什么？当然，这多了个啥。番茄膏。

大概的意思是，是不是所有的都验证成功了，你看老师给你打印一下，他最终反的是一个什么一。不直。你看我刚给你来一个sus，你自己看啊，你看举个例子，现在老师看啊，我来手机号。就他是不是手机号。是不是OK123。这来个不行，123，举个例子，123123没问题吧，123 123123。行，你看老师点。早出。哪怕有一个不符合。数据。比如说当他全部验证成功之后，你在哪里？就是如果size为真，你是不是在发情？曾经的代码你在哪？The law。这能懂不啊。当然在里边那些。多少是吧，看差，但是里边那些曾经写的那些假的东西，你就可以找了。

去掉啥是不是就这。什么手机号和什么相不相等，还有点印象。这是不是都是假的判断，这就可以把干掉。当然，这是需要啥格式化。比说如果验证之后。比如说如果所有的全部的。表单。验证成功，在打的在。向服务器发请求。向服务器发请求进行上。进度层。只要有一个。只要有一个表单没有打到成功。那会发现情况，不会发生这情况。OK吗？老师那我练的时候整很简练的时候，你把老师这直接打。

就直接带走。就直接带走，还是那句话，老师，我今天晚上必须要开下门的。哎呀，我不拦着你，但我话跟你说，费力不讨好。OK，不，但是你大概见到一块，知道大概在干什么吧。我问这是在干什么？中文这在干什么？是把每个字段。转向中国。能看懂吧，大概。啊，好的，这是它。