05-XML & Tomcat/02-尚硅谷-书城项目-第一阶段：表单验证的实现

那接着呢，我们就来做一下了，嗯，怎么做呢，打开我们这个idea啊，然后。稍等要启动。然后在我们的这个Java web这个项目当中啊，再建一个今天需要的一个模块。来一个模块，还是静态空程的，呃，选静态空程，它下一步，嗯，这里呢，选择零五和第五天的内容，然后咱们叫做book sta就静态啊，今天只做第一阶段啊，书上校验，然后点击finish，然后把咱们这一些大家看一下哈，把笔记里boot空的零一我们记录啊，我们的内容都复制出来，复制到哪复制到咱们现在这个。项目目录里面的，诶粘贴。点击OK，就这样啊，点击OK好吧。

那我们先来说一下哈，第一步。啊，那么先建一个什么呢？模块啊，先建一个模块，我截个图。OK，第二呢，把什么呢，书城的静态资源拷贝到什么东西呢，这个零五。不可。Static_static这个什么呢？工程下来，工程下好怎么拷贝呢，来就是从这里面。的内容。拷贝到咱们这边啊，就大概这边这样。OK。大概看一下啊。

就是这边哎，复制过来啊，复制过来。OK，好了，这是咱们要干的第一件事情，你先把资源整过来啊，先把资源整过来，那么整过来以后，我们好好看看都有哪些资源，这里面都有哪些资源呢？大家看啊，首先这个是index HTML啊，这个一般是首页，Index基本上都是首页，就你运行起来大家看一下这是首页吧，好，然后其次里面还有啥，就两个目录，一个page，那pages基本上都是页面，然后这些页面呢，按照不同的模块有不同的目录组织划分啊，看的是购物车相关的模块，你看一接的页面，Manager是后台的。好好，那么order是订单的，那么user是用户相关的，咱们要做的就是用户的登录和注册，就在这里。啊，在这里好，那这就就是目录都是页面。

那是的呢。都是其他的一些静态资源，比如说GSSR，比如说image图片呢，你看都是分隔开啊，由目录呢进行分类，有效的管理，好给咱们了解一下，那咱们刚刚说了，咱们要以什么为模板进行讲解，Reist注册啊注册，那么我们运行一下，这就是注册了，好那么咱们要验证什么内容，就是用户名，密码，确认密码，邮箱和验证码，什么时候验证，点击注册的时候验证，那咱们用什么去实现这个效果呀，使用几块类，所以呢，大家注意看，咱们这里面还没有几扩类，大家看见吗？大们先把几扩类拷贝进来，几扩类一般放在哪啊，按照分类的话，几扩类是不放在pages里面，因为配置只有页面，看见吧，这都是页面啊，那那个几呢，放在static这个目录下，那我们到第第四天里面去复制一下啊，就这个复制诶到stick里面来。

OK，稍等啊，进来了，进来了，那么我们先到这个注册页面里面把这个文件引进来，好，我们来看一下怎么引。OKSC，然后点点斜杠，大家注意看啊，当前目录是在哪里，我把其他关了。Pages下的usual，大家看当前目录是不是这个user目录点点是表示上一级目录，是表示pages是不是还在访问上一级目路，还得访问一次点点，哎，然后到谁是不是到static呀，Static下script下几，哎这样就好了，这样就好了，那么。引入之后啊，这个数进吧，引入之后呢，咱们来看一下哈，在里面再写一个script，用来写我们的功能。

OK。走吧，先写页面，加载完成之后。啊，然后呢，在这里面咱们给这个按钮啊，绑上当地事件，我们稍微看看这个页面啊。这个地方呢，是一张图片，就是那个logo，你看logo啊，Logo在哪呢？就这个B谷那个logo啊，然后再往下看那个div啊，登录的一个字啊，叫做欢迎注册非常大啊，就是这个。那就到右边的内容了呗，没啥了嘛，右边的内容你往下看啊，注册硅谷会员对吧，就是这个。然后到用户名称密码。哎，用户名称密码的下面，用户名称密码好了，用户名称这个输入框啊，它有点长，我建议大家呢，换行显示，这样呢可读就好一点，能理解吧，你行太长了，稍微换一下行好，那这里是用户名输入框，就是密码，就是密码邮箱。

验证码对吧，这个输入框和验证码图片，这个就是那个注册按钮吧，啊在那注册按钮我们要先找到它，通过ID找，然后给他绑上单的事件，咱们复制一下那个ID到上面来。中。通过ID查询。点click翻水，咱们这是干嘛呢？就给注册单击时间啊，给注册绑定单击事件，那么这里面咱们要做什么事情，咱们做的事情其实就是咱们验证的这个内容。对吧？验证啥内容来在这里看一下，我把他们都注意，第一啊，这个用户名呢，必须验证由字母数字下划线组成，并且长度是五到12啊，密码呢，由字母数字下划线组成，长度是五到12位差不多是吧？那么确认密码呢，要跟密码相同，能理解吧，那邮箱呢，你要符合邮箱的一个格式，诶验证码这个地方要说明一下，验证码呢是由服务器生成的，而咱们还没有讲到服务器这一块，所以验证码的验证啊，咱们今天只需要验证它有输入的内容就可以了啊，它有输入的内容就可以了。那我们先来看第一个就是验证用户名，验证用户名怎么验证啊，大概的步骤什么样子的？第一就是获取用户名输入框礼的内容是吧？第二，创建正则表达式对象。

啊，第三使用CH的方法验证，还记得这个方法吗？验证，第四提示用户结果嘛，对吧？好，那我们就来看看第一步吧，获取输入框的内容往下走啊。

现在这个就是那个输入框，用户名嘛，输入框嘛，他有ID，那通过ID查找。啊来要获取输入框的值，简单呢，走井号，它点O方法是不是就可以了，完事了，来生成一个变量，这样U内好，然后创建正值表达式对象，那YU内PA等于两个斜杠，然后减号到杠W，大括号五，逗号12还记得吧？啊，这个数是表示打头啊，这表示结尾啊刚W示字母数字下划线啊，那这个呢，大括号里面是不是长度啊，OK，那验证来if一下哈，那么username pd调用它的方法啊，那么username just来就验证了，大家注意，我们说这个结果是啥？是不是你匹配的话我就给你返回出啊不匹配就返回false，那么我们是在用户不匹配的情况下才会提示用户能理解吧。

所以不匹配，它会返回for for，它需要做些工作，所以给它区反听懂吧，好，那怎么样提示用户呢，怎么样提示呢，来往下看一下哈，这个地方。他有一个a mention，你在里面写点东西啊，用户名不合合法呀，合法啊，那我运行一下哈，看那个效果了吗？这就是错误信息提示的，一般情况下啊，美术做好之后啊，哪些内容放在哪个位置就已经固定了，那也就是说我们只需要得到这个SPA标签，把错误信息放到这里面来就可以了，能理解吧？啊，那你得获取它，获取它呀，它是个么？啊，还有class，来来吧。

走到符spend，点它点test看见吧，好，设置到里面内容吧，咱们说用户不合法，是这样吗？好。那我们试试看哈，看看有没有这个验证，来咱们跑一跑，好，现在呢，我随便敲，这肯定不合法提交，诶他说跳过去了，这是题，刚刚不合法吧，不合法要让他不跳过去怎么办呢？False，好，咱们再来看一下啊，刷新刷新来134走它是不是不跳了就好了，那这个时候我们就输入合法呗，直接WG168我们点击提交，就这过去了，没问题，但是大家注意看一下。

有个小的细节，跳的时候，由于这个页面呢，是本地的，看见了吗？它能它能直接跳到这个，呃，路由器的success就是就是它是吧，这地址是存在的，所以它跳的很快，有一些细节我们看不到，如果说我给你一个地址，你跳不了的，由于网络原因跳的很慢。你来看看一个东西。Local host8080注意看啊，那现在再刷新一下啊，来走注册不合法啊，那现在改成合法，ZWG168，注意看我提交注册，他是不是转半天这个信息还在看见了吗？对，他是不是已经合法了，比如他还在是吧，ZZWG168这时候合法，我这个信息是不应该去掉，对吧？你看它是不是还在啊，上半天这个时候大家记住啊，只要是合法了，往上走走啊，合法了以后，咱们在下面就是他跳过这里了，咱们在下面就应该把这些信息都去掉，能理解吧，再让他提交啊，再让他提交好，那这个呢，咱们再来试试看哈，还有没有效果，ZWG。

走不合法是吧，六八是不是去掉了提交了，OK，那用户名咱们验证完了以后，接着咱们就来看看密码啊，那其实密码的验证有没有什么想法，是不是跟用户名差不多呀，你大家可以把这个内容是不是复制过来改改就行了，对吧，那差不多嘛，好，那这个呢，你改成密码的，大家大家注意看一下哈，ID有点特别好，就是你有什么ID，它这里都能检测到，看见吗？你可以这么写，或者说你不熟的话，你去看一下也行，这是密码呀，对吧，它可功能很强大啊，ID什么东西都能给你记下来来。那你把它改成密码呗，对吧，这个也改成密码。

啊，那这个呢，也改成密码的正确表达式啊，那用密码的正确表达式验证密码的支符错案啊，错误信息呢，改一改叫做密码不合法完事了是吧，你功能一样来刷新一下咱们提交啊用户名不合法，来写一个密码不合法，1234还是不合法，五六就合法了，OK，别着急啊，别着急，接着我们再来看确认密码啊，确认密码还没讲了，确认密码需要干嘛，是不是验证和密码相同啊，那大概就是来你要获取什么呢？确认。密码这个内容，然后呢和密码相比较是吧，最后呢就是提示用户了。

嗯，我们获取这个确认密码，确认密码ID址啊，复制来上来走，先获取它里面的内容，Y方法Y啊呃，RPWD。Test这个文本啊，好，那比较呗，是吧，就ipw test不等于passwor test不等于的时候，咱们是不是要提示用户了啊，不等于提示嘛，来提示的内容就差不多嘛，就把它拿过来改改内容就完事了呀。确认密码和密码不一致是吧。一致呢？哎，完了，好，那我们来看看哈，刷新一下人W7168按卓密码不对对吧，23456这里走两个密码不一致吧，还得输入什么1234不一致，五不一致六一致是吧？啊一致，那接着我们看看油箱啊油箱。

那邮箱的验证啊，跟前面基本上也差不多啊，来稍等诶第一就是获取邮箱里的内容知道吧，第二呢就是创建啊正则表达式对象，第三呢就是使用，哎呀，我按理他例的出来了，使用test方法验证。是否合法对吧？最后第四个就是啊，提示用户来获取邮箱的内容跟获取用户名和密码是没啥区别啊，但这正确没啥区别啊，写吧算了，写吧也没啥多少东西来email等于号井号email啊，点Y啊，当然我跳到很多的时啊email你要是不知道这个ID能往下走走。

是email吧，啊，那再回去了，获取完之后这里就比较麻烦了。大家注意看看哈，邮箱的这个充理版是非常难写的，我们那天是不是给大家发大家发了资料啊，你可以从那个资料里面找，或者说从我们那个几块打开之后啊，它这里也有些工具的说明，也是正确表达式的一个说明，你看啊，可以看看，然后呢，这里有一个邮箱的，咱们拿一个现成的啊来了。OK，那么拿过来之后啊，咱们直接用啊，来email p.tEST然后email test啊来前面呢取个法，然后呢，把那个提示信息拿过来啊好，咱们说邮箱格式不合法。

复合法好了，那我们刷新一下ZWG168123456123456随便敲，这肯定不合法了是吧？再来点什么数字也不合法，然后。com点的硅谷也不合法是吧？来整体输一个ZWG168艾qq.com这就合法的对吧？这是合法的QQ和邮箱了，那我们再来看一下啊，验证吧，验证码这一块呢，我把这个录上去啊，咱们说只需要验证有输入的内容就可以了啊，那我们看看输入内容是啥情况，来，这是验证码那个输入框看见吗？啊，一个文本输入框，你只要得到这个ID，获取它里面内容，看他有没有文字就行了。是吧，有没有内容就行，来复制ID啊。

好。ID点方法接收一下变量了。哇。Code test，然后呢，就去比较一下，如果啊，Cold test不等于now或cold test不等于空串啊，应该是等等于，那不等于等于空串是吧？对咱们提示时是等的时候提示的嘛，那你就把这个拿过来。啊，就是验证码不能为空。啊，就这样来咱们看看。我刷新一下啊，这个当初去168123456，确认密码123456啊邮箱。ZWG168艾qq.com啊，那这个内容空了是吧？走它是不是告诉你不能为空啊，那你说abcde随便输点呗，这时候是不是跳过去了啊，就跳过去，当然这里呢，还是会有一些非法的输入的，123456 123456 ZWG168艾qq.com什么非法输入呢？呃，个别人呢，他可能会在验证码这个地方啊，故意搞出空格，空格不等于空差，能理解吗？这也提升不去了。

那我们可以防止一下空格的情况啊，空格怎么处理呢？就是我们得到这个内容以后啊，你可以去掉一动码里面的前后空格对吧？对，去掉啊这个验证码前后空格对吧？那你怎么做，即跨当中提供了一个工具的方法。去是不是很熟悉Java字符串也有啊，这个去掉字符串前后空格吗？怎么用啊，到了点去放字符串，那咱家这么用注意看哈刀了点去是吧？哎，发上字符串code chest好，那么这边接收一下code chest，等于它去掉前后之前，那么我们简单的来验证一下，咱们说去。

空格前。加上code去空格后。咱们比较一下空格是不是去掉了，我用这个东西引起来是干嘛，如果有空格他们就能看见有距离，能理解吧，合在一起就是没空格了嘛，ZWG168123456啊嗯，123456，哎，那ZWG168艾特qq.com啊这里呢空格对吧，点击诶去空客里是不是一堆空格啊，那去了之后就没有了对吧？然后他就告诉你验证码不能为空。

啊，都好了啊。