23、尚硅谷_SSM高级整合_新增_jQuery前端校验完成.avi原创

那么刚才呢，我们这个新增的这个基本功能，我们就完成了。那么这个新增呢，我们需要细化一下，那么这些数据我一定需要咱们这个校验完成以后再提交给服务器，诶比如这个email必须是合法的，以及我们这个员工名字也需要是合法的。所以说呢，我们先来看咱们这一块的逻辑，哎。当我们这个用户输入数据以后，哎，我们不能去直接完成保存。我们应该是啊，输入数据并进行校验。并进行咱们这个校验，当我们这个校验成功以后，哎，我们再去服务器完整保存好，那我们先来做我们这个校验功能，来到我们这个页面。这是点击保存。这个呢是点击保存。而这个保存员工方法呢，我们是一上来就直接发HS请求的，所以说呢，我们一上来，哎，应该是咱们先进行，哎先。

对，咱们这个要提交给。要提交给咱们这个服务器的数据进行校验。所以说呢，等我们校验成功以后，我们再发这个AJS请求，比如呢，我们有一个方法叫。那么这个and for啊，校验我们这个添加表单的方法，那么这个方法呢，如哎，校验成功啊与否会返回出货false，如果这个返回了，咱们这个处才往下进行，如果返回false，校验失败了，那我们这个就不往下走了啊，我们直接return就行了。我们这一块呢，不管return true还是false，把我们这个方法啊结结束了就行。那么行，我们这一块呢，我们来看咱们这个。

校验方法，我们把这个校验方法呢，就写在咱们这儿。方式。好，我们定义咱们这个方法，哎，这个方法呢，就是校验咱们这个表单数据。校验表单数据呢，我们需要校验的有这么两项，第一项是我们这个员工的名字，第二项呢，是咱们这个员工的邮箱。所以说呢，我们校验，那么就应该是先拿到咱们这个要校验的数据。然后呢，我们校验呢，可以使用使用咱们铁壳中的这个GS中的咱们这个政策表达式。来进行校验就行了，好，我们先来看我们校验第一个字段，就是我们这个。用户名，哎，咱们这个员工姓名这个字的这个呢，正好有一个ID，我可以拿到他的这个ID值。我通过这个ID拿到我们要校验的这项数据。

好，井号，哎，这是我们输入框的数据，Y6获取咱们这个输入框的文本值。就叫EP。好，这是我们要校验的咱们这个员工姓名，那么这个正则表达式怎么写呢？好，我们可以先写一个咱们这个正则表达式来校验我们这个name的。这正则表达式呢，我们直接可以来到我们这个解克瑞文档中，我们来看。这个解文档中呢，给我们提供了一些常用的正则表达式，诶，比如往下翻来，这有一个用户名，可以允许0A到Z，零到九下划线，横杠三到16位。这么难？啊，这这里边呢，我们字母的话，还允许大写的A到Z，我们这么来写啊，那么这个解释呢，就是小写的A到Z，大写的A到Z，或者零到九，或者下划线，或者短横杠三到16位，我们要求。

六到16位。那么这个呢，我们也让他允许中文吧，所以说呢，这个正则表达式啊，这样是不够的，我们让他再来允许咱们这个中文。这个呢也是非常简单，我们来可以看杰克文档，你看啊，这是unot中中文汉字编码的范围。把它如果是中文的话呢，好，这是前边的这个正则表达式，我们这么括起来。我们要允许中文。中文呢，我们写在后边的这个正则表达式，哎，以任意中文开始，我们呢，如果是中文，我要求它可以两到五个中文字符，那么这两个正则表达式呢，我们用或者连接，哎，我们这一块呢，都有咱们这些符号，那么大家写的话呢，也可以按照这一块的方式来咱们这个写正则表达式，好，那么呢，我们来看这个正则表达式写好以后。

怎么使用呢？哎。直接我们调用咱们这个正则表达式。它的这个test方法来测试我们这个字符串是不是满足要求，那可以alert一下我们这个测试的这个值。测试的这个值啊，我们呢，永远先来给他返回false，让他不进行A提交好不进行下面的流程，我们来测试一下。刷新。点击新增，好，我来写一个点保存，我们来看，这就是false false的原因，我们是要求六到16位，好，我们来AAA，好，我现在呢写上六个a.a这就是处或者呢两位中文，比如呢，咱们指张三。张三，也行点保存，哎，这就是处，只要满足表达式的返回处，否则返回false没问题。我们接下来把这个逻辑做完整，也就是说呢，如果咱们这个校验失败，哎，我们这一块如果校验失败。

失败，哎非好，如果校验失败呢，我们给他提示alert。提示我们这个用户名，用户名可以是二到五位。中文或者三到十十六位，哎，不是三是六到16。六到16位，咱们这个英文。和数字的组合。说呢，给他提示这一串信息，那么呢，我们接下来这个校验失败了，没必要再往下走了，直接。啊，如果这个没有校验失败，那么我们继续走下边儿校验，校验咱们这个邮箱。信息。好，那么这个邮箱呢，我们还是一样把邮箱的这个值拿过来，哎，我们表单上填的邮箱，邮箱在这email。

Email呢？我们给了一个ID，叫email and input。拿到他的纸。好往下走，那这个表单校验。好，在这儿我们来校验邮箱。获取到邮箱这个表单项的值点Y6。这是拿到我们这个email的值。而这个email的值呢，我们用email的正则表达式八六，比如呢，我们叫咱们的email。好，Email的正则表达式呢，我们也从解文档中我们看这有我们就直接拿到就行。好。这个正则表达式我们就拿到了，那么接下来我们还是一样的逻辑。如果。

Email校验失败了，就说呢，我们这个正则表达式。来检测我们这个email的时候，哎，他给校验失败了，失败了，那么呢，我们给他提示咱们这个邮箱格式不正确。正确不正确，然后呢，啊，我们也就直接程序返回。哎，一切就正常，都校验成功了，我们再返回处，好，那我们这个校验的逻辑就写完了，我来刷新。刷新新增来写一个非法的，好我点保存，诶直接给我们提示这个校验失败的信息，包括呢，如果我们这一块写对了邮箱，我们啊写的不对，好他说邮箱格式不正确，我再来点保存，诶这个邮箱格式也是不正确。如果我们都写正确了。按硅谷点com点保存，诶它这个就保存成功了，那我们这个就做完了，但是呢，我们这个校验啊，我们如果来这么来提示alert弹框的话啊，那就有点难看了，比如呢，来写上三位波字符，我点保存这个弹框有点难看，那我们这个boori中来看。

这一块呢，我们在全局CSS样式表单里边有咱们这个，哎，校验状态，检验状态，比如说呢，你看如果校验失败的，我们应该红框表示，并且呢，显示一些失败信息，我们就直接显示在表单上，别alert了。那么这个做起来也非常简单，我们来看，他说，哎，要想对我们表单控件进行校验，比如说呢，他们定义了一些样式，如果是这个警告错误，以及校验成功，把这些样式只需要添加到这些控件的副元素上。比如说呢，我们这个input框的这个负元素上，哎，这input框的负元素只要有这个类，那么这个框就会跟着变绿变红，包括呢，我们这个有了这个类以后，我们这个富元素里边的这些form control啦，Control label啦，或者咱们这个help block这些元素，哎，比如我们这个SPA标签，它是help block，它里边的文本值，诶这个文本值也会跟着变化，我们就来做这个显示，这个显示呢比较漂亮一点。

好，我们下一节课来把这个校验美化一下。