81-尚硅谷-项目实战-书城-注册页面的表单验证

好，我们找到web，我们找到static，稍等一下啊，我。看一下啊，不是在这。找到web in，找到page，找到user，我们找到同学们，大家一起帮我看一下啊，这个注册页面呢，它每一个输入框下面都会有一个SPA，比如说用户名称这边一个SPA，它指的是用户名应该为多少到多少位数字或者是字母组成。啊，它出现了这个，那这个表达式我们怎么去写呢。这个表达式我们怎么去写呢？好，我们首先，首先我先来第一步一步来啊，第一步我们要对这个form表单做验证。我的想法是，如果这个里面输入的都是符合要求的，这个表单应该提交。当这个表单里面所输入的内容不符合的时候，我们不应该让这个表单提交。那么这个表单它有个事件叫on submit。On submit就表示当表单要提交的时候，我要执行这里面的一个JS方法。

如果这边写的是for。如果写的是for。那这个表单他就不会提交，如果我这里面写的是return to，那么这个表单它就会提交。现在呢，我先把它写死了来。稍等一下啊。嗯，点错了。点击加号27，应该是27，没错啊，PROJECT27啊，应用一下。OK。回到这边27没错，把它改一下。好，应用一下。点击OK再启动。我们把上面的全部删掉啊。来这个警告，如果看了不爽，大家可以把它换成Canada啊，换成Canada就没有事情，因为我用的全是过时的方法。

好来看一下啊，第一个。第一个。注册页面表单。表单验证。那么这个当中呢，这个当中。我们的phone标签。Form标签。Form标签当中有一个。有一个事件。这个事件叫on submit。好，如果。On submit。啊，如果这里面写的是returnfor。那么表单。点击提交按钮时没有反应啊，不会提交。就这样的。反之，On submit。如果我写的是丘。

那么表单是会提交的。行吧，同学们。啊，咱们一步步来。On sub，如果写的是for，咱们现在来看一下。这是我的注册页面对不对，我点注册，我点你看啊，我其实我一直在点，点了之后它是没反应的。那么如果我把它改成true。如果我改成去这边我加个一表示，表示我页面也更新行吗？同学们，这是咱们一贯的套路，已经说过了啊，刷一下。哎，反应过来了，行，我点击注册，你看是不是会提交啊，这是我们服务器端做的验证。那很明显，同学们，我现在怎么能点提交呢啊，我这个假设我的用户名，我的用户名要求的是什么呢？我要求的是六到16位数字或者是字母组成。六到16位数字和字母组成。那明显这边是有限制条件的，我怎么把这个限制条件把它加进去呢？这个称之为叫表单验证。所以呢，在这个地方return，我的想法就是我对这里面的框框进行验证，如果这里面的输入框啊，或者是其他的一些控件，如果它符合要求，我们就return to。

如果它不符合要求，我们应该for，并且把这些消息把它显示在页面上，这些span你看都是span，那为什么在页面上没有呢？其实这个类样式当中会把这个span给隐藏掉了。那么当我这个输入框不符合条件的时候，我应该把这个span显示出来，能听懂吗？好，所以我做验证有两步，第一步阻止发送，第二步在页面上有一些适当的提示。啊，要做这么两步事情，OK，所以on submit这个地方我写的是return，比如说比如说我写一个叫。Check。啊，或者叫pre，随便你在什么什么之前嘛。哎，我就这么去写了。那教师就是不是就表示return，我要调用这个方法哟。那这个方法如果return，如果返回的是true，不就表示表单提交吗？如果是false，不就表示不提交吗？那行，所以所以呢，我需要来写个JS，好回到这边来。

就回到这来，我们写一下script。Language javascript RC，我们写个T吧，冒号src好艾大括号。好杠。好，我记得下面一个叫script，那我这边我写一个叫呃，点JS就这了，当然这个JS还没写呢，我们写一下吧。在我们static里面，正好帮我看一下路径啊，Static对的script的对的，好，再往下我们写一个叫。列出一个发文件点GS。然后呢？我需要在这里面，我需要来写个方法function pre，没错吧，那么这个方法最后一步我要让它true。表示他能够提交。好。

再来。我怎么来做验证啊，怎么来做验证。当我点击提交按钮的时候，同学们，这是一个用户名，这是一个用户名的这个文本框。我为了，为了简单起见，我在这边写个ID。我媳妇叫UN name。TXT。啊，我写了个叫UN txttxt表示文本框。好，所以呢，我就可以在这里面去写document get element by ID是吧？TXT，没错吧，同学们。这样我就能得到这个TXTVLUTXT就能得到它。这是一种方法。还有一种方法是什么呢？我们也可以这么去获取。Document代表的是当前这份文档。代表的是当前这份文档。然后这份文档它的点它个集合属性叫forms。Forms是什么？

父母是表达美。加这个S，就是这个页面上所有的表单没。也就是说老师这不一个嘛，我们正好的页面是一个，有可能我的页面上出现好几个form标签了，能听懂不？所以他用的是forms，那行啊，当前页面上是一个，那我就写中括号零。叫forms中括号零啊，当前页面就只有一个，然后再来点。U name这是没有问题的，你看我，因为我这边也叫name属性，能看到吗？Name属性叫u name，所以我就直接点u name。这种是通过叫boom的方式。啊，这种叫boom的方式。上面这种是什么？上面这种是盗墓的方式。Document文档。啊，叫文档对象模型，第一个D解释为document。下面这个叫bomb。后面两个字母都一样的这个B，大家今天刚读的单词。啊。叫浏览器是不是啊，哎。

叫浏览器对象模型document，我们浏览器里面的叫document。Document，再往上我们有window window里面有document里面还有其他的，比如说history历史信息，什么叫历史信息，前进后退。他能记住你之前的，还能记住你以往点的这些，哎，这种叫history。啊，只不过咱们这个没有细讲。啊，因为GS里面东西实在太多了。好。这两种方式都可以啊，这两种方式都可以行。那这个地方呢，我就使用上面这种，我使用do的方式来进行操作行吗？同学们好，我把这个拷贝一下啊。Could you see。拷贝了之后，我把它放到这。获取文档中啊，获取文档中某一个节点的方式。好，我把它写在这，OK。

那行，就这样子。好。那么这个地方呢，我先把这边删掉了。啊，我就只保留这个方式。OK啊叫UTXT那行再来再继续。嗯，这边我起了个ID，这个SPA这个地方我也想起个ID。这个ID我就称呼叫UN败。啊叫UN span，那么我想获取这个span其实也是能获取到的。我只要使用document.get element by ID，然后叫UN版就可以获取到了，因此呢，这个方法我们前面写过的。我们就搞一个大的符号就可以了，ID。Return document get。Element by ID是吧？那这样咱们这这一步就比较简洁了，直接写这个Dollar是不是就行了呀？嗯，没错吧，VR UN name span等于Dollar UN name span。

是不是啊，行，我现在要做的操作是验证这个控件里面的value。有没有问题啊，想验证它，那行吧，咱们来验证一下。用户名不能为空。而且是六啊，六位稍等啊，抄过来直接抄一下啊。而且是六到16位数字和字母组成的。就这样的，我们要对他来做个验证。所以呢，我们就在这边做个判断。VR我们写个智能表达式啊，怎么写呢？比如说UN rag等于UN rag怎么写？同学们首先是杠杠，后面是GM可以吧，那这里面怎么写呢？大括号。数字。啊，先不考虑六到16，先考虑数字。

杠数字是什么？是不是叫D是吧，咱们刚才说过的D好，这文档应我应该还没关。稍等一下啊。嗯，叫元字符在这，好，我们看一下。匹配任意的不在这匹配数字是不是啊。当地。然后字母呢。啊。就是单词字符嘛。可以吧，是吧，字母嘛，如果说你觉得老师不对啊，这里面还包含下划线的，没有关系，可以自己写来。杠地。啊杠D这表示数字，我们可以这么去写。你不是是数字和字母吗？数字是啥？不就零到九吗？数字呢？不就是A到Z吗？啊，AA到za到Z字母大写的A到Z是不是啊，不就是这些吗。

再来大括号。六到16。是不是N逗号M嘛，那不就六六到16吗。啊，是不是啊，不就这样了吗？后面其实这个你加不加无所谓的。不加没有关系的，反正我们是对于一个值，一个value值，并不是一个匹配的模式啊，并不是一个多行的模式，这样写没有问题的。好了。OK，大家不用纠结，如果我刚才写的这个过程，过程你实在接受不了，没有关系的。啊，没有关系的，那你就直接去百度嘛，总归会有人会有人有和你类似的这种需求，一定会有人早就写过了啊，直接去百度去找表达式就可以了。那行吧，这叫u rag。第一步，我们创建了GS，呃，智能表达式的一个对象。第二步，我们得到一个带带校验的一个一个一个字符串值，那是不是就它的value值啊。啊，就是它的半值，那就这样吧。You name text。V等于。

text.value可不可以啊？这第二步。第三步，那不就校验码好用name.test是不是？Test unit没错吧，行，If感叹号，感叹号是不是表示否否？本来你校验成功的，加个感叹号，如果你校验不成功是吧，不成功的情况下，我们是不是就要去把把这个SPA显示出来呀。好，所以把这玩意剪切扔进去。啊，把它剪切扔进去。再来。这个SPA。我把样式表打开给大家看一下。回到最上面。我们找到这个CSS，按住CTRL键点进去。然后呢，选中它稍等一下啊。不是这个啊。我们那个是叫error什么message啊。在这在这看到不叫error message ctrl c。到这里面CTRLF查找一下CTRLV，你看error message，它一个叫visible，是不是等于hidden隐藏啊，Visible叫可视可见的啊，把它改成隐藏了，那我们就把这个visible改成另外一个属性叫visible。

行吧，写一下。回答这。就是他。点style点叫visibility visibility这个属性等于等于一个值等于visible，不用记啊。Visible。差不多吧。要看我这个单词有没有拼对，很简单，在这个地方它有自动提示叫visible，看到了吗？我是不是多了个A是吧？啊，多了个A行。蒙对了，行，就这样吧，啊，如果。如果你验证不通过，我就让你变成可见，同时return false，还记得不？还记得for啥意思，不是不是，再不就终止了，我就不让你阻止你表单提交了呀，行。

Else。Else，这玩意儿。应该是把它改成隐藏。好，这个逻辑要把它写对了啊，所以这句话我就把它放到外面去了。挪到衣服的外面。行吧，同学们啊，就把它挪到外面去。行吧，咱们来试一下吧。OK。那比如说我在这边输入这个ABC。那应该是不符合的。我们点一下注册，你看用户名应该为多少多少是吧，它就会有个验证，哎就这样子行，那下面咱们就比较快了。这是第一部分。好，我把这句话也挪下来啊，挪到这。这第一个再来下面一个，我要去验证密码。

所以密码这个呢，我也在这边写个ID。等于PWDTXT。下面这个我也写一下。ID等于pwd SPA。行吧，同学们。所以我到这边来。密码的长度啊，至少为八位。好，回到这。那么我就在这边写一下。PWD。TXT等于Dollar p w txt是吧，等于它。然后呢，我们把它的value值取到PWD等于PWDTXd.value。我们写个正的表达式，PWD等于杠杠。嗯，长度至少为八位。这个怎么写？长度至少为八位。

匹配除换行字符以外的任意字符是不是一个点啊？哎，就这样。所以我们写个点大括号八位。可以吧，哎，就这样啊，我们这写这个点，然后我们用一个大括号就表示次数嘛，稍等一下啊。是吧，他表示次数就这样子。那么呢，我们前面的这个，你最好用一个中号，范围就和这边一样，咱们把它括起来。八逗号。然后呢，再来。我们把这个SPA，我们也把它找到pwd SPA等于到了叫pwd SPA。好，我们最后判断if。叫pwd rag.test test pwd。好，我加了个感叹号表示，如果验证不通过是吧？呃，验证不通过我应该这样PSPA.style点我就直接写了啊，Visibility等于叫visible，没错吧，等于它，然后呢，Return false。

Else else呢，我应该把这玩意CTRLC拷过来，然后呢，把它变成黑的。隐藏。可以吧，再来。这个。两次密码输入的必须要一致，ID等于PWDTXT2叫PWDPTXT2 ID等于PWDSP2。放到这。好了，那么这个我怎么写呢？这个其实就比较简单了，和咱们智能表达式没啥关系啊。If。Dollar pw pwd txt2。叠。Text是点value吧。是吧，点value，呃，如果这个点value等于等于到了。

大括号，PWDTXT.y。点Y，这是相等的情况，我们加感叹号表示不相等的情况。如果你不想等了。哎，就把这个拿出来，到了他点。点位这把带他。然后呢，咱们根据C。准就C。可以吧？哎，是不是。不就这样了吗？你如果觉得这玩意儿很别扭，捡切。VRPWDPWD啊，TXD2。GPWD等于他点八六行不行啊。然后CTRLC拷过来好，如果这玩意儿不等于前面的。是不是这个。不得这个值啊，这样大家会觉得简单一点。好，然后呢，我再把这玩意再拷过来。

Can you see。VRPWD420等于它。Could you see。CTRLV。KTV，这样看着可能会舒服一些，OK，就这样。这是两次输入密码必须得一致。没错吧？但如果我哪边写写错了，大家要提醒我一下啊。啊，有问题吗？34。Could you see。好，OK，没问题吧，再来。Set。下面一个是邮箱。我们把这输入。稍等啊。从这到这QC拷贝一下放到这。好，请输入正确的邮箱格式，那么邮箱一样的。首先这个框框ID等于。Could you see。TXT。

嗯，SPA也行，ID等于email。Well。Email txt。Email就直接email算了。Email。TXT.value行不行啊？再来下面一个email span等于Dollar email。Email失败，好。OK。OK。来那邮箱验证的email。Re。哎，这个实在写不出来，我提前百度了一下。正的表达式大全吧，大全好，那这边就有啊，随便你看哪个都可以，或者咱们课件里面也有。正的表达式稍等啊。在这。

是的吧。Can you see。CTRLC拷贝一下，CTRLC拷贝一下啊。嗯，然后呢，我们回到这里面来。Can you。稍等啊。可以吧，好，这是我们智能表达式的这个，那行吧，判断一下呗。If感叹号，email.test。Email。加感叹号表示你验证不通过，如果验证不通过的情况下，这个spa.style.visible等于。Visible。Return force。Else can you see。根据V。行吧，这样就写完了。那行吧，这边我就把它写好了，咱们就一口气来验证一下。用户名把这个E再删掉。

再回到页面上去。跑到这。随便用哪个啊刷一下。好，哎，没问题吧，咱们这边写一下ABC。用户名先先注册吧，哎，是这样的，咱们把它改对了，比如说我写个叫hello word。再注册，哎，它变成密码长度是吧，123123123注册。立码的长度至少为八位。这不对的吗？123456789。对的呀，密码的长度至少为八位，我们写的不对啊。看一下代码。密码的长度至少为八位。他这个点。把尾对的呀。我这写的不对啊。感叹号，Test。

如果不符合。拉力问题我看一下啊，稍等一下右键检查。然后回到S。找到j script找到他。然后呢，咱们找到这里面，这里面是个断点。在这边是个断点啊。然后再来。哎呀，这个这个有点小啊，稍等一下啊，我现点一下注册，我现在就点一下注册，一点击它这边有断点就进来了，看到了吧，往下走。点看一下PWD。是的吧，没错。找一下SPA没问题，然后test做验证。哎，进来了吧。确实得visible，但是这个应该是对的吧。这不符合吗？是不是我正在表的，是我哪边想歪了？

匹配除换行字符以外的任意字符。点稍等一下啊。我加一个这个杠试试啊。先调过去。然后这的。再点注册。再来。他还是会进来啊，我这边还没识别刷新一下。看，识别过来再来。点击注册再进来。他还是会执行这个是吧，那说明我这个表达式写的不对，同学们。

这个叫密码的长度至少为八位。呃，正则表达式叫密码长度。你看看这的表达是长度为八到16。点进去。这这么复杂吗？不看了。等一下啊。一个匹配八到16位的数字和字母的密码呢，差不多吧，就就这么看吧。这么复杂是吧？不能全部为数字，不能全部为字母，必须是数字和字母，那么同时满足上面三个要求，可以写出这个，那行吧，就就这么意思一下行吗？同学们。Could you see。

好，回到这边来，咱们把它拷过来，感觉V。OK，就这样。密码密码这个我觉得应该不复杂啊。是吧，密码的长度至少为八位，我感觉应该不复杂，一会儿再来试一下啊，先把它先放进去，这个是要求的是有数字和字母是吧？八到16位是这意思吧。再把这实力去掉。好，就这样子，至少为八位嘛，是吧。行，再来看看啊。回到这。咱把这断点把它去掉，不要了啊，不要再断点。刷一下。再来。用户名把这个value把它改一下啊，他要是六到16位。Hello 2022。好，就这样。我在这边刷一下。

还没刷过来。再说一下。还没刷过来。叫换行。奇了怪。启动。密码呢，长度至少为八位。我们也可以这么去匹配同学们。我可以这么去写。

我匹配什么呢？我匹配它的单词字符不就可以了吗？中括号杠W-W是不是表示单词字符啊，看一眼。W。是吧？匹配单词或者数字或者下划线嘛。是吧，这也行。是吧，同学们好，再来。然后。大括号这边写的是八。没错吧，这样应该也可以啊，这着试一下。刷新一下，好，现在已经出来了，点击一下注册。长度至少为八位。ABC123456注册，哎，可以了吧，哎，这次就蒙对了，差不多吧，啊行吧，两次密码不一致，再写一下ABC。123456。好，Abcd。注册来输入这个正确的邮箱格式是吧。写一个比如说张三丰艾特艾特新浪点com。再点击注册，哎，这次可以了吧，是吧，这样就能验证通过了，就这样子。

这是我们所做的一个表单的校验。表单的焦点分为两步。第一步，我们要写个叫on submit。To或者for用来决定这个表单是否提交。第二个我们在这个表单验证这个内部，如果一旦我们验证失败，一定要写for，你不写for是不是仅仅是展示一下，但是后面是不是它不会不会不会这个中断呀，是不是还会再继续往下验证啊，那到最后还是会提交是不是同学们，所以说当验证失败的时候，你一定要立即returnfor。但如果是else的情况，你不要写立即写个啊，因为后面可能还有验证的是吧，好要注意一下。好，这是关于这个表单验证的问题。