【武汉-第75期】如何进行表单验证？

IT修真院武汉分院

      大家好，我是IT修真院成都分院第二期的学员冯馨雨，一枚正直纯洁善良的前端程序员。今天给大家带来的是表单验证的几种方法。

一.背景介绍

      JavaScript 可在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。用户输入的东西是千奇百怪的，不能将不正确的数据随便传入后台，前端的验证足够完善就能减轻后台数据传送压力，提高数据传送的质量和效率。

二.知识剖析

常见的表单验证内容 

            1.是否填写

            2.长度限制

            3.数据类型是否正确

三.常见问题

1.有哪些方法可以写表单验证?

2.不同的方法分别是什么写法?

四.解决方案

      主要介绍三大类写法，分别是：js原生写法、各类表单插件的写法、angular js的表单验证写法。不推荐js原生写法。

1.js原生写法

js原生写法主要用到if语句，配合正则表达式。代码量大，验证步骤复杂。

Demo-JS-Validation：http://119.10.57.69:880/jnshu066/fengxinyu/ppt/validation/js-form.html

2.Bootstrap-Validator插件写法（推荐）

首先需下载插件库：https://github.com/nghuuphuoc/bootstrapvalidator

Demo-BootstrapValidator：http://119.10.57.69:880/jnshu066/fengxinyu/ppt/validation/bootstrapvalidator-master/demo/submitHandler.html

注：若报错，请清除缓存多刷新几次

3.angularJs  ng-show写法

利用ng-show指令，规定满足某些情况时，出现展示信息；用该指令内的$dirty、$valid 、$invalid 、$pristine属性来确定具体的情况。

Demo-angular ng-show：http://119.10.57.69:880/jnshu066/fengxinyu/ppt/validation/angular js validation.html

4.angularjs ng-message(angular表单验证插件）（推荐）

需引用angular-messages.js文件，并且在控制器中注入，然后就可以直接用ng-messages.  ng-message. 指令进行直接验证和显示。

这种方法是代码量最少，验证步骤最直观的，但前提是你所写的页面需要用到angular框架。

Demo-angular ng-messages：http://119.10.57.69:880/jnshu066/fengxinyu/ppt/validation/ng-message.html

五.编码实战

请参见上述demo

六.扩展思考

正则表达式怎么用？怎么写？

http://www.runoob.com/regexp/regexp-tutorial.html

七.参考文献

基于jquery，bootstrap数据验证插件bootstrapValidator 教程：

www.cnblogs.com/v-weiwang/p/4834672.html?ptvd

angularJs的表单验证：

https://www.oschina.net/translate/angularjs-form-validation

BootstrapValidator中文文档简略手册：

http://www.75271.com/957.html

ng-show指令：http://www.runoob.com/angularjs/ng-ng-show.html

AngularJS 输入验证：http://www.runoob.com/angularjs/angularjs-validation.html

bootstrap validator插件使用流程：http://jingyan.baidu.com/article/c843ea0bb2bf3c77931e4ad4.html

HTML 5 input required 属性：http://www.w3school.com.cn/html5/att_input_required.asp