表单验证插件--formvalidation

时间 2019-11-29

原文原文链接

表单验证是一个很是基础的功能，当你的表单项少的时候，能够本身写验证，可是当你的表单有不少的时候，就须要一些验证的插件。今天介绍一款很好用的表单验证插件，formvalidation。其前身叫作bootstrapValidator.javascript

官网：http://formvalidation.io/php

下载：目前的最新版本是收费的，可是咱们能够下载以前的版本。下载地址：http://down.htmleaf.com/1505/201505101833.zipcss

下载以后，解压，整个文件夹里面除了最基本的js和css，还包含了不少实例，有兴趣的能够本身去看看。接下来简要介绍一下它的用法。html

1.导入包

css:java

<link rel="stylesheet"
    href="./static/formvalidation/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
    href="./static/formvalidation/dist/css/formValidation.css">

js:jquery

<script type="text/javascript" src="./static/formvalidation/vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./static/formvalidation/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./static/formvalidation/dist/js/formValidation.js"></script>
    <script type="text/javascript" src="./static/formvalidation/dist/js/framework/bootstrap.js"></script>
    <script type="text/javascript" src="./static/formvalidation/dist/js/language/zh_CN.js"></script>

须要注意的是，即使你已经在项目中导入了bootstrap.js，仍是须要再导入上述的bootstrap.js文件，由于它和你以前导入的并不相同。git

还有就是即使你已经导入了jquery.min.js，最好仍是导入这边的jquery.min.js，由于若是不导入，可能会致使remote类型的验证失效。web

2.表单

表单项的填写须要听从两个原则，表单项的class需标记为：form-control。而且提交按钮的id或者name不要设为sumbit,不然在验证以后会出现没法提交的状况，一个典型的表单以下所示。ajax

    <form id="thisForm" method="post" action="">
                <input type="hidden" name="type" value="1" />
                <div class="container-fluid ">
                    <div class="col-xs-12">
                        <div class="panel-body ">
                            <div class="box box-danger box-padding">
                                <div class="row row-margin">
                                    <div class="col-xs-8 col-xs-offset-1 tipinfo">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-danger">合伙人帐号</button>
                                            </div>
                                            <!-- /btn-group -->
                                            <input type="text" class="form-control" name="partnerName">
                                        </div>

                                    </div>
                                </div>
                                <div class="row row-margin">
                                    <div class="col-xs-8 col-xs-offset-1 tipinfo">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-danger">合伙人手机</button>
                                            </div>
                                            <!-- /btn-group -->
                                            <input type="text" class="form-control" name="phone">
                                        </div>

                                    </div>
                                </div>
                                <div class="row row-margin">
                                    <div class="col-xs-8 col-xs-offset-1 tipinfo">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-danger">真实名称</button>
                                            </div>
                                            <!-- /btn-group -->
                                            <input type="text" class="form-control" name="realName">
                                        </div>
                                    </div>
                                </div>
                                <div class="row row-margin">
                                    <div class="col-xs-8 col-xs-offset-1 tipinfo">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-danger">所属级别</button>
                                            </div>
                                            <!-- /btn-group -->
                                            <select class="form-control" name="partnerLevelId">
                                                <option value="1">市级合伙人</option>
                                                <option value="2">生活馆关注</option>
                                                <option value="3">VIP合伙人</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row row-margin">
                                    <div class="col-xs-8 col-xs-offset-1 tipinfo">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-danger">上级合伙人</button>
                                            </div>
                                            <!-- /btn-group -->
                                            <select name="parentPartnerId" class="form-control">
                                                <OPTION value="0">无</OPTION>
                                                <c:forEach items="${parentPartnerList}" var="parentPartner">
                                                    <option value="${parentPartner.partnerId}">${parentPartner.partnerName}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                        <div class="row row-margin">
                                    <div class="col-xs-8 col-xs-offset-1 tipinfo">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-danger">投资金额</button>
                                            </div>
                                            <!-- /btn-group -->
                                            <input type="text" class="form-control" name="joinFee" placeholder="元">
                                        </div>
                                    </div>
                                </div>
                                <div class="row row-margin">
                                    <div class="col-xs-5  col-xs-offset-4">
                                        <button type="button" class="btn btn-default "
                                            onClick="goback();">返回</button>
                                        &nbsp&nbsp
                                        <button type="button" class="btn btn-primary btn-danger"
                                            id="submit1">提交</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </form>

3.加载验证器

在页面加载完整以后，经过以下js代码加载验证器。正则表达式

$(function() {
    $('#thisForm').formValidation({
        message : 'This value is not valid',
        icon : {
            valid : 'glyphicon glyphicon-ok',
            invalid : 'glyphicon glyphicon-remove',
            validating : 'glyphicon glyphicon-refresh'
        },
        fields : {
            partnerName : {
                message : '合伙人名称验证不经过',
                validators : {
                    notEmpty : {
                        message : '不能为空'
                    },
                /*
                 * stringLength: { min: 6, max: 30, message: 'The username must
                 * be more than 6 and less than 30 characters long' },
                 */
                /*
                 * remote: { url: 'remote.php', message: 'The username is not
                 * available' },
                 */
                /*
                 * regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: 'The username
                 * can only consist of alphabetical, number, dot and underscore' }
                 */
                }
            },
            realName : {
                validators : {
                    notEmpty : {
                        message : '不能为空'
                    },
                }
            },
            phone : {
                validators : {
                    notEmpty : {
                        message : '不能为空'
                    },
                    phone : {
                        message : '不是有效的电话号码',
                        country:'CN'
                    },
                     remote: {
                                type: 'POST',
                                url: 'partnerByPhone',
                                message: '该号码已经存在',
                                // delay: 1000
                            }
                }
            },
             joinFee: {
                        validators: {
                            notEmpty: {
                                message:'不能为空'
                                },
                            digits: {
                                message:'不是有效的金额'
                                },
                            greaterThan: {
                                value: 0
                            },
                   
                        }
                    }
        }
    })
});

相信很容易就能够看懂上述验证器的逻辑，就是一个封装好的json对象，以表单的name做为键，对每个表单规定验证规则，以及验证失败后输出的message。以上列出了几种常见的验证规则，若是想要更多验证规则，能够从下载的文件中去找寻demo.

这里再列出一些比较有用的验证规则，都是我从demo上面摘抄下来的。

--长度要求和正则表达式

   username: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: 'The username is required and can\'t be empty'
                            },
                            stringLength: {
                                min: 6,
                                max: 30,
                                message: 'The username must be more than 6 and less than 30 characters long'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: 'The username can only consist of alphabetical, number, dot and underscore'
                            }
                        }
                    },

--email:

 email: {
                        validators: {
                            notEmpty: {
                                message: 'The email address is required and can\'t be empty'
                            },
                            emailAddress: {
                                message: 'The input is not a valid email address'
                            }
                        }
                    },

--电话

      phone: {
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        },
                        phone:{
                             message: '不是合法电话',
                             country:'CN'
                        }
              
                }
            }

--网站

 website: {
                        validators: {
                            uri: {
                                message: 'The input is not a valid URL'
                            }
                        }
                    }

--邮编

  zipCode: {
                        validators: {
                            zipCode: {
                                country: 'CN',//中国邮编
                                message: 'The input is not a valid US zip code'
                            }
                        }
                    }

--密码及确认

      password: {
                        validators: {
                            notEmpty: {
                                message: 'The password is required and can\'t be empty'
                            }
                        }
                    },
                    confirmPassword: {
                        validators: {
                            notEmpty: {
                                message: 'The confirm password is required and can\'t be empty'
                            },
                            identical: {
                                field: 'password',
                                message: 'The password and its confirm are not the same'
                            }
                        }
                    },

--数字

   age: {
                        validators: {
                            notEmpty: {},
                            digits: {},
                            greaterThan: {
                                value: 18
                            },
                            lessThan: {
                                value: 100
                            }
                        }
                    },

--整数

  'limitPromotion.stock': {
                        validators: {
                            notEmpty: {
                                message:'不能为空'
                                },
                               regexp: {
                                regexp: /^([0-9][0-9]*)$/,
                                message: '必须为整数'
                            }
                   
                        }
             },

--日期

'employee.birthday' : {
                message : '表单校验失败',
                validators : {
                    notEmpty : {
                        message : '不能为空'
                    },
                    //日期格式
                     date: {
                                format: 'YYYY-MM-DD hh:mm:ss',
                                message : '不是合法的日期'
                            }
                }
            },

--远程调用

  username: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: 'The username is required and can\'t be empty'
                            },
                            remote: {
                                type: 'POST',
                                url: 'partnerByPhone',
                                message: '电话号码已使用',
                                //delay: 1000
                            }
                        }
                    }

关于远程调用就是须要去访问服务端的接口，来验证输入的表单是否有效，常常出现的场景是咱们须要验证一个用户名是否已经被注册过了。该远程调用返回的响应是一个json的数据，若是是{ “valid”: true }表示经过验证，不然{ “valid”: false}表示验证失败。

其中服务端的代码示例以下：

    @ResponseBody
    @RequestMapping("partnerByPhone")
    public Map<String, Object> partnerByPhone(String phone) {
        TPartner partner = partnerService.getPartnerByPhone(phone);
        Map<String, Object> maps = new HashMap<String, Object>();
        if (partner == null) {
            maps.put("valid", true);
        } else {
            maps.put("valid", false);
        }
        return maps;
    }

4.提交表单时候手动调用验证

通常状况下，当咱们提交表单的时候，须要手动调用验证，能够用以下代码来实现。针对上述表单。

  $("#submit1").click(function() { var $form = $("#thisForm"); var bv = $form.data('formValidation'); bv.validate(); if(bv.isValid()){ $.ajax({ type:'post', url:'partnerSave', data:$('#thisForm').serialize(), dataType:'html', success:function(data){ if(data>0){ alert("成功"); location.href="partnerHome"; }else{ alert("失败"); } } }); } });

怎么样，就是这么简单。咱们来看看效果吧。固然提示错误的语言和一些标签的样式你能够本身去修改。

总的来讲，这仍是一款比较容易上手的验证器，有须要的朋友能够尝试一下。