24、尚硅谷_SSM高级整合_新增_校验信息显示优化.avi原创

接下来呢，我们这一节课就来完成咱们这个校验信息的美化显示，那么现在这个如果校验错误，我们点一个保存，是这个弹框，我们做成呢，咱们这个rip中规定的咱们这个比如错误以后，咱们这个红框显示，或者呢还有一些红色的错误信息提示。也很简单，就是给当前元素，哎，当前input框的副元素加一个人家规定的这些类汉字A啦，汉warning汉success就行了。行，我们来到我们的程序代码，那这个a lot弹框提示我们就不要了。我们呢，现在是如果校验错误，哎，这是我们的input框，人家说了给input框的元素，所以说呢，我们直接parent。找到它的元素，给元素呢？校验失败，添上这个汉字error的class，好，我直接点and class。

Error。就行了，那么这个关键这个用户名这些错误提示信息在哪显示呢？我们来看啊。像我们这个校验成功，诶这个框下就显示一个错误这个信息提示，这个信息提示呢，它是在这个span中放的，而这个span class叫help block，上边人家也说过，只要呢，我们给副类添加了一个汉success汉error等等这些，哎我们副类里边包含的这些control level form control以及help block，诶就是它都会跟着变色。好，那我们来就来写给这里边给我们每一个input框，好，我就呢，直接放在咱们这个input框中。我们要校验的员工姓名的这个input框，给它下边放一个span span的内容呢，我们先没有啊，内容呢，我们一会要填ID，我们也不要，就把这个SPA放在这儿把。

包括呢，我们给email，如果校验失败，他们的错误信息就选在这，好，那么接下来我们就在这儿继续来写我们这个校验。如果咱们这个用户名不正确，首先添加错误的这个汉字error，另外呢，哎，我们当前元素。走。我们来看啊，这个当前元素，我先来刷新页面。来刷新页面，员工添加咱们这个当前元素，它紧跟着它下边有一个span span里边是错误提示信息，那我们来找到咱们这个当前的这个，呃，输入框的next。它的，哎，紧邻的咱们这个span元素给这个SPA元素的文本值，哎，我们设置成我们的提示信息。就这样。那包括呢，哎，如果我们成功，哎这是我们失败，如果成功以后呢，我们这个，哎当然就不是这个错误信息显示了，我们就变成正确的信息，哎比如呢，我们就叫汉字success。

汉字success啊，包括呢，我们SPA里边的内容，哎，如果我们SPA里边有内容，我们也应该给它清空掉。啊。那么呢，其他的也一样，当邮箱格式不正确以后，那我们的这个邮箱我也一样，这是邮箱的input框，找到它的负元素，添加上咱们这个错误的这个类就行了。包括呢，错误信息的提示。也是一样好找到他，哎。紧邻的咱们这个span元素啊，这个SPA元素里边的文本值就是我们要提示的错误信息，邮箱格式不正确。如果校验成功了呢，哎，我们就来写，哎，把它变成成功状态，成功状态呢就是啊，咱们这个复元素添加汉字success。

接下来是咱们这个用户输，哎，咱们这个email框的汉词access，包括呢，咱们这个。里边的这个SPA。如果我们清空。好，接下来呢，我们校验美化就写成这个样子，我们来看对不对。来刷新，刷新以后呢，我点新增，好，我先来一个校验失败的，这个失败点保存，诶用户名校验失败，错误信息显示在这儿，不错，我们来用户名整一个校验成功点保存来邮箱，接下来校验邮箱，邮箱格式不正确。死班是清空了，我们来看啊，我们这个怎么还是红框呢，右键检查元素。哎，这一块我们来看。来看。他这个汉success添在了我们之前校验失败汉字error之后了，其实也是我们之前就像AJ获取数据在页面展示啊一样，我们要做一个新的样式之前，我们应该把旧样式给清空掉，否则呢，这个就是在之前的基础上再重复添加的，所以说呢，我们在这一块不管怎么样，每一次显示咱们这个数据之前，我们都应该。

应该咱们这清空这个元素。元素之前的样式。啊，那么这个校验啊，都是一个套路，代码都一样，那我就直接抽取出来。抽取出来，比如呢，我们这个方法，哎，我们就叫受，哎，显示我们校验的这个提示信息，受va message。这个要校验的元素啊，我们让你传过来element，你可以直接传入咱们这个元素的选择器，或者咱们这个盗墓对象都行，然后呢，把我们这个校验你是成功了还是失败了传进来，哎，包括呢，你成功失败你要显示的提示信息传过来。

这一块呢是status，咱们这个状态信息，我们在这呢做一个判断，哎，如果我这个status。是咱们这个校验成功了，Status。啊，那么呢，我们就怎么显示，否则如果呢是校验失败了。如果那这个呢，L。我们校验失败了等于status，那么呢，我们怎么显示好那这一块的方法，这个校验失败呢，我们就不这么写了，我来调用我们这个方法。这个方法呢，我们先来。写它的这个调用。我们来调用这个方法，这个方法里边呢，传三个参数，第一个你正在校验哪个元素。好，就是它我们来直接传入我们这个元素的选择器，第二个呢，就是我们这个校验状态，这是一个失败状态，我们直接写。

好，我们如果失败以后，我们要显示的错误信息。啊，这些有用的值我们都拿过来。那么呢，我们这个实现，哎。这两句话就应该是这个方法的实现，好来到咱们这个方法。如果失败了，就是这两句话，只不过呢，我们这个校验的元素是我们传过来的。啊，我们这个也是一样，是我们过来的，我们失败以后显示的信息也是我们传过来的。都放在这儿，那么呢，这是校验失败，校验成功呢也一样。我们成功来调用还是调用这段代码？成功，然后呢，只不过我们这一块显示success。然后呢，我们成功以后，没有任何提示信息就在这儿就行了啊，那么呢，这两句话应该是成功的实现。

你点进去。好，成功的实现。这是我们当前元素。当前元素，以及它的这个要提示的咱们这个消息。好，还有这个status。哎，不是，还是我们这个当前元素啊。我们把这个方法就抽取了，那么这一块呢，包括我们这个邮箱，那我也就不这么写了，我们直接调用这个方法，说咱们这va message，那校验的元素就是它。而这当前在这一块是一个错误状态，我们直接写艾校验失败。好，失败以后的提示信息就是邮箱格式不正确。那么这两句代码我呢就不要了。主角。包括呢，下边我们这个是校验成功的受咱们这个message还是我们这个元素。

然后呢，状态它是一个成功状态。Success啊，成功了以后呢，是不显示东西的，好放在这儿，那么这一块呢，我们就把它也直接删除掉。那么这个呢，方法我们就抽取出来了，抽取出来还是之前的咱们这个问题，比如说呢，当我们再一次。哎，我这有一个错误，我点一个保存这校验错误了，即使我们正确以后，诶是在原来的基础上。又去添加的，所以说呢，哎，有hands字error，还有喊success，我们应该把它的这个呃状态清除啊，回到初始状态，所以说呢，我们在做这一块校验之前，不管成功失败我们都应该清除啊，当前。元素。教练状态。那么这个当前元素呢啊，我们要清除给负类里边，你会给负元素里边你添了这个类或者这个类，所以说呢，我们清除状态也简单，就是给它的副元素里边，把我们啊未来添的这几个，如果有我们都移除掉。

如果你听了has success。或者呢，我们移除多个类空格表示就行了，或者汉字error，只要有这两个类我们都给它移除啊，包括呢，我们这个当前元素，它的下一个SPA里边的文本内容也应该都是默认没有的。好，这是我们清除状态，那我们接下来再来看。发行。好，我点新增，当我第一次校验失败点保存，哎，有失败信息，当我们校验成功以后，我再点保存，诶之前就清空了，然后新的信息就进来了，好没问题，那我们这一块当我们都成功以后，比如呢，我们保存一个我的命运的他开，诶我随便写啊，或者呢，我们来试一下中文张三我们一直没写过，那么邮箱呢，我们这一块如果不写校验失败，我们写一个正确的。

张三。硅谷。点com我们这块呢，整个都校验成功以后点保存，诶那直接就是来到我们这个保存是没问题的，行，那我们这个校验我们就写好了，把我们这些啊显示校验，把这些错误信息。显示。校验结果的，咱们这个提示信息，把这些呢，我们就抽取出来了。啊。这个校验呢，看起来就比较漂亮了，但是我们这个校验还没完。我们来看。在咱们这个员工新增的时候，诶，比如我点新增，那如果我们输数据，我们之前已经保存过杰瑞，或者呢，我们来到末页之前已经有了张三了，我如果再输张三。我还要保存张三，那这一块呢，我点保存，哎，他也进去了，所以说呢，我们应该去数据库，哎，保存的时候去先做一个校验。

看我们数据库中有没有张三啊，防止我们添入咱们这个重复数据。所以说呢，点击新增的时候，那我们这个张三这个用户名，哎，我们在写完以后，应该发送请求给服务器，先看一下这个用户名存在不存在，如果它存在了也算校验失败，哎我们就不能再点保存了。所以说呢，我们下一节课来做咱们这个啊，服务端的Ajax校验用户名是否重复。