48_尚硅谷_h5_html5表单验证.wmv原创

我们来说一下这个表单验证。来我们讲我们最后一个点表单验证，OK。好，来看一下这个表单，验证里面有什么东西。好，比如说index点吧，OK，我们来个表达，好form，好action的话，咱们暂时先不写。有个这样那个input的。好，叫做text好，比如说这个text必须是什么？好，这个同学讲B填一下吧，只你好，我说如果你不填去进行提交，没有提交这题，好，这个是去提交肯定会出错，是不是OK，我们来看一下，好，我们说来一个脚本，好什么叫表单验证呢？这是H细胞提供给我们的新功能对象，好，什么叫外对象，我们说。

有一个事件啊，有一个表单验证的事件，叫什么事件in many的事件，我下这个事件，比如说我现在拿到的表单，OK，我挖一个什么window.on。人丑就要多读书。漏等于一个方体，这个有提示啊，OK，我们来看一下。好，我们是干嘛，我们说拿到什么，拿到这个input，第一个input吧，我们就拿这个input I input element等于各部分的点select，找到input OK，等于是吧，Text。

OK，好找到他，找到这怎么办？我们说给他去绑一个世界，好绑一个什么世界。点ADD listener叫做in，诶，看这边还不给提示知什么in的时间，这个事件是干嘛的？好，在你这个表单验证失败时，就会触发这个事件。懂吗？你说现在我是非空，什么叫失败？啊，我说的意思就是什么，只要你一旦命中了这个什么，比如说现在我是干嘛，我说你是一个B选项，你没有填的时候，问你这个事件事事件要不要出发。要就是你命中这个什么。表单验证的时候。懂吗？好比说干嘛，我们来看一下，比如说我这边去康点落吗？OK1干吗验证失败了是吧，这你我们来看一下F10。

好，我来。说一下，比如说我说你是一个B选项吧，你看我现在不填，你看验证失败了吗。没有通过吗？是不是验证失败了才会触发这个事件，懂吗？如果你验证是通过的啊，我来刷一下走走走，你看提交他就不会触发这个事件，懂吗？一旦你干嘛命中这个验证，或者说是验证失败了，能不能能不能理解我意思啊，就会触发这个事件啊，一旦触发这个事件就会进入到这个回调里面，那这个回调里面我们来看一下，好，还有一个对象叫做。Va的对象啊，这个对象在谁身上呢？好在他身上，在这个元素身上是吗？OK，我们来看一下是吧，我们可以收点落下认识点。

叫什么？好，Valid看一下。只要你看一下这个对象里面有什么。Con整好提交，大家看是不是一个什么状态对象来看它里面几个值啊。拜林普塔custom a。拍什么吧，大概里面有没有这种飞空的。Value。Missing吃回去说你直缺失吧。是不是就当你命中这个什么非空验证的时候，这个value就会变成true。那么讲是不是你从这个对象当中你就能知道，哎，你生命中哪一种验证啊。能不能理解啊，OK，比如说干嘛，大家看总共有几种，第一个missing是不入值为空时返回啊，那type Miss呢？控件值与预期类型不匹配吧，比如说我们来谁啊？

谁啊谁可能会有这种问题呢，比如说我来个什么number是吧，来看一下，我刷一下这里面是不是只能什么。啊，这个是不是得换了，比如说我们直接什么。那这个第一个input是不是也可以啊，好，这里大家看，比如说这边我没有填数字，我填了个QQ，你看他让我填吗？不让我填嘛，填123是不是没有这种问题啊，那怎么样呢？比如说干嘛我来个email，这你刷一下。比如干嘛我填个111问你要不要触发这个事件，要我点提交的时候，你看是不是。触发这个事件了，他把这个对象给你打出来了吗？是不是什么时候会触发这个事件啊，你是不是还得点提交，点提交的时候才会去验证吧。那么讲这时候你的验证是不是失败了，一旦失败了，这个时间就会被啊处罚，而且他会告诉你是你命中了是谁太怕没match是不是啊，类型不匹配嘛，人家要让你输一个email地址，你输的输的都是数字嘛，这个就变成球了。

能不能理解啊，好，再来看还有什么。你看是干嘛不满足这个正则表示来看一下，比如说干嘛我这边有一个正则表示，有这个type还是什么text，我后面的一个正则PA。啊PA是不是正则比嘛，还是写杠定好，我们说干嘛必须是一到五的数字，是是找你，然后再输好你输了什么，输了好好好几位数字一点，你看是吧，与请求的格式不匹配啊，来看一下是不是干嘛哪个位错。正则是不是没有通过？是不是这个职位圈这这个能不能理解啊，好，那前三个是比较有用的，这三个比较有用，好后四个呢。啊后四个啊没用为说没用大看这里面是不是一个叫初中啊是吧，我们来看一下，为什么说他们四个没有用好，什么时候才会出，才会让它变出呢？就是超过什么max，其实我这个表单是可以给最大的一个。

程度的，比如说什么ma好，限制你输几位，比如说限制你输，输什么三维之内的是不是只有你大家来看。我输1234，你看还让我输吗？问，你有没有可能这个验证失败？不可能验证失败吧？你干嘛，你最多就让我输个三位啊，为什么输不到四位啊，说他能触发这个事件吗？触发不了这个事件，所以说我们说这几个他比较激烈。为什么大看这个让解是跟我那个什么为让就很像，验证让解最小值范围验证让最大值，或者什么什么，它什么意思啊，比如说你的步数刚刚什么指定是两步的，一次两步的，现在你走了一次一步，那你就触发我这个时间了，问你我有可能一次走一步吗。

我推那个滑块的时候。不可能啊，你这个步数都已经设设置为二了，那我是每次划的时候我只能走啊，不能走一了，所以说这几个状态比较积累，一般我们就干嘛。不看它等等前三个是比较。有用的好，那最后还有一种类型，总共有八种验证类型啊，前三种技术，还有就是用户啊自定义的来看是不是叫用户自定义的。Can you。用户自定。好比说干嘛我来一个自定义验证。怎么做呢？嗯，比如说我这边是不是有个text，这样我去拿到第二个表达，哦，OK，然后找第二个，这是那个提交按钮，每次我在这个什么上面。

CTRLC，好，每次我的上面在点击的时候。点OK立的时候等于一个方形，我在这个方形里面干嘛呢？我自己来做个验证，做一个什么样的验证呢？好，我说嘛，画一个value，一个value等于什么呢？等于input的点value。好，我拿到你的value吧，If，如果你的这个value等等于小飞章，OK，那我就来个自定义验证，怎么做验证？来看一下这是一个API，那用在谁身上？OK，是用在了。想想这个一片是在谁上的？

嗯，Sit custom valid，好，好像是在这个，我记一下应该在他身上，这里就在什么这个元素身上的，它点西塔。Cast吗？有没有，是不是最后一个，比如说干嘛，OK，请不要输入敏感词好明白吗？我说请不要输入好吗？敏感词这里我们来看一下else呢，Else我就让你这个验证通过。好，怎么通过验证通过，只要你在这边不输任何文本，它就可以通过来看一下这里。好F，哎，我点，我说小飞张。是不是不小飞来我点击时你看请不要输入敏感词吧，哎，可是我说小飞的二。

都不是明白的，提交是不是可以过了，诶为什么刚刚都是一些。If value等于小徽章。上面的点我肯定来比说嘛，我说小飞张二二提交时应为该给我去提示敏感词。不提示吧，是吧，如果你是小飞张，要不要提示啊，给你提示是不是，当然你干嘛，你说如果这边你也有一个文本那问题，那你这个是永远都提不过去的。哎，我刷一下。这里你看是不是就是一个是不是这个得放行啊，怎么放行，什么都不要出去放行啊，懂吗？OK，那我们说什么，我们这个时间段，现在我问你现在是对对谁做验证。是不是sub面做验证，你在sub面的点击的时候，咱们去做一些验证吧，是不是，那OK，那我们来看那什么面在什么有一个它有是他不问你上面它也是不是一个element一样的吧，另过他点什么ADD listener，他也有个什么in va的事件。

OK，叫什么I'm。Va OK，这里来一个方，OK，我们来输出什么OK输出。点look输出它的什么对象，来看一下这里好。好。好，问你，我说小费章是不是验证不通过点提交出不出啊这个事件啊。应该要触发这个事件，不通过不就干嘛触发这个事件了吗？来看哪边写错了。那别去做了。诶，我们这个是不是cost，是不是给了这个input element啊，来看一下是不是放在input element上这里。

刷一下小肥皂。提交哎，你看是不是我们说干嘛，我们是不是这个验证给的这个element，我们说现在我们点的是不是这个上面，最后这个验证给谁啊。上面什么，那这边是不是这个嘛，上面的上个事件啊，那么讲这个事件触发在哪个元素身上，是不是开启这个验证给了谁啊，刚刚这个验证是不是给了input里塔，现在这个现在这个验证给了谁啊。上面为什么来看一下这点说一下，比如么小废脏该不该出发那个时这应该触发是不是，而且他会告诉你们你是命中了哪一个验证是么？Customer我用户的自定义验证码。懂不懂，你看这个指数为错，其他指数为二。能理解吗？这个能不能讲好，这就是HTM给我们新增的表单验证的一个么，一个API懂吧，啊，虽然说现在还没有用开来，可是我觉得这个东西可能在之后会什么用开来，懂不懂好，当然你们要看金融性应该上哪去看。

看人能不能理解啊，好，那到这边我们把X里面所有的标签全部讲完啊，从一开始看音视频语音化到现在什么讲的状态列表，注释标记以及什么表单啊，这都是安奇妙给我们新增的标签啊，以及它的一些。属性啊，那从下一次我们来的时候的话，这些标题我们就不会再提了啊，我们以后的话我们都要讲嘛，移动端的东西了，对吧，好OK。