JavaScript之表单验证。

免费少儿编程开课啦，同学们好！今天分享的知识是表单验证。在网页开发的过程中经常会遇到需要前台提交数据的情况，比如登录、注册用户、填写资料等。如果将前台的数据直接提交至后台处理，一是会加大用户的等待时间，二是会增加服务器的负担。所以这时通常会在前台使用JS将用户数据的格式先验证一次，如果用户填写有错及时提醒用户修改。这就是本节课的内容，还是结合实例讲解。

·首先是四个文本框，分别需要用户填入姓名、年龄、手机号、备用手机号。前台验证时一定要注意一点，在提交按钮的onClick事件中加上return关键字来判断前台验证函数的返回值。如果函数返回true，那么代表验证通过，开始提交。如果函数返回false，则中断提交操作，交由用户再行修改。在这里点击之后转交给CheckForm函数处理。

·在CheckForm中，首先取得了四个文本框中用户输入的值，分别保存在4个变量中。这个trim以前没见过，它的作用是去除文本前后空格，因为空格也占空间，这是防止极端情况。在去除了空格后，用了逻辑或运算判断，只要四个值有一个是空的，也就是用户没有填写，那么就提示用户并中断函数执行，返回false。这里也可以不写false，直接写一个return也行。

·判断四个值都不为空后，使用上章讲过的正则表达式，反斜杠d代表数字，大括号中的2代表数字的长度。合起来的意思就是判断变量o1，也就是年龄框中用户输入的值是不是2位的整数。如果不是，则提示用户年龄必须是2位数字，并将焦点移动至年龄的输入框中方便用户修改数据。

·最后中断函数返回false中止提交，严格来说还应该判断o1的值是否大于等于18，你们可以试一下自己写。

年龄验证通过之后，继续判断手机号值p1是否是11位的数字，也就是手机号格式是否正确，只需要简单的修改正则大括号中的值为11即可，和年龄的正则没什么区别。

继续验证备用手机号值p2，在这里我就没有使用正则，而是使用了常规的判断语句。如果说p2的值的长度不等于11或者p2不是数字，那么就提示用户格式不正确。从这里你们可以对比到，使用正则代码真的要简单很多。虽然常规判断也行，但是代码更长，速度也会稍稍慢一点，但代码可读性和逻辑性更强。在入门的情况下，还是建议使用常规判断，后面再追求正则的效率。

最后一个判断也是使用的正则，这个要稍微复杂一点。首先固定了第一位必须是1，因为国内的手机号第一位一定是1，第二位则可以是3至9中的一个，1和2不行，最后跟上9位的数字，加在一起就是11位数字。简单验证了手机号的格式。

如果所有的JS验证都通过，那么提示成功的信息，并让函数返回值为true，正式开始向后台提交数据。除开JS的验证外，HTML中也提供了相应的属性限制，比如max、命令、mark、sling、pattern、required、type、disabled、enabled等。它们的目标是统一的，都是希望能让普通用户在前台时就填写正确。

表单验证是非常重要的，虽然前台的验证均不可靠，但仍可以为用户和服务器节约大量的时间和资源。