11 - 尚硅谷-RBAC权限实战-登录功能 - 表单元素验证.avi原创

用户的登录页面我们已经准备好了，接下来我们完成登录功能的开发。首先我们要在页面中输入账号和密码，然后点击登录来提交数据。那我们首先把页面打开，我们看一看y.GSP打开之后在页面的下部它会有一个按钮，这个按钮是用超级链接A标签来实现的一个按钮。那么这个按钮呢？增加了一个on click点击事件，当我点击之后，它会执行它的do log in方法，那么这个方法在里面，它是如何来实现功能的呢？我们来看一看。首先它这里使用了j query的选择器，J query是一个前端JS框架，通过它可以快速的获取页面的元素，非常的方便，那么选择器就非常的重要了，我们这里的选择器是冒号，加了一个selected，那么这个选择器是什么意思呢？我们一块儿把文档打开。

文档当中选择器的类型非常的多，其中我们比较常用的是ID选择器、元素选择器和类选择器，而我们刚才看到的呢，是冒号开头后面加了一个selected，在我们最后的这个位置，它是有说明的，它匹配了页面中所有选中的option元素，这个是非常重要的，因为我们option是下拉框当中的元素，你选中哪一个，那么就能得到哪一个，所以我们的这个j query选择器，它其实是把我们的这个下拉框给它得到了，得到了以后你选择的是会员，你得到的value就是member，如果你选的是管理，那么得到的就是用户，所以啊，也就意味着在我们这个位置可能是member，可能是U，那如果你的value是我们的UOK，那么我们会跳转到后台的主页面，那果你是我们的member，那么我们跳。

跳转的就是会员中心，所以啊，它会跳转到不同的页面，这是它登录页面本身自带的功能，但这不是我们想要的，我们想要的是对我们页面的元素进行校验。如果账号和密码都不是空的情况下，我点击登录就应该提交表单。然后去在后台进行我们登录的查询，如果查询有结果，说明你的用户存在登录成功，那如果你的用户不存在，说明你登录失败，应该回到登录页面提示错误信息。所以啊，这个不是我们想要的，所以把它删掉。删掉以后，接下来我们要做的是把它的功能给它写上，我们首先第一个要做一个非空校验。如果没有问题，我们再来提交表单。

好了，那么我们首先第一个非空校验，那么也就意味着呀，你要先把这两个液面元素给它取到，取到以后我们再来做校验，那么我通过j query来获取页面元素是非常方便的，那么我们会有很多的选择器来做这件事情，我们用一个简单的就是ID选择器，所以在我们这个账号和密码的ID属性当中，我们要稍微的改一改。Log account，然后下面是user password，咱们叫密码，我这里简写了啊，然后接下来我们这里呢，飞空校验，那我写上叫log in account，它等于Dollar符，然后井号，因为你是ID选择器，那么我们用井号后面加上ID的值叫login account，这样的话表单元素你就取到了，接下来调用它的方法叫Val。

然后我们通过这种方式就把元素取到了，那么接下来我们就判断它的取值是否为空，如果为空，那么是不对的，所以log in判断它是否为那，如果它为那，那么这个时候我们alert提示一下。叫做用户的登录账号。不能为空，请输入。好，接下来还有那个密码，我们接下来写上叫user password等于还是ID选择器。Va写完之后，我们同样判断一下我们的user password等不等于，如果它等于，那alert提示一下。用户的登录密码。

不能为空，请输入。好了。那如果我的判断没有任何问题的话，那么验证我们就可以了，接下来如果我们都不为空的情况下，我们就alert，因为我们后台还没有写任何的程序，所以我们直接通过一个alert来验证一下我们对还是错，我们就直接提交表单。好了，接下来我们来看一看。我现在把页面我们来刷新一下，刷新然后我来点击登录，因为我的两个文本框我什么都没有写，那么肯定应该提示错误信息，所以登录点。点完以后你会发现它并没有提示任何的错误信息，他直接就提交表单了，那这就不对了，为什么？因为和我预想的逻辑是不一样的，我的预想结果是它应该提示错误信息，可是实际的结果呢，却是提交表单说明有问题。

那么有问题，我们怎么知道问题在哪儿呢？首先我们做一个分析，提交表单，说明他这句话已经执行了，那如果程序能够走到这个位置的话，问问同学们是不是说明前面的逻辑应该全都走完了。也就意味着这些代码没有出错吧，如果出错的话，他能走到这儿吗？不可能，对吗？所以我们要知道它的程序是没有问题的，否则他走不到这个位置。可是他程序没有问题，却没有按照我的想法，他去alert提示错误信息，那这又是为什么呢？这里我们就要解释一下了，我们的页面元素的取值它不可能为呢？只要你能得到这个液面元素，那么它的Y6的取值就不可能为呢？所以我们写上表单元素。

表单元素。的Y取值。它不会为，那既然你不会为纳，那当然你的判断就不可能成立，那不可能成立的话，它就进不到这个里面，所以我们说我们这是有问题的，可是你没有输入的话，你又不是道，那你是什么呢？我们告诉大家它的取值是。空字符串。所以它的取值是空字物串，那你这就绝对不能判断它是否为那了，我们应该增加字符串的判断，所以啊，我们应该这么来写。好了，那你这么来写了对不对了呢？我们再来试一试，来我们刷新，我还是什么都不添加，我点击登录点诶，你会发现没错，用户登录账号不能为空，请输入这是对的，说明他判断成功，好了，我点击确定点诶，你会发现登录密码不能为空，请输入这也是对的，因为我们密码确实也没有输入好，点确定。

诶，可是问题又来了，他怎么会提示提交表单呢？我们都有问题了，不应该提交表单呢，那这又是为什么呢？所以啊，说明我们的逻辑又有一些问题了，那么我们本来啊，既然你出错了，就不应该提示提交表单，可是你还提示了，说明我们程序在执行的过程当中。它并没有当发生错误的时候呢，终止程序的运行，它没有，而是继续往下执行了，这不是我想要的，我希望的是当你的程序出现问题的时候，你给我提示错误信息，然后不要再往下执行了，那我们该怎么办？

诶，有的同学说了，老师我们返回不就行了吗？没错，你这是一个方法，你如果不想让程序的逻辑往下执行，我们直接返回就行了，所以我们这里直接写return。好，那同样道理啊，我这里也写，写完了之后我们再来验证一下，看看我们的说法是不是正确的，一旦发生错误，不让逻辑再往下走了，好，那我现在账号和密码都是空的，所以我点击登录点，点完以后它提示用户登录账号不能为空，请输入这是对的。点确定，我要看看还会不会提交表单，点你会发现根本就不会再提交表单了，为什么？因为我们的方法返回了，不再往下执行了，这是对的。

好了，那既然这是对的，那我们如果写上呢，比方说写上din，然后我们再往下看呢，点登录，你会发现它会提示你登录的密码不能为空，请输入，这也是对的，因为你确实没有输入密码吗？好，我点确定，你会发现他也没有提交表单说明啊，这也是对的，所以你只要把我们用户名和密码我们给他写上，那这个时候我们点击登录就可以了，我们这里并没有把密码给它隐藏，我们是希望同学们知道我们写的是正确的，否则呀，那我们可能啊，要把这个密码隐藏的话，万一不小心写错的话，可能就麻烦了，我们后面再改啊，呃，行了，现在我们简单的验证已经没有问题了，那接下来我们就开始要真正的提交表单了，那你提交表单的话，那你得有表单呢，所以我们往上来看，那么上面我们给表单。

增加一个ID属性，我们叫log in，然后我再增加一个action，等于这个是我们要提交的地址，我们就写上咱们叫做do log in就可以了，你这么写了以后，它会向服务器发送一个do login的请求，叫执行登录，那我这样的话在后台就可以接收到请求来。处理我们的登录逻辑，然后我这里呢，再加上一个属性叫method，我们等于post。Method的属性，它表述的是我们数据的提交方式，我们采用post方式来提交，那好，这些写完了以后，现在我就准备真正的来提交表单了，我把这个注掉，把这个注掉以后，Dollar符，我要把表单的元素给它取到，我们叫log in for，然后点submit表单，它提供了一个submit的方法。

好了，那我写完以后，只要我点击按钮，那么我的数据就会走到后台。