FormValidation表单验证

工作中经常会遇到各种表单字段验证,今天介绍一下,方便好用的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>

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





阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页