26、尚硅谷_SSM高级整合_新增_Ajax校验用户名细节处理.avi原创

好，那么刚才呢，啊，我们把这个新增时候的这个用户名重复校验，我们就做完了，接下来呢，我们就将校验进行到底，不过呢，进行之前大家也看到了，我们刚才校验的时候其实还有一些小问题，什么问题呢？哎，我们来看啊，比如我来校验三个A，这个用户呢，在我们数据库里边确实没有，诶我们发as请求给我们返回用户名可用，但是实际我们也知道这三个A根本就不满足六到16位哎这个要求，所以说我们点击保存的时候，前端一校验又不通过，那么刚才明明都说用户名可用了，我一点保存又不通过这个规则啊，没有统一起来，所以说看起来比较难看，那我们做的最嗯完美的解决方案呢，应该是在我们用户名来进行后台校验的时候，也给他按照这个规则先校验这个。

校验成功以后，我再去数据库里边检查用户名是否可用，我们就把刚才这个方法再来细化一下。来到用户名重复校验，诶就是这个check user这个呢，我们检查用户名之前，我们还是一样啊，先判断用户名，先判断咱们这个用户名。是否是咱们这个合法的表达式，那么这个是否是合法的表达式呢？我们后端前端那就统一起来，这一块呢的做法有很多，大家也可以发Ajax之前哎，用前端进行校验，但是呢，我们在后端也来校验一下，判断用户名是否合法，那一样就是来到我们这应对页面，诶我们在这校验表单数据用户名校验的正则表达式是这样的，我们把相同的正则表达式我们也放在后端让它使用一下，好所以说呢，我们在这里边来，我们可以先声明一个正则表达式，这个好，这个正则表达式的内容呢，就是这么一堆，哎，我们Java里边正则表达式没有这个斜杠啊，这个斜杠是我们GS里边正则表达式的，哎，中间加的正则表达式的斜法，那我们这一块呢，把中间的这个正则表达式拿过来。

拿过来以后呢，来我们先来看一下我们这个用户名是否匹配这个正则表达式，死转里边直接有一个方法叫点，哎，我们有一个叫match，哎，然后把这个正则表达式我们就传进来，传进来以后呢，它会返回触或false。出就表示匹配成功，Force就表示匹配失败，所以说呢，我们这一块如果他匹配失败了，我们也直接给他返回错误，而错误的提示信息呢，我们可以给它填上加一个我们错误的提示，比如呢，咱们这个va的message啊，我们验证的这个message，校验后的这个message呢，就是啊我们这个用。

户名必须是咱们这个，呃，六道。16位。六到16位，咱们这个数字和字母的组合。或者二到二五位中文好，我们呢跟前端的写成不一样的，这样大家就知道哪个是后端返回的这个错误消息，那么如果是这一块的校验，哎这一块我们这一块如果规则校验成功了，才有必要进行数据库交易，哎，数据库用户名。重复校验。好，那么呢，如果失败了，我们也给他添加咱们这个失败的，哎，校验的错误消息，这失败的消息呢，就是用户名不可用。

名不可用啊不可用，然后呢，我们来到咱们这一块，我们来测试。好，来到这儿，我们再来测试我们新的规则，新的规则呢，会返回，哎，会以多加了一个正则校验，这个正则校验呢，我们来到in this首页。来到这个首页。也就是说当我们这个文本框，哎，咱们内容变化以后，我们来看啊，刚才的那个监听的这个用户名校验事件，好在这儿当文本框内容变化以后，他发as请求进行校验，校验以后呢，哎，如果是成功的，他弹用户名可用，如果是失败的，那就呢，我们不谈固定的信息了，我们应该是从result中。取出什么呢？哎，我们用户的信息都在extend里边，Extend里边呢，我们给extend的这个map中添加了一个va message来弹出它，这样的话呢就行了，我们来重新。

哎，看我们的这个规则，我点新增AAA走，诶这一块呢，就是我们后端校验是错误的啊，我们都没给数据库发请求，而我们要发请求呢，必须后端合法，我再去发请求，诶用户名可用，那么这个逻辑呢，那就写的不错了，那么呢，我们再来点保存，那这邮箱格式是不正确的，好，我们点新增这块，其实还有一个问题，我们把表单的内容重置了，但是表单的这个之前的校验样式还没清空，所以说我们在这一块注意一下。刚才呢啊，我们之前在在我们的这个好新增按钮弹出框这块呢，我们只重置了表单内容，我们应该是表单完整重置，这个完整重置呢，包括表单的数据以及表单，表单的数据以及表单的样式都是回到他之前的状态，那么呢，我们假设呢，就有一个完整的充值方法，这个function，咱们这个是set，咱们这个for。

好，这是一个完整的重置，要重置哪个表单，我们可以把这个元素传进来，我们就调用这个表单重置方法。好，我们要重置这个表态。哎，这个表单也就是说呢，哎，就是我们这个表单。好，我们拿到这个表单。这个表单哎，我们是会传进来，因为我们解壳没有reet方法，所以说呢，我们调用JS对象的reset，这是重置表单内容，好我把它除掉了，那么接下来呢，还应该清空。清空。清空表单样式，这个表单样式呢，也是非常简单，就是这个元素。

我们来看啊，在我们这个表单中呢，所有的啊，我们应该给所有的元素啊，我都直接remove掉class，这个最最快了remove class，因为我们这个成功失败会有两会有呢两种咱们这个class样式。Remove，一种叫hands error，一种叫has success，不管你谁你只要有这个样式，我都给你移除掉啊，这是第一种，第二种呢，还是我们这个表单里边。哎，表单里边所有的我们来看啊，应该是表单里边所有的我们这个辅助标识。哎，我们来检查元素，检查元素下边呢，都有一个class为help block的元素，这个help block的SPA呢，我们都给它清空内容啊，我可以给他放的找到咱们这个表单中所有的咱们这个信息提示框，哎，直接呢把它里边的文档清空，这样呢也重置了样式，好，这个逻辑我们就比较完整了，清空。

表单样式及内容。好，我重新来刷新，那么即使以前的这个校验状态，我点保存是这样的，来我关掉，再新打开这个校验状态，应该不会有那这块的，哎，我们内容清了，但是我们这个汉字error好像没清掉，我们来看啊，应该是咱们这个表单，不是这个表单remove class，而是表单后边的所有哎，你任何元素。只要有这两个的啊，找到它下边的所有啊，不是这个表单，好，我们重新来刷新。好，这个状态信息在这儿，我再来点新增，哎，他们的之前的校验信息也就去除了，好没问题，那么接下来呢，我们就把校验进行到底。