00:01
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去完成添加品牌与修改品牌的表单验证的功能。那咱们呢,去看一下子已经完成的这个项目。那不管是对于添加还是修改,他们所使用的结构是一样的。而且呢,他们都带有什么呢?都是带有表单验证的功能的。那咱们呢,会发现啊,不管是品牌的名称还是品牌的logo,它前面都带个星。其实啊,这个星呢,就是由饿了么UI提供的,代表着这两个字段进行表单的验证。那比如说啊,现在老师呢,想添加一个品牌。我没有输入用户名,也没有选择品牌的logo,那你点击确定,你看一下子,它是不允许添加品牌的。那以及啊,那假如说老师呢。
01:00
新建一个品牌,比如说叫做华为666。那以及我要点击确定,它也是不能添加品牌的,因为你没有选择品牌的logo。那当然,当你选择了品牌相应的logo之后啊,你是可以添加品牌的。那也就是说,不管是对于添加还是修改,其实他们两者都用到了什么,是不是用到了表单验证的功能?对吧,那咱们接下来呢,就要去完成咱们表单验证的功能,而表单验证的功能啊,其实饿了么UI是给咱们已经提供了。那咱们呢,主要看的谁是表单的验证,那咱们找一下放。那咱们呢,去看一下它放。那首先说啊,咱们看一下他给举的这些例子啊,放表单。有典型表单,但是你看下前面有星星没有,对吧,咱们主要找到的是什么?找到的是验证类型的表单。
02:03
对吧,表单验证。在防止用户犯错的前提下,尽可能让用户更早的发现并纠正错误,那这里面明显四个大字,表单验证。那咱们呢,得看一下这里面的一些代码了,对吧,那咱们去看一下。那首先说啊,Form组件提供了表单验证的功能,那也就是说饿了么UI它本身就给提供了表单验证的功能。那么只需要通过ruler属性传入约定的验证规则。那ruler是什么?咱们可以看一下子。那对于EL form而言啊,它呢,给它添加了一个ruler属性。对,不直是啥,是ruler。而这个rules是什么?就是你的表单验证的规则。
03:01
对吧?啊,这块要注意,那么并讲form item的proper属性设置为需要校验的字段名即可。那所以说啊,咱们呢,把这句话呢,给他拿过来,这句话挺重要的。那找到咱们的组件。那这里啊,咱们呢,要进行表单验证的是哪部分区域,咱们看一下子是不是当你点击添加或者是修改弹出那个long对话框这里。对吧,那咱们呢,在这呢,老师呢,也做一下笔记,哎,在这。也就是说,Form组件提供了表单验证的功能。只需要通过rules属性传入约定的验证规则,并将放item的proper属性设置为需要校验的字段。这句话很重要,咱们一会儿会一一验证。那咱们呢,看一下子人家是怎么用的。那首先说啊,需要给咱们的form添加表单验证的规则,那你需要呢,给它加一个叫rule这样的一个属性。
04:06
那咱们呢,也给他加上。对吧,那咱们呢也叫rules,那这个是给谁加,是给phone加的。那这个是什么呢?就是相关的表单,表单验证的规则。对吧,Rulers的ruler,而且要注意表单验证规则的form。这个组件上必须得有models这个属性。对吧,哎,Model咱们前面也写了。那这块呢,咱们得看一下它相应的验证的规则在哪呢?在date这里。看贝塔这里。在date当中啊,它有一个显示属性叫rulers,它是一个什么呢?是一个对象。那咱们呢,也在咱们的对子当中啊,也去写一个呗。那这块呢,老师呢,做一下笔记,那这里是什么,是表单验证的规则。
05:03
叫rules。对吧,是个对象。那么验证规则呢?就是需要在rules里面进行书写。那咱们看一下,咱们主要验证的是谁,验证的是品牌的名称和品牌的logo,是不是两个验证规则就够了。那所以说啊,咱们把它已经写好了这两个,哎,咱们给它粘过来对吧,稍微改吧改。那这块呢,要注意一件事,第一个要注意的是什么,咱们验证的字段不叫内啊,咱们验证的字段应该叫什么,是不是叫TM内品牌的名称和logo URL。那所以说这里面呢,咱们需要改改,那这块改成叫做TM name。那这个是什么呢?这个要注意这个是品牌名称,哎,品牌名称的。验证规则。那以及底下这块应该啥是应该是品牌logo的验证规则,哎,品牌的logo的验证规则。
06:05
啊,那咱们来看一下这些规则。那首先说品牌名称的验证规则,首先说require代表什么,代表的是这个字段,必须啊,必须要输入东西。OK吗?OK吧,其实就跟前面那个星星有关。那以及还有一个是提示信息,叫做人家默认写的是不是,请输入活动名称。那这一块呢,咱们不应该是活动名称,应该啥是品牌名称。对吧?请输入品牌名称以及吹格是什么,吹格代表的是用户的行为,就在什么行为下进行触发,是用户本乐还是气质?因为他的这个行为啊,其实说白了就是事件有两个,一个是常用的,就是本,另外一个是change。OK吧?那以及还有一个验证规则,验证规则就是什么?就是你这个品牌的名称啊,比如说最小两个字符对吧,最多十个字符。
07:06
那相提示的信息啊,应该是长度啊,在二到十个字符。那以及事件呢,咱们可以选择什么,选择change啊change。对吧,哎,指它。那以及啊,那这块要注意咱们验证的谁是logo UI。对不对吧啊,以及要不要带星星,是不是必须要教练的字段以及提示的信息啊,那咱们选择一个吧,叫啥请选择啊,或者不应该叫请选择了。啊,活动区应该叫请选择图片啊,或者叫品牌的图片。啊,品牌的图片。对吧。那这块呢,要注意咱们并没有完成,现在呢,咱们只是做了一件事,给咱们的form组件添加了一个rules这样的一个规则。对不对,对吧?第二件事呢,你还要给每一个item的身上加上一个proper的属性,而proper的属性值即为你需要校验的字段。
08:09
那所以说回到咱们这里,你需要给咱们的item嘛,加一个proper的属性字段,验证哪个字段,那是不是就是TM内品牌的名称。那以及底下这里应该是sharp,验证的字段是什么?是不是应该是logo u?对吧,那咱们运行一下子看一下咱们的这个。看一下的,那你会发现前面是不是有星星啊,那其实那咱们的表单验证几乎差不多了。对吧,那咱们呢,可以一个一个去说道说道。那首先说第一个看这require等于true,那假如说老师呢,把它给它去掉,你看一下子有什么区别。对吧,哎,你看一下子有什么区别刷新,那咱们呢去看一下。
09:00
这个网速可能有点慢对吧,那你会发现啊,品牌名称前面少的星星,那其实这个星星代表的是什么呀,代表的是你这个字段必须要进行校验。因为块这个是需要需求嘛,对吧,那所以说咱们得做一下笔记,那么2EQ块跟什么有关系,是不是还是必须要校验的啊字段。而且呢,它和什么有关系,是不是和前面的那个,呃,应该像像什么呢?像星星五角星有关对吧?哎,五角星有关系。对吧,那当然咱们是需要。那以及message是什么呀,Message message呢,它呢是提示的信息。那以及trigger是什么呢?T rig trigger呢?它主要呢是什么呢?是用户行为的设置。啊,说白了就是什么事件的设置。
10:02
就是比如说他长的事件有两个,一个是本乐施交。另外一个长呢,就是气质,当文本发生变化的时候,会出发。那咱们呢,可以先看一下,举个例子。老师的刷新看一下。比如说现在老师聚焦失焦,你看它是不是会提示你请输入品牌名称。对,不做这个很容易去理解。那第二个是什么呢?第二个咱们也说一下命代表的是什么,命代表的是你品牌的名称啊,哎,品牌名称的长度。哎,长度。长度呢是二到十。对吧,那以及提示的信息是啊,长度在二到十个字符,以及什么时候触发,只要文本发生变化的时候就会触发,比如你来个一,你看它是不是当文本发生变化的时候就会给提示,对吧?二,那当然符合条件就没有提示,那如果不符合条件是不是还是会进行提示。
11:03
对吧,那所以说这块呢,也要去注意,那以及咱们的品牌logo啊,也带有验证规则,那以及块也是必须要校验的一个字段提示的信息呢,是请选择品牌的图片,但是你要注意啊,其实对于哎这块的这个这个用户的行为啊,其实这块要注意,它不是一个表单。它是一个upload这样的一个组件,你想想咱学过的表单元素哪学过这吧。对吧?所以说对于他而言,像change是没有任何意义的,因为他的文本也不可能发生变化。对吧,所以说呢,咱们这个用户行为啊,你就可以给他去掉。对吧,哎,这块呢,要注意一下子。那所以说啊,咱们的表单验证啊,几乎就完事了。但是你要注意啊,举个例子,现在老师来一个华为,我也选择了一张图片啊,假如说我没有选择图片。
12:03
对吧,那你点击确定的时候,其实它还是能添加。对不对,对吧,那你要注意为什么呢?那你这块呢,要注意一件事什么事,他们还得有一个操作什么操作,当所有的表单验证规则通过之后,你才能点击确定。对吧,那其实啊,它这里面呢,也有相应的代码,咱们可以看一下,就举个例子,它这块呢,不是有一个叫做立即创建码,那这是不是叫做s need from提交表单,它是有这个函数的,那咱们看一下。那他这里在进行干什么?在进行所有的表单是否能否通过验证规则,那么如果通过了所有的表单就能通过验证规则,你去做一些事儿,那没有通过来做一些其他的事儿。那所以说咱们也是一样的,当你点击确定这个按钮的时候啊,你要把所有的验证的字段呢,全都要打的,确定一下是否通过。
13:03
那咱们看一下吧,那咱们应该是在哪,在这个a or update啊trademark。也就是说,当咱们点击添加或者是修改品牌的时候,应该所有的表单啊,就是所有的验证规则通过之后再去写你的业务逻辑。那所以说啊,老师呢,在这里呢,先把这里的代码呢,我先给你干掉,咱们剪切一下。那这里面咱们要干什么呢?要注意就是当。全部验证的字段通过啊,再去啊,再去书写咱们的业务逻辑。对不,那这件事儿呢,要注意一下子,那么老师呢,把代码呢,先放在最底下,咱们到时候会用,那怎么去验证所有的字段全都完事了呢,很简单,你看一下人家是怎么写的。那首先说啊,他写了一个叫Z点到refs,你想想ref干啥?是不是获取真实的节点,那你会发现一件事,他给form打了一个RDF。
14:11
对不对,对吧,那咱们呢,也给咱们的啊放打一个rds。对吧,那咱叫ref,那等于什么呀,等于咱们就叫做ruler for。对吧,那你在底下呢,可以获取到这个节点。哎,叫this.dollar res点叫ruler four。那啊,这个单词别写错啊,单词写错了可就坏了,对吧,叫ruler啊ruler for。相当于获取到了放节点。那么form节点呢,其实啊。饿了么UI呢,给咱们来了一个方法叫什么叫做date表达验证。看底下。其实呢,是给咱们的form加了一个方法,叫very date date代表什么呢?代表的是验证。
15:03
对吧。那这块呢,也要注意一下子y date那一及啊,它的里面呢,需要传回调,回调当中会给咱们返回你所有表单,验证是否成功还是失败的信息,对吧,比如咱们叫Su。对不,那咱们呢,可以打印一下这个success。那么老师呢,先把这里啊,先给你剪切掉。先把这先解决掉,省得呃,防止咱们跑不起来,咱们可以看一下啊,你看它这个的作用是什么,就是这个success,你看假如说老师现在点击确定。那是不,没有通过表单验证。对吧,那如果通过了法国的布尔值就是真,那所以说啊,咱们这里面呢,就可以判断,那也就是说如果全部的字段,哎,如果全部字段怎么的符合条件。叫做符合条件,那你就可以判断。如果success成功。
16:06
那你就可以把咱们的业务逻辑放到这儿。但是呢,这块呢,要注意一件事啊,咱们曾经写的代码当中啊,这里有一个away,那你这个a think就不应该放在这儿了,放在呢,是它就近的这个函数当中,是不是就这这个回调这。对吧,A think与away对吧,那这是成功干什么,那还有一个是什么,是不是失败,那咱就可以写什么,是不是写一个else,那失败干什么呢?咱们呢,也可以看一下人家是怎么写的。那如果失败了,你看人家是不是返回一个布尔值false,以及打了一下子就提交一个错误。对不,那这样咱们的表单验证就完事了,那咱们呢,可以回到咱们的项目当中,可以看一下,举个例子。比如说现在的老师呢,想添加一个品牌。对吧,添加个品牌,我什么都没写,那你看。
17:00
是不是什么都做不了,那假如说我现在起个名称叫做华为。对吧,品牌logo呢,咱们也给他来一个叫什么呢,叫做华为。那你看你这回能不能添加品牌是可以的。对吧,所以这块呢,要注意一下子。那以及啊。在后期当中啊,也有很多地方会用到表单验证的。那这里面呢,老师呢,也说一下子,你看后期还有很多地儿也会用到表单验证,那后面的表单验证老师就不再一个一个带你们去写了,因为呢,他这个表单验证呢,相对比而言呢,还是比较简单的。OK吧,这里呢,需要注意一下。那以及这里啊,咱们呢。啊,再讲一个小东西,就是什么呢?自定义校验规则。那咱们来看一下啊,就是现在的这个规则啊,你是对照人家官网来的,那其实啊,对于form这个组件,饿了么UI还给咱们提供了另外一种验证的规则,就是自定义校验规则,什么叫自定义呢?程序员自己去定义一个校验规则。
18:10
那咱们呢,可以看一下他是怎么玩的。你看啊,它是同样的套路,第一个带rules对不?第二个打了ref。对吧,获取这个节点判断有没有啊,表达验证有没有通过,那咱们看一下它底下的这个验证规则rule,你看它这里面的写法啊,可就不一样了。对吧,咱们把它的验证规则呢,找到了,哎,咱给他拿过来。这个呢,老师给他替换了啊,这给他替换了,你看人家的,这是人家的验证规则啊,这是自定义校验规则。写下叫自定义校验规则。对不对,对吧,你这块要我看清楚了,这是自定义的校验规则。啊,咱们验证的谁验证的是这个TM令对吧,是不是这个品牌的名称,那当然这里面你不能用火,咱们是不是用change,当文本发生变化的时候,就要进行表单验证。
19:09
但是你会发现它这块有一个属性叫va,那值识是va pass,因为它这块校验的是谁,校验的时候是校验的是什么叫pass,那咱起个名字,咱叫啥叫TM name。对吧,TM0。叫TM。内容,但是你要注意一件事,那它是个什么鬼呀?那咱们得看一下文档,所以说你看whether pass在这在它顶上呢,有一个是一个,你看这是啥,是一个箭头函数。那这里面书写的就是你的自定义的校验规则,它是放在D的函数当中。那这里是什么,咱们就说一下子,那这块呢,是饿了么UI提供的这个自定义校验规则。对吧,按规则那当然啊,那你这块叫做value pass,那你这块写的是谁说value data TM name指定不行,所以咱们这里呢,也给他替换成什么,替换成TM内。
20:06
对吧,那这里面呢,就是书写你的教育规则了。那这块呢,咱们完全可以自己去写。那首先说value就是啥?就是用户输入进来那个文本对吧?Ruler是相应的规则,以及call back,它是放行的这样的一个函数。OK吧,那咱们这里面可以判断啊,你看比如说这块咱们写啥写是不是书写自己的自定义教育规则。啊,教育规则举个例子,咱们的品牌的名称必须是二到十位,那你可以判断对吧,就是说如果你的Y流它是那个字符串啊,就里用户输入那个文本,如果VALUE6的lengths如果小于二,那是不是不符合条件?或者你的value流。哎,Value length大于几,大于十,那这都是不符合条件的,那你就可以,哎,放行call back,传一个错误信息,你有一个error。
21:00
对吧,1r error对吧?哎,比如说你给他来个啥叫做品牌名称啊名称的,呃名称呃是需要二到十位。对吧,那这是不对的,那else就是什么,是不是成功,那成功你放行就可以了,靠外。对吧,就该做什么就做什么,就完事了。那所以说这里面呢,咱们也用到了一个自定义的一个校验规则,咱们看一下O不OK。对吧,直接来个一二三四五六七八九十,那是不是还是一样的效果,只不过这里面可以书写你自己自定义的卷规则。对吧,所以说呢,这块呢,要注意一下,其实啊,这个套路呢,在咱们登录的时候,咱们曾经看见过,就是哪这。你看啊,这是咱当年登录的地方,你看再看这是不是在获取form form标签,以及在进行表单的验证,以及你看这儿啊,你看它这里面写的,其实写的就是自定义验证规则。
22:01
对吧,其实是一样的。对吧,所以他这玩意没什么难度啊,所以这块呢,老师呢也写一下了,这块呢一定要注意就是饿了么UI哎提供了啥呀,是不是提供了表单。验证的功能。对吧,但是一定要切记啊,就是自定义校验规则,哎,校验规则没事的时候你需要看看它当做一个重点。啊,当做一个重点去看。
我来说两句