如何进行表单验证

如何进行表单验证（即时输入验证，失去焦点验证等），他们各自的优缺点是什么？

一.背景介绍

JavaScript 可在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。以减轻后台数据传送压力，提高数据传送的质量和效率。

二.知识剖析

常见的表单验证内容

1.是否填写

2.长度限制

3.数据类型是否正确

三.常见问题

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

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

四.解决方案

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

1.js原生写法

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

菜鸟教程demo

2.Bootstrap-Validator插件写法

首先需下载插件库：源码

调用插件后，就可以直接使用相应指令进行表单验证，如：message、fields、feedbackIcons

3.angularJs ng-show写法

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

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

需引用angular-messages.js文件，然后就可以直接用ng-messages. ng-message. 指令进行直接验证和显示

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

五.编码实战

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

                
                $(document).ready(function() {
    $('#defaultForm')
        .bootstrapValidator({
            message: '这个值是无效的',
            //live: 'submitted',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '这个用户名是无效的',
                    validators: {
                        notEmpty: {
                            message: '用户名必须填写'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '用户名字符长度必须在6-30之间'
                        },
                        /*remote: {
                            url: 'remote.php',
                            message: 'The username is not available'
                        },*/
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '用户名只能由字母、数字、点和下划线'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱必须填写'
                        },
                        emailAddress: {
                            message: '邮箱无效'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '必须填写密码'
                        }
                    }
                }
            }
        })
                
            

3.angularJs ng-show写法

<input
        type="text"
        ng-model="myInput"
        name="username"
        placeholder="Username"
        ng-maxlength=15
        ng-focus="focus1=true"
        ng-blur="focus1=false"
        required>
<div ng-show="formation.username.$dirty && formation.username.$invalid">
    <div>渣渣，写错格式了</div>
</div>

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

<div class="login_redWord" ng-messages="loginForm.userName.$error">
    <div ng-message="required">用户名不能为空</div>
    <div ng-message="minlength">用户名长度至少为3</div>
    <div ng-message="maxlength">用户名长度不能超过10</div>
</div>

6.拓展思考

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

教程

7.更多讨论

8.参考文献

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

angularJs的表单验证

BootstrapValidator中文文档简略手册

ng-show指令

AngularJS 输入验证

bootstrap validator插件使用流程

HTML 5 input required 属性

鸣谢

感谢大家观看

问答互动：

1.$valid是什么含义，如何使用？

当输入的内容合法的时候，$valid为true。 配合ng-show可以使用

<div ng-show="formation.username.$valid">
    <div>合法的输入</div>
</div>

2.项目中一般使用什么样的表单验证？

表单验证的形式上一般按需求来调整，验证内容一般配合 dirth 和invalid来展现 被操作过并且非法的内容

<div ng-show="formation.username.$dirty && formation.username.$invalid">
    <div>渣渣，写错格式了</div>
</div>

3.ng-focus 的用法？

在ng-focus内可以放一个Boolean验证，验证的时候可以决定是否聚焦验证还是失焦验证

ng-focus="focus1=true"