FormValidation表单验证

原创 2018年04月16日 09:32:30

工作中经常会遇到各种表单字段验证,今天介绍一下,方便好用的FormValidation,

1)首先看一下FormValidation的官方文档结构:

formvalidation/
├── dist
│   ├── css
│   │   └── formValidation(.min).css
│   │
│   └── js
│       ├── framework
│       │   ├── bootstrap(.min).js
│       │   ├── foundation(.min).js
│       │   ├── pure(.min).js
│       │   ├── semantic(.min).js
│       │   └── uikit(.min).js
│       │
│       ├── language
│       │   ├── de_DE.js
│       │   ├── en_US.js
│       │   └── ...
│       │
│       ├── formValidation(.min).js
│       └── formValidation.popular(.min).js
│
└── src
    ├── css
    │   └── formValidation.css
    │
    └── js
        ├── framework
        │   ├── bootstrap.js
        │   ├── foundation.js
        │   ├── pure.js
        │   ├── semantic.js
        │   └── uikit.js
        │
        ├── language
        │   ├── de_DE.js
        │   ├── en_US.js
        │   └── ...
        │
        ├── validator
        │   ├── base64.js
        │   ├── between.js
        │   ├── callback.js
        │   └── ...
        │
        ├── base.js     // The main plugin source file containing the base class
        └── helper.js   // Helper class

2)文档分析

  1. src路径由原始文件组成,dist路径则由压缩的各个文件组成。
  2. src/js/validator路径由多个内置验证组成,而dist/js/formValidation(.min.).js包含了所有的内置验证,dist/js/formValidation。popular(.min.).js只包含大部分流行的验证。
  3. src/languagedist/language为语言包

3)引用:

默认的库包含在了vendor路径下,并且jQuery版本要求 V1.9.1 或以上。

<!-- Bootstrap CSS v3.0.0 or higher -->
<link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">

<!-- FormValidation CSS file -->
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">

<!-- jQuery v1.9.1 or higher -->
<script type="text/javascript" src="/vendor/jquery/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- FormValidation plugin and the class supports validating Bootstrap form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/bootstrap.min.js"></script>
值得注意的是:bootstrap官方的bootstrap(.min.)js与formvalidation官方的bootstrap(.min.)js是两个不同的js文件。

4)写验证表单
如果你的表单没有按照规定格式写的话,chrome浏览器会报错:
<pre>
Uncaught RangeError: Maximum call stack size exceeded
</pre>

  • 对于复杂的表单,要使用 row 选项
  • 但是要注意,不能 submit 按钮使用 name="submit"id="submit",否则表单不会是验证后再提交。

5)调用插件

$(document).ready(function() {
    $(formSelector).formValidation({
        // Indicate the framework
        // Can be bootstrap, foundation, pure, semantic, uikit
        framework: '...',

        // Other settings
        excluded: ...,
        icon: ...,
        message: 'This value is not valid',
        trigger: null,
        fields: ...
    });
})

例如,我工作遇到的一个多个字段的验证例子:

<!--表单验证-->
<script>
    function init_validator() {
        $("#form1").formValidation({
            framework: 'bootstrap',
            // {#        excluded: [':disabled', ':visible'],      // 只有禁用的表单不验证,取消隐藏不验证(tagsinput插件会隐藏原表单)#}
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
// {#                trigger: "blur",  // 失去焦点验证#}
            fields: {
                project: {  // name="project" id="project"
                    validators: {
                        notEmpty: {
                            message: '未选择科目'
                        }
                    }
                },
                press: {
                    validators: {
                        notEmpty: {
                            message: '未选择出版社'
                        }
                    }
                },
                book: {
                    validators: {
                        notEmpty: {
                            message: '未选择教材'
                        }
                    }
                },
                cls: {
                    validators: {
                        notEmpty: {
                            message: '未选择班级'
                        }
                    }
                },
                start_date: {
                    validators: {
                        notEmpty: {
                            message: '开始时间不能为空'
                        },
                        date: {
                            message: '不是有效日期(例:2017-01-01)',
                            format: 'YYYY-MM-DD'
                        }
                    }
                },
                end_date: {
                    validators: {
                        notEmpty: {
                            message: '结束时间不能为空'
                        },
                        date: {
                            message: '不是有效日期(例:2017-01-01)',
                            format: 'YYYY-MM-DD'
                        },
                        callback: {
                            callback: function (value, validator, $field) {
                                var time_limit = $("#book >option:selected").data("time_limit"),
                                    start_date = new Date($("#start_date").val()),
                                    end_date = new Date($("#end_date").val());
                                if (time_limit && start_date) {

                                    start_date.setMonth(start_date.getMonth() + time_limit)
                                    if (end_date > start_date) {
                                        return {valid: false, message: "设置课程时间不能大于当前选择教材的课程时间" + time_limit + "个月"}
                                    } else {
                                        return true
                                    }


                                }
                                return true

                            }

                        }
                    }
                },
                lesson_num: {
                    validators: {
                        notEmpty: {
                            message: '总课时数不能为空'
                        },
                        regexp: {
                            message: '请输入有效课时数',
                            regexp: /^\d{1,3}$/
                        }
                    }
                },

            }
        })
    }

    // 表单验证
    function init_validator01() {
        $("#form1").formValidation({
            framework: 'bootstrap',
            // {#                excluded: ':disabled',      // 只有禁用的表单不验证,取消隐藏不验证(tagsinput插件会隐藏原表单)#}
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            trigger: "blur",  // 失去焦点验证
            row: {
                selector: '.col-lg-4'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '姓名不能为空'
                        },
                        regexp: {
                            message: '姓名必须为中文',
                            regexp: /^[\u4e00-\u9fa5]+$/
                        }
                    }
                },
                phone: {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        regexp: {
                            message: '不是有效的手机号',
                            regexp: /^\d{11}$/
                        }
                    }
                },
                username: {
                    validators: {
                        notEmpty: {
                            message: '请先生成账号'
                        },
                        regexp: {
                            message: '不是有效账号',
                            regexp: /^jms\d{11}\w*$/
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        regexp: {
                            message: '密码必须是数字和字母组合,且至少8位',
                            regexp: /^(?=.*?[a-zA-Z])(?=.*?[0-9])[a-zA-Z0-9]{8,}$/
                        }
                    }
                },
                repassword: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        identical: {
                            field: 'password',
                            message: '两次输入密码不一致'
                        }
                    }
                },
                address: {
                    validators: {
                        notEmpty: {
                            message: '详细地址不能为空'
                        }
                    }
                },
                province: {
                    row: '.col-lg-3',
                    validators: {
                        notEmpty: {
                            message: '省不能为空'
                        }
                    }
                },
                city: {
                    row: '.col-lg-3',
                    validators: {
                        notEmpty: {
                            message: '市不能为空'
                        }
                    }
                },
                county: {
                    row: '.col-lg-3',
                    validators: {
                        notEmpty: {
                            message: '县区不能为空'
                        }
                    }
                },
                school_name: {
                    validators: {
                        notEmpty: {
                            message: '学校名称不能为空'
                        },
                        stringLength: {
                            message: '学校名称不能超过12个字',
                            max: 12
                        },
                        remote: {
                            url: '/jms/create/school_name_repeat/',
                            type: 'POST',

                            data: {return_style: 'json'}
                        }
                    }
                },
                relate_schools: {
                        excluded: function ($field, validator) {
                            return $("#type")[0].checked
                        },
                    // excluded: false,
                    validators: {
                        notEmpty: {
                            message: '主要关联学校不能为空'
                        },
                        remote: {
                            url: '/jms/create/relate_schools_repeat/',
                            type: 'POST',

                            data: {return_style: 'json', field_name: 'relate_schools'}
                        },
                        // 验证和已添加的其他加盟商的学校是否重复
                        callback: {
                            message: "该学校已经被关联",
                            callback: function (value, validator, elem_obj) {
                                if (value != "") {
                                    // 验证和其他关联学校是否重复
                                    var val_list = value.split(',')
                                    for (var i = 0; i < val_list.length; i++) {
                                        if ($("[name=second_relate_schools]").tagExist(val_list[i])) {
                                            return {valid: false, message: '“其他关联学校”中已添加该学校'}   // 动态返回message
                                        }
                                    }
                                }
                                return true
                            }
                        }
                    }
                },
                second_relate_schools: {
// {#                        excluded: function ($field, validator) {#}
// {#                            return $("#type")[0].checked#}
// {#                        },#}
                    excluded: false,
                    validators: {
                        remote: {
                            url: '/jms/create/relate_schools_repeat/',
                            type: 'POST',

                            data: {return_style: 'json', field_name: 'second_relate_schools'}
                        },
                        // 验证和已添加的其他加盟商的学校是否重复
                        callback: {
                            message: "该学校已经被关联",
                            callback: function (value, validator, elem_obj) {
                                if (value != "") {
                                    // 验证和其他关联学校是否重复
                                    var val_list = value.split(',')
                                    for (var i = 0; i < val_list.length; i++) {
                                        if ($("[name=relate_schools]").tagExist(val_list[i])) {
                                            return {valid: false, message: '“主要关联学校”中已添加该学校'}   // 动态返回message
                                        }
                                    }
                                }
                                return true
                            }
                        }
                    }
                },
                bank_name: {
                    validators: {
                        notEmpty: {
                            message: '开户姓名不能为空'
                        },
                        regexp: {
                            message: '开户姓名必须为中文',
                            regexp: /^[\u4e00-\u9fa5]+$/
                        }
                    }
                },
                bank: {
                    validators: {
                        notEmpty: {
                            message: '开户银行不能为空'
                        }
                    }
                },
                bank_account: {
                    validators: {
                        notEmpty: {
                            message: '银行卡号不能为空'
                        },
                        regexp: {
                            message: '请输入16/19位银行卡号',
                            regexp: /^(\ *\d{16}\ *|\ *\d{19}\ *)$/
                        }
                    }
                },
                id_number: {
                    validators: {
                        notEmpty: {
                            message: '身份证号不能为空'
                        },
                        regexp: {
                            message: '不是有效的身份证号',
                            regexp: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/

                        }
                    }
                },
                id_card1: {
                    validators: {
                        notEmpty: {
                            message: '请上传身份证正面照'
                        },
                        uri: {
                            message: '请上传身份证正面照'
                        }
                    }
                },
                id_card2: {
                    validators: {
                        notEmpty: {
                            message: '请上传身份证反面照'
                        },
                        uri: {
                            message: '请上传身份证反面照'
                        }
                    }
                },
                jm_fee: {
                    validators: {
                        notEmpty: {
                            message: '请输入加盟费'
                        },
                        regexp: {
                            message: '加盟费必须为整数)',
                            regexp: /^\d+$/
                        },
                        stringLength: {
                            max: 6,
                            message: '加盟费金额数过多'
                        }
                    }
                },
                free_num: {
                    validators: {
                        notEmpty: {
                            message: '请输入免费名额数'
                        },
                        regexp: {
                            message: '请输入免费名额数必须为整数',
                            regexp: /^\d+$/
                        },
                        stringLength: {
                            max: 6,
                            message: '免费名额过多'
                        }
                    }
                },
                start_date: {
                    validators: {
                        notEmpty: {
                            message: '合同生效日期不能为空'
                        },
                        date: {
                            message: '不是有效日期(例:2017-01-01)',
                            format: 'YYYY-MM-DD'
                        }
                    }
                },
                end_date: {
                    validators: {
                        notEmpty: {
                            message: '合同过期日期不能为空'
                        },
                        date: {
                            message: '不是有效日期',
                            format: 'YYYY-MM-DD'
                        }
                    }
                },
// {#                    recommend_username: {#}
// {#                        validators: {#}
// {#                            remote: {#}
// {#                                url: '/jms/create/has_jms/',#}
// {#                                type: 'POST',#}
// {##}
// {#                                data: {return_style: 'json'}#}
// {#                            },#}
// {#                        }#}
// {#                    },#}

            }
        })
    }
</script>

文章有参考:点击打开链接





史蒂夫·鲍尔默清华大学演讲实录

能够在这里跟大家交流,是我无比的荣幸。对我来说,学生几乎是我最乐于为之作演讲的听众。(掌声)张亚勤介绍了我的学生时代,当时我和比尔·盖茨一道在哈佛读书。我可以向大家保证,我曾经当过学生,我也曾经有过头...
  • ghj1976
  • ghj1976
  • 2000-09-29 09:09:00
  • 1723

Bootstrap 表单验证formValidation 之表单动态验证

动态添加input并动态添加新验证方式! 知识点: 1 先去官网下载:http://formvalidation.io/ 2 导入文件,注意事项我就不多说了在远程验证那篇我已经讲过。 3 用到的关键...
  • u012123026
  • u012123026
  • 2016-11-22 17:18:06
  • 6852

Bootstrap 表单验证formValidation 之远程验证

最近项目用到了一个很强大的表单验证。记录下。官方地址:http://formvalidation.io/api/ 还有一点很重要:这个插件的Bootstrap最好用他们自带的,有点改动。不用再去Bo...
  • u012123026
  • u012123026
  • 2016-11-22 17:33:07
  • 2642

Jquery前端表单验证插件formvalidation源码及示例

  • 2017年08月28日 11:18
  • 903KB
  • 下载

bootstrap 表单验证formValidation的remote填坑

如上图所示:公司注册页面中有个发送验证码,用remote远程验证此邮箱是否被注册,刚开始是控制台报错,大概是success位定义,后来找出原因是因为jq版本的问题,改过之后发现remote返回fals...
  • onion1218
  • onion1218
  • 2017-10-24 18:43:10
  • 134

关于form-validation表单验证的配置

  • 2015年01月23日 11:17
  • 112KB
  • 下载

Bootstrap表单验证 formValidation 调整反馈图标位置

在某些情况下,反馈图标未正确显示。默认情况下,Bootstrap定义反馈图标位置如下:.has-feedback .form-control-feedback { top: 25px; ...
  • u012123026
  • u012123026
  • 2017-05-17 15:18:45
  • 926

FormValidation验证源代码

  • 2013年01月22日 17:41
  • 91KB
  • 下载

jQuery表单验证插件Validation中两种自定义验证信息的方法

方法一:在使用Class属性值的内部添加messages如下:      一个简单的验证带验证提示的评论例子          姓名      * class="{validate:{...
  • qingliuFu
  • qingliuFu
  • 2016-08-30 20:51:03
  • 2281

UI标签库专题三:JEECG智能开发平台 FormValidation(表单提交及验证标签)

1. FormValidation(表单提交及验证标签)1.1.  参数属性名类型描述是否必须默认值actionstring表单提交路径否nullformidstring表单唯一标示是formob...
  • zhangdaiscott
  • zhangdaiscott
  • 2014-06-04 23:02:39
  • 16002
收藏助手
不良信息举报
您举报文章:FormValidation表单验证
举报原因:
原因补充:

(最多只允许输入30个字)