【4858美高梅】Validate表单验证深入学习,开发MUI自定义表单插件二

By admin in 4858美高梅 on 2019年4月11日

【4858美高梅】Validate表单验证深入学习,开发MUI自定义表单插件二。 bootstrapValidator验证大全

一、引进须要文件

【MUI晋级】开发MUI自定义表单插件一,基础插件模板搭建
【MUI晋级】开发MUI自定义表单插件二,插件封装

后面1篇作品介绍了jQuery
Validate表单验证入门的基础知识,详细内容参见《jQuery
Validate表单验证入门学习》
明日那篇小说深刻学习jQuery
Validate表单验证,以下正是小说的全体内容:

    <meta name='viewport' content='width=device-width, initial-scale=1'>");
    out.println("<link href='" + path + "bootstrap3/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>");
    out.println("<link href='" + path + "bootstrap3/css/bootstrap-theme.min.css' rel='stylesheet' type='text/css'/>");
    out.println("<link href='" + path + "bootstrap3/css/bootstrapValidator.min.css' rel='stylesheet' type='text/css'/>");
    out.println("<script type='text/javascript' src='" + path + "bootstrap3/js/jquery.min.js'></script>");
    out.println("<script type='text/javascript' src='" + path + "bootstrap3/js/bootstrap.min.js'></script>");
    out.println("<script type='text/javascript' src='" + path + "bootstrap3/js/bootstrapValidator.min.js'></script>");

 <jsp:include page="../../bootstrap3/bootstrap.jsp"></jsp:include>
    <script rel="stylesheet">
        $(function () {
            $('form').bootstrapValidator({
                live: 'enabled',//验证时机,enabled是内容有变化就验证(默认),disabled和submitted是提交再验证
                excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件,比如被禁用的或者被隐藏的
//                submitButtons: '#subtn',//指定提交按钮,如果验证失败则变成disabled,但我没试成功,反而加了这句话非submit按钮也会提交到action指定页面
                message: '通用的验证失败消息',//特殊处理会用到
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        message: '账号验证失败',
                        validators: {
                            notEmpty: {
                                message: '账号不能为空'
                            },
                            stringLength: {
                                min: 6,
                                max: 18,
                                message: '账号长度必须为6到18之间'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_]+$/,
                                message: '账号只能包含大写、小写、数字和下划线'
                            }
                        }
                    },
                    phone: {
                        message: '电话无效',
                        validators: {
                            notEmpty: {
                                message: '手机号码不能为空'
                            },
                            stringLength: {
                                min: 11,
                                max: 11,
                                message: '请输入11位手机号码'
                            },
                            regexp: {
                                regexp: /^1[3|5|7|8]{1}[0-9]{9}$/,
                                message: '请输入正确的手机号码'
                            }
                        }
                    },
                    verificationCode: {
                        validators: {
                            notEmpty: {
                                message: '验证码不能为空'
                            }
                        }
                    },
                    password: {
                        message: '密码无效',
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                min: 6,
                                max: 18,
                                message: '长度必须在6到30之间'
                            },
                            identical: {//相同
                                field: 'repassword', //需要进行比较的input name值
                                message: '两次密码不一致'
                            },
                            different: {//不能和用户名相同
                                field: 'username',//需要进行比较的input name值
                                message: '不能和用户名相同'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '用户名只能由字母、数字、点和下划线组成'
                            }
                        }
                    },
                    repassword: {
                        message: '密码无效',
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                min: 6,
                                max: 30,
                                message: '长度必须在6到30之间'
                            },
                            identical: {//相同
                                field: 'password',
                                message: '两次密码不一致'
                            },
                            different: {//不能和用户名相同
                                field: 'username',
                                message: '不能和用户名相同'
                            },
                            regexp: {//匹配规则
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '用户名只能由字母、数字、点和下划线组成'
                            }
                        }
                    },
                    nickname: {
                        validators: {
                            notEmpty: {
                                message: '昵称不能为空'
                            }
                        }
                    },
                    email: {
                        validators: {
                            notEmpty: {
                                message: '邮箱地址不能为空'
                            },
                            emailAddress: {
                                message: '请输入正确的邮件地址'
                            }
                        }
                    },
                    fields: {
                        datetimeStart: {
                            trigger: "change",
                            validators: {
                                notEmpty: {
                                    message: '请选择开始时间'
                                }
                            }
                        },
                        datetimeEnd: {//日期验证
                            trigger: "change",
                            validators: {
                                notEmpty: {
                                    message: '请选择结束时间'
                                },
                                callback: {
                                    message: '开始时间必须小于结束时间',
                                    callback: function (value, validator, $field) {
                                        let other = validator.getFieldElements('datetimeStart').val();//获得另一个的值

                                        let start = new Date(other.replace("-", "/").replace("-", "/"));
                                        let end = new Date(value.replace("-", "/").replace("-", "/"));

                                        if (start <= end) {
                                            return true;
                                        }
                                        return false;
                                    }
                                }
                            }
                        },
                    }
                }
            });
        }).on('success.form.bv', function (e) {
            // 防止表单提交
            e.preventDefault();
            // 获取表单实例
            var $form = $(e.target);
            // 获取BooTrasPalpDealver实例
            var bv = $form.data('bootstrapValidator');
            // 使用AJAX提交表单数据
            $.post('/toback', function (data) {
                if (data.Status == "ok") {
                    window.location.href = "/toback";
                }
                else if (data.Status == "error") {
                    alert(data.Message);
                }
                else {
                    alert("未知错误");
                }
                ;
            });
        })
    </script>

下载地址:()

上一篇大家讲了着力的插件模板和mui的体裁重置,后日的话一下如何在插件模板的根基上封装成插件!

1、用其余艺术代替暗中同意的 SUBMIT

 

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>
// 带众多常用默认验证规则的
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator-all.js"></script>
// 不带常用规则,需自定义规则
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>
//此方法是我编写常用的自定义规则的,也可直接写到对应的表单的js中
<script type="text/javascript" src="/path/to/dist/js/validator/atfmCustomValidatorRules.js"></script>

动用自定义表单有如下好处

$().ready(function() {
 $("#signupForm").validate({
  submitHandler:function(form){
   alert("submitted"); 
   form.submit();
  } 
 });
});

添加到js上

二、编写HTML

  1. 可现在台配置表单内容

使用 ajax 方式

注:以下参数方面包车型客车赋值都为私下认可值,不添加该参数即便用暗许值

在表单中,若对某一字段想添加验证规则,默许需求以<div
class=”form-group”></div>包裹(对应错误提醒会基于该class值定位),内部<input
class=”form-control” />标签必须有name属性值,此值为验证相称字段。

  1. 新增页、编辑页能够共用1段代码
  2. 便利表单内容的收获
 $(".selector").validate({  
 submitHandler: function(form) 
 {  
  $(form).ajaxSubmit();  
 } 
 }) 
$(formSelector).bootstrapValidator({
    /**
    *  指定不验证的情况
    *  值可设置为以下三种类型:
    *  1、String  ':disabled, :hidden, :not(:visible)'
    *  2、Array  默认值  [':disabled', ':hidden', ':not(:visible)']
    *  3、带回调函数  
        [':disabled', ':hidden', function($field, validator) {
            // $field 当前验证字段dom节点
            // validator 验证实例对象 
            // 可以再次自定义不要验证的规则
            // 必须要return,return true or false; 
            return !$field.is(':visible');
        }]
    */
    excluded: [':disabled', ':hidden', ':not(:visible)'],
    /**
    * 指定验证后验证字段的提示字体图标。(默认是bootstrap风格)
    * Bootstrap 版本 >= 3.1.0
    * 也可以使用任何自定义风格,只要引入好相关的字体文件即可
    * 默认样式 
        .form-horizontal .has-feedback .form-control-feedback {
            top: 0;
            right: 15px;
        }
    * 自定义该样式覆盖默认样式
        .form-horizontal .has-feedback .form-control-feedback {
            top: 0;
            right: -15px;
        }
        .form-horizontal .has-feedback .input-group .form-control-feedback {
            top: 0;
            right: -30px;
        }
    */
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    /**
    * 生效规则(三选一)
    * enabled 字段值有变化就触发验证
    * disabled,submitted 当点击提交时验证并展示错误信息
    */
    live: 'enabled',
    /**
    * 为每个字段指定通用错误提示语
    */
    message: 'This value is not valid',
    /**
    * 指定提交的按钮,例如:'.submitBtn' '#submitBtn'
    * 当表单验证不通过时,该按钮为disabled
    */
    submitButtons: 'button[type="submit"]',
    /**
    * submitHandler: function(validator, form, submitButton) {
    *   //validator: 表单验证实例对象
    *   //form  jq对象  指定表单对象
    *   //submitButton  jq对象  指定提交按钮的对象
    * }
    * 在ajax提交表单时很实用
    *   submitHandler: function(validator, form, submitButton) {
            // 实用ajax提交表单
            $.post(form.attr('action'), form.serialize(), function(result) {
                // .自定义回调逻辑
            }, 'json');
         }
    * 
    */
    submitHandler: null,
    /**
    * 为每个字段设置统一触发验证方式(也可在fields中为每个字段单独定义),默认是live配置的方式,数据改变就改变
    * 也可以指定一个或多个(多个空格隔开) 'focus blur keyup'
    */
    trigger: null,
    /**
    * Number类型  为每个字段设置统一的开始验证情况,当输入字符大于等于设置的数值后才实时触发验证
    */
    threshold: null,
    /**
    * 表单域配置
    */
    fields: {
        //多个重复
        <fieldName>: {
            //隐藏或显示 该字段的验证
            enabled: true,
            //错误提示信息
            message: 'This value is not valid',
            /**
            * 定义错误提示位置  值为CSS选择器设置方式
            * 例如:'#firstNameMeg' '.lastNameMeg' '[data-stripe="exp-month"]'
            */
            container: null,
            /**
            * 定义验证的节点,CSS选择器设置方式,可不必须是name值。
            * 若是id,class, name属性,<fieldName>为该属性值
            * 若是其他属性值且有中划线链接,<fieldName>转换为驼峰格式  selector: '[data-stripe="exp-month"]' =>  expMonth
            */
            selector: null,
            /**
            * 定义触发验证方式(也可在fields中为每个字段单独定义),默认是live配置的方式,数据改变就改变
            * 也可以指定一个或多个(多个空格隔开) 'focus blur keyup'
            */
            trigger: null,
            // 定义每个验证规则
            validators: {
                //多个重复
                //官方默认验证参照  http://bv.doc.javake.cn/validators/
                // 注:使用默认前提是引入了bootstrapValidator-all.js
                // 若引入bootstrapValidator.js没有提供常用验证规则,需自定义验证规则哦
                <validatorName>: <validatorOptions>
            }
        }
    }
});

注:该值不是纯属的,也得以因此js手动钦命错误提醒地点和评释的输入框(后续会讲课到)。

先是要表明1(Wissu)下大家的自定义表单要兑现怎么着功能,才能更加好去封装

能够安装 validate 的暗中同意值,写法如下:

概念自定义表明规则

该规则是展开插件的validators方法。 
本身将项目中常用的办法放到了2个单身js中,相当于地点第一步引用的自定义方法。

运用办法如下:

(function($) {
    //自定义表单验证规则
    $.fn.bootstrapValidator.validators = {
        <validatorName> : {
            /**
             * @param {BootstrapValidator} 表单验证实例对象
             * @param {jQuery} $field jQuery 对象
             * @param {Object} 表单验证配置项值
             * @returns {boolean}
             */
            validate: function(validator, $field, options) {
                // 表单输入的值
                // var value = $field.val();

                //options为<validatorOptions>对象,直接.获取需要的值

                // 返回true/false
                //也可返回{ valid : true/false, message: 'XXXX'}
                return reg.test( $field.val() );

            }
        },
    };
}(window.jQuery))

 

常用事件

一、重置某1单纯验证字段验证规则

$(formName).data(“bootstrapValidator”).updateStatus("fieldName",  "NOT_VALIDATED",  null );

二、重置表单全部验证规则

$(formName).data("bootstrapValidator").resetForm();

3、手动触发表单验证

//触发全部验证
$(formName).data(“bootstrapValidator”).validate();
//触发指定字段的验证
$(formName).data(“bootstrapValidator”).validateField('fieldName');

4、获取当前表单验证状态

// flag = true/false 
var flag = $(formName).data(“bootstrapValidator”).isValid();

 

伍、依照钦定字段名称获取验证指标

// element = jq对象 / null
var element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');

 

<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Username</label>
<div class="col-lg-9">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-9">
<input type="text" class="form-control" name="email" />
</div>
</div>
</form>
  1. 经过JS生成form表单,表单类型、默许值、样式、提醒文字都能够专断定义
 $.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});

表单提交

1、当提交按钮是数见不鲜按钮 
手动触发布单验证 
示例:

 $("buttonName").on("click", function(){
     //获取表单对象
    var bootstrapValidator = form.data('bootstrapValidator');
        //手动触发验证
        bootstrapValidator.validate();
        if(bootstrapValidator.isValid()){
            //表单提交的方法、比如ajax提交
        }
});

 

二、当提交按钮的[type=”submit”]时 
会在success在此以前自动触公布单验证

var bootstrapValidator = form.data('bootstrapValidator');
bootstrapValidator.on('success.form.bv', function (e) {
    e.preventDefault();
    //提交逻辑
});

3、添加验证规则

  1. 各样表单项都足以绑定三个事件
  2. 要有表单提交事件,能够实时的拿走表单的值

倘使想付出表单, 须要采取 form.submit(),而并非使用 $(form).submit()。
二、debug,只验证不提交表单 一经那些参数为true,那么表单不会交到,只实行反省,调试时那多少个方便人民群众。

1、添加到HTML上

一、通过JS生成form表单

大家率先先观看一些DOM结构

4858美高梅 1

DOM结构

能够得出以下结论

  1. 存放表单的容器是必须的,伊始化参数一定要有
  1. form节点只有多少个,然而class须要安装
  2. 每一项的BOX容器是多少个,所以开首化参数一定是一个数组
  3. 标题成分须要安装class和文字
  4. input须求设置的就相比较多了,种种品质,而且还不仅是 input

依照以上结论,大家先写1个开始化参数,打开 customForm.js
,编写原来写好的defaultConfig 的值

//默认参数
var defaultConfig = {
    storageBox:null,         //存放表单的容器

    formNode:{               //表单节点
        id:"",               //表单的ID
        className:"",        //表单的样式,多个样式用空格隔开
        submitFn:null        //表单提交事件
    },

    formItems:[{             //表单列表项
        boxClass:"",         //box容器的样式名
        titleText:"",        //标题元素的文字
        titleClass:"",       //标题元素的样式
        input:{              //input的一些配置项
            tagName:"",      //input的标签名,如input、select、textarea
            attr:{           //input的属性配置项,键为属性名,值为属性值
                id:'',       
                name:''      //只要是合法的input属性都可以写到这里,还有很多就不列举了
            },
            event:{          //事件列表,只要是合法的事件名都可以
                tap:function(){

                },
                focus:function(){

                }
            },
            value:"",       //input和textarea用字符串格式
            value:[{        //select的用数组格式
                text:"",    //显示的文字
                value:'',   //值
                isSelected:true //是否选中
            }]
        }

        defaultClass:{                          //在未设置样式的情况下使用默认样式
            formNodeClass:"mui-input-group",    //form节点默认样式
            formItemClass:'mui-input-row',      //表单每一项的box容器样式
            inputClass:'mui-input-clear'        //input的样式
        }
    }]
};

我们把 defaultConfig 分为了4大块

  1. storageBox 存放表单的器皿,Element类型
  2. formNode 表单节点
  3. formItems 表单列表项
  4. defaultClass 暗中认可样式

只是大家的暗中认可值只可以存3个 defaultClass
暗中同意样式
,其余的都亟待作为初阶化参数字传送进来,所以将大家刚刚写的
defaultConfig注解掉,重新写贰个并改变为如下

var defaultConfig = {
    defaultClass:{                          //在未设置样式的情况下使用默认样式
        formNodeClass:"mui-input-group",    //form节点默认样式
        formItemClass:"mui-input-row",      //表单每一项的box容器样式
        inputClass:"mui-input-clear"        //input的样式
    }
};
$().ready(function() {
 $("#signupForm").validate({
  debug:true
 });
});
<div class="form-group">
<label class="col-lg-3 control-label">Username</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="username"
data-bv-message="The username is not valid"
required
data-bv-notempty-message="The username is required and cannot be empty"
pattern="[a-zA-Z0-9]+"
data-bv-regexp-message="The username can only consist of alphabetical, number" />
</div>
</div>

更改init方法

咱俩要求变更一下插件模板的init方法,来检查下初叶化参数的科学并打字与印刷一下联结暗许参数之后的值

init:function(arg){
    var self = this;

    if(arg) {
        if(arg.storageBox && arg.storageBox.nodeType === 1) {
            //将初始化参数和默认参数合并,并存放到对象的config属性下
            self.config = $.extend(arg, defaultConfig);
            console.log(self.config);
        } else {
            self._logError("初始化参数[storageBox]参数未设置或者不是Element类型", true);
        }
    } else {
        self._logError("初始化参数不存在");
    }

    return self;
}

前台调用方法

//初始化参数
var customFormCg = {
    storageBox:mui(".mui-content")[0]
};

//实例化
var customForm = new mui.customForm(customFormCg);

谷歌(谷歌)浏览器下截图,编辑器的控制台只好输出二个 “[object
Object]”,无法查看详细信息

4858美高梅 2

谷歌调节和测试截图

当成功这一步就印证您的插件开头化已经成功了,接下去大家写一个
_InitHtml
方法来成立form表单,并修改init方法让其调用_InitHtml方法;

/** 实例化调用函数
 * -------------------------
 * @param {Object} arg 插件配置参数
 */
init:function(arg){
    var self = this;

    if(arg) {
        if(arg.storageBox && arg.storageBox.nodeType === 1) {
            //将初始化参数和默认参数合并,并存放到对象的config属性下
            self.config = $.extend(arg, defaultConfig);
            self._InitHtml();
        } else {
            self._logError("初始化参数[storageBox]参数未设置或者不是Element类型", true);
        }
    } else {
        self._logError("初始化参数不存在");
    }

    return self;
},

/**
 * 内部方法,初始化html
 */
_InitHtml:function(){
    var self = this,            //缓存this
        cg = self.config;       //取到配置信息

    alert(1);

    return self;
},

假定能弹出个壹证实你又打响了~,接下去继续编写 _InitHtml方法

/**
 * 内部方法,初始化html
 */
_InitHtml:function(){
    var self = this,            //缓存this
        cg = self.config;       //取到配置信息


    /* 1. 创建form节点存到对象配置信息里面的formNode下的node里面,并设置样式 */
    !cg.formNode && (cg.formNode = {});
    var form = cg.formNode['node'] = dom.createElement('form');
    form.className = cg.formNode.className || cg.defaultClass.formNodeClass || "";

    /* 2.创建表单项 */
    if(cg.formItems && Array.isArray(cg.formItems)){
        for(var i = 0,l = cg.formItems.length;i<l;i++){
            var item = cg.formItems[i],                                                     //缓存当前循环条目
                itemInput = item.input,                                                     //input配置项
                itemBox = item['itemBox'] = dom.createElement("div"),                       //每一项的box容器
                titleEl = item['titleEl'] = dom.createElement("label"),                     //标题元素
                inputEl = item['inputEl'] = dom.createElement(itemInput.tagName || 'input');//input元素

            //设置class
            itemBox.className = item.boxClass || cg.defaultClass.formItemClass || '';
            titleEl.className = item.titleClass || '';
            inputEl.className = cg.defaultClass.inputClass || '';

            //设置标题文字信息
            titleEl.innerText = item.titleText || '';

            //设置input属性
            for(var key in itemInput.attr){
                inputEl.setAttribute(key,itemInput.attr[key]);
            }

            //设置input的value
            if(itemInput.value){
                switch(inputEl.tagName.toLowerCase()){
                    case 'select':
                        if(Array.isArray(itemInput.value)){
                            //注意此处不要用i来当做循环索引了
                            for(var x = 0;x<itemInput.value.length;x++){
                                var option = dom.createElement('option');
                                option.setAttribute("value", itemInput.value[x].value);
                                option.innerText = itemInput.value[x].text;
                                itemInput.value[x].isSelected && option.setAttribute('selected', 'selected');
                                inputEl.appendChild(option);
                            }
                        }else{
                            self._logError("当tagName为select时,input下的value属性必须为数组格式");
                        }
                        break;
                    default:
                        inputEl.value = itemInput.value;
                }
            }

            //追加元素
            itemBox.appendChild(titleEl);
            itemBox.appendChild(inputEl);
            form.appendChild(itemBox);
        }
    }

    //将form节点追加到存放表单的容器里面
    cg.storageBox.appendChild(form);
    return self;
}

将前台“mui-content”里面的情节注释掉,然后修改前台初始化参数
customFormCg

//初始化参数
var customFormCg = {
    storageBox:mui(".mui-content")[0],
    formNode:{
        id:"mainForm"
    },
    formItems:[{
        titleText:'客户名称',
        input:{
            attr:{
                type:"text",
                id:"clientName",
                name:"clientName",
                placeholder:"请输入客户名称"
            }
        }
    },{
        titleText:'客户地址',
        input:{
            attr:{
                type:"text",
                id:"clientAddress",
                name:"clientAddress",
                readonly:"readonly",
                placeholder:"点击选择客户地址"
            }
        }
    },{
        titleText:'客户电话',
        input:{
            attr:{
                type:"number",
                id:"clientTel",
                name:"clientTel",
                placeholder:"请输入客户联系电话"
            },
            value:"18866655444"
        }
    },{
        titleText:'客户级别',
        input:{
            tagName:'select',
            attr:{
                type:"number",
                id:"clientTel",
                name:"clientTel",
                placeholder:"请输入客户联系电话"
            },
            value:[{
                text:"A级",
                value:1
            },{
                text:"B级",
                value:2
            },{
                text:"C级",
                value:3,
                isSelected:true
            }]
        }
    },{
        titleText:'备注',
        input:{
            tagName:"textarea",
            attr:{
                id:"clientTel",
                name:"clientTel",
                placeholder:"请输入备注信息"
            },
        }
    }]
};

假诺您得获得如下截图就印证你成功了~

4858美高梅 3

成功截图

接下去大家写四个 getValues
的表面方法用来赢得表单参数,我们承受八个input的id组成的数组,可以钦命重返结果,固然不传则赶回表单全体内容;

/** 获取表单内容
 * @param {array} ids 指定的input ID数组
 * @return {JSON} id为键,value值为值
 */
getValues:function(ids){
    var self = this,
        cg = self.config;

    var data = {},
        isAge = ids && Array.isArray(ids);

    for(var i = 0; i < cg.formItems.length; i++) {
        var item = cg.formItems[i],
            inputEl = item['inputEl'],
            inputElId = inputEl.getAttribute("id");

        if(isAge && ids.indexOf(inputElId) == -1) {
            continue;
        } else {
            data[inputElId] = inputEl.value;
        }
    }

    return data;
},

为前台的header里面包车型大巴保存按钮扩充2个id “saveBtn

4858美高梅 4

header

在index.html里面包车型大巴JS部分为其绑定事件

document.getElementById("saveBtn").addEventListener("tap",function(){
    console.log(JSON.stringify(customForm.getValues()));
});

4858美高梅 5

截图

在浏览器里面点下保存看好还是倒霉健康打印出音讯

4858美高梅 6

谷歌(Google)浏览器截图

附带参数测试
console.log(JSON.stringify(customForm.getValues(['clientName','clientTel','clientLv'])));

到此开端化HTML就终止了,接下去该绑定事件了

假使五个页面中有多少个表单都想设置成为 debug,则使用:

2、添加到js上

二、绑定事件

绑定的风云主要有七个叁个是form提交事件,另三个是input的轩然大波,大家写2个里面方法
_EventInit

_EventInit:function(){
    var self = this,
        cg = self.config;

    //表单提交事件
    cg.formNode['node'].addEventListener("submit",function(e){
        e.preventDefault();     //阻止提交
        cg.formNode.submitFn && cg.formNode.submitFn(self);
    });

    //为input绑定事件
    for(var i = 0;i<cg.formItems.length;i++){
        var item = cg.formItems[i];
        for(var key in item.input.event){
            bindEvent(item.inputEl,key,item.input.event[key]);
        }
    }

    /** 内部调用函数
     *  --------------
     * @param {Object} eNode 事件节点
     * @param {Object} eName 事件名
     * @param {Object} eFn 事件函数
     */
    function bindEvent(eNode,eName,eFn){
        eNode.addEventListener(eName,eFn);
    }

    return self;
}

更改 init 方法,那便是我们事先说的链式调用
self._InitHtml()._EventInit();

前台为客户地址添加3个 tap 事件,看行还是不行不奇怪弹出2个壹

{
    titleText:'客户地址',
    input:{
        attr:{
            type:"text",
            id:"clientAddress",
            name:"clientAddress",
            readonly:"readonly",
            placeholder:"点击选择客户地址"
        },
        event:{
            tap:function(){
                alert(1);
            }
        }
    }
}

假定成功了,其余的事件添加方法类似,比如focus、blur、change等事件。接下来大家来测试一下表单提交事件!

将开端化参数 formNode 修改为如下

formNode:{
    id:"mainForm",
    submitFn:function(){
        alert("我触发了表单提交事件!");
    }
}

然后将 saveBtn 绑定事件修改一下

document.getElementById("saveBtn").addEventListener("tap",function(){
    customForm.config.formNode.node.submit();
});

然后你会意识…….尼玛竟然没影响,那是例行的,因为submit()并不会触发onsubmit(在绑定事件的时候on都以去掉的,所以大家绑定的是submit事件),大家换贰个思路,大家壹间接触表单的submit事件不就足以了呢,正好mui有那几个措施
MUI事件触发,我们修改一下代码

document.getElementById("saveBtn").addEventListener("tap",function(){
    mui.trigger(customForm.config.formNode.node,'submit');
});

本次能够本场的弹出音讯,可是那样的写法太辛劳了,所以大家要为 customForm
在扩展学一年级个 onSubmit 的方法

/** 
 * 主动触发表单提交
 */
onSubmit: function(){
    var self = this;
    mui.trigger(self.config.formNode.node,'submit');
    return self;
},

下一场修改事件绑定

document.getElementById("saveBtn").addEventListener("tap",function(){
    customForm.onSubmit();
});

到此大家的自定义表单算是完了了,当然还有其余的一对地点要做,比如那样的图景

4858美高梅 7

还有如此的

4858美高梅 8

再有最常用的表单验证,这一个那就供给您来修改一下代码,动动小脑筋了。还有哪些适应多样表单情形都急需本人不停的尝尝

$.validator.setDefaults({
 debug: true
})

注:以下参数方面的赋值都为暗中认可值,不添加该参数尽管用暗许值

叁、ignore:忽略有个别因素不说明
**
ignore: “.ignore”
**四、更改错误音讯彰显的职位
errorPlacement:Callback 指明错误放置的职分,默许处境是:error.appendTo(element.parent());即把错误音信放在验证的因素后边。

$(formSelector).bootstrapValidator({
/**
* 指定不验证的情况
* 值可设置为以下三种类型:
* 1、String ':disabled, :hidden, :not(:visible)'
* 2、Array 默认值 [':disabled', ':hidden', ':not(:visible)']
* 3、带回调函数 
[':disabled', ':hidden', function($field, validator) {
// $field 当前验证字段dom节点
// validator 验证实例对象 
// 可以再次自定义不要验证的规则
// 必须要return,return true or false; 
return !$field.is(':visible');
}]
*/
excluded: [':disabled', ':hidden', ':not(:visible)'],
/**
* 指定验证后验证字段的提示字体图标。(默认是bootstrap风格)
* Bootstrap 版本 >= 3.1.0
* 也可以使用任何自定义风格,只要引入好相关的字体文件即可
* 默认样式 
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
}
* 自定义该样式覆盖默认样式
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: -15px;
}
.form-horizontal .has-feedback .input-group .form-control-feedback {
top: 0;
right: -30px;
}
*/
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
/**
* 生效规则(三选一)
* enabled 字段值有变化就触发验证
* disabled,submitted 当点击提交时验证并展示错误信息
*/
live: 'enabled',
/**
* 为每个字段指定通用错误提示语
*/
message: 'This value is not valid',
/**
* 指定提交的按钮,例如:'.submitBtn' '#submitBtn'
* 当表单验证不通过时,该按钮为disabled
*/
submitButtons: 'button[type="submit"]',
/**
* submitHandler: function(validator, form, submitButton) {
* //validator: 表单验证实例对象
* //form jq对象 指定表单对象
* //submitButton jq对象 指定提交按钮的对象
* }
* 在ajax提交表单时很实用
* submitHandler: function(validator, form, submitButton) {
// 实用ajax提交表单
$.post(form.attr('action'), form.serialize(), function(result) {
// .自定义回调逻辑
}, 'json');
}
* 
*/
submitHandler: null,
/**
* 为每个字段设置统一触发验证方式(也可在fields中为每个字段单独定义),默认是live配置的方式,数据改变就改变
* 也可以指定一个或多个(多个空格隔开) 'focus blur keyup'
*/
trigger: null,
/**
* Number类型 为每个字段设置统一的开始验证情况,当输入字符大于等于设置的数值后才实时触发验证
*/
threshold: null,
/**
* 表单域配置
*/
fields: {
//多个重复
<fieldName>: {
//隐藏或显示 该字段的验证
enabled: true,
//错误提示信息
message: 'This value is not valid',
/**
* 定义错误提示位置 值为CSS选择器设置方式
* 例如:'#firstNameMeg' '.lastNameMeg' '[data-stripe="exp-month"]'
*/
container: null,
/**
* 定义验证的节点,CSS选择器设置方式,可不必须是name值。
* 若是id,class, name属性,<fieldName>为该属性值
* 若是其他属性值且有中划线链接,<fieldName>转换为驼峰格式 selector: '[data-stripe="exp-month"]' => expMonth
*/
selector: null,
/**
* 定义触发验证方式(也可在fields中为每个字段单独定义),默认是live配置的方式,数据改变就改变
* 也可以指定一个或多个(多个空格隔开) 'focus blur keyup'
*/
trigger: null,
// 定义每个验证规则
validators: {
//多个重复
//官方默认验证参照 http://bv.doc.javake.cn/validators/
// 注:使用默认前提是引入了bootstrapValidator-all.js
// 若引入bootstrapValidator.js没有提供常用验证规则,需自定义验证规则哦
<validatorName>: <validatorOptions>
}
}
}
});
errorPlacement: function(error, element) { 
 error.appendTo(element.parent()); 
}

四、定义自定义表达规则

实例

该规则是拓展插件的validators方法。

<tr>
 <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
 <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
 <td class="status"></td>
</tr>
<tr>
 <td style="padding-right: 5px;">
  <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
  <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
 </td>
 <td style="padding-left: 5px;">
  <input id="dateformat_am" name="dateformat" type="radio" value="1" />
  <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
 </td>
 <td></td>
</tr>
<tr>
 <td class="label"> </td>
 <td class="field" colspan="2">
  <div id="termswrap">
   <input id="terms" type="checkbox" name="terms" />
   <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
  </div>
 </td>
</tr>

errorPlacement: function(error, element) {
 if ( element.is(":radio") )
  error.appendTo( element.parent().next().next() );
 else if ( element.is(":checkbox") )
  error.appendTo ( element.next() );
 else
  error.appendTo( element.parent().next() );
}

自个儿将品种中常用的方式放到了一个单身js中,也正是上面第1步引用的自定义方法。

代码的效能是:一般情况下把错误消息显示在
<td class=”status”></td> 中,借使是 radio 则展现在
<td></td> 中,若是是 checkbox 则映未来内容的末尾。
参数 类型 描述 默认值
errorClass String 钦赐错误提示的 css
类名,能够自定义错误提醒的体裁。 “error”
errorElement String 用什么样标签标记错误,默许是 label,能够改成
em。 “label”
errorContainer Selector 展现或许隐藏验证音讯,能够自行完毕有错误音讯出现时把容器属性改为展现,无不当时隐藏,用处十分小。
4858美高梅,errorContainer: “#messageBox1, #messageBox2” 
errorLabelContainer Selector 把错误音信统壹放在八个容器里面。 
wrapper String 用怎么着标签再把上边的 errorELement 包起来。 
诚如那多本性格同时使用,实现在3个容器内展现全数错误提醒的成效,并且未有音讯时自动隐藏。
errorContainer: “div.error”,
errorLabelContainer: $(“#signupForm div.error”),
wrapper: “li”
伍、更改错误音讯展现的样式 设置错误提示的样式,能够扩充图标展现,在该连串中早已确立了一个validation.css,专门用于保障校验文件的体裁。

运用方法如下:

input.error { border: 1px solid red; }
label.error {
 background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

 padding-left: 16px;

 padding-bottom: 2px;

 font-weight: bold;

 color: #EA5200;
}
label.checked {
 background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}
(function($) {
//自定义表单验证规则
$.fn.bootstrapValidator.validators = {
<validatorName> : {
/**
* @param {BootstrapValidator} 表单验证实例对象
* @param {jQuery} $field jQuery 对象
* @param {Object} 表单验证配置项值
* @returns {boolean}
*/
validate: function(validator, $field, options) {
// 表单输入的值
// var value = $field.val();
//options为<validatorOptions>对象,直接.获取需要的值
// 返回true/false
//也可返回{ valid : true/false, message: 'XXXX'}
return reg.test( $field.val() );
}
},
};
}(window.jQuery));

6、各类字段验证通超过实际践函数 success:String,Callback
要验证的成分通过验证后的动作,假若跟3个字符串,会作为四个 css
类,也可跟2个函数。

5、常用事件

success: function(label) {
 // set   as text for IE
 label.html(" ").addClass("checked");
 //label.addClass("valid").text("Ok!")
}

1、重置某1纯粹验证字段验证规则

添加 “valid” 到表达元素,在 CSS 中定义的体裁 <style>label.valid
{}</style>。
success: “valid”
七、验证的接触格局修改 上边包车型大巴固然是 boolean 型的,但提出唯有要改为 false,不然别乱添加。
接触格局 类型 描述 暗许值
onsubmit Boolean 提交时表达。设置为 false 就用任何艺术去注脚。 true
onfocusout Boolean 失去主旨时证实(不包涵复选框/单选按钮)。 true
onkeyup Boolean 在 keyup 时验证。 true
onclick Boolean 在点击复选框和单选按钮时证实。 true
focusInvalid Boolean 提交表单后,未经过认证的表单(第三个或提交此前获得核心的未通过验证的表单)会博得宗旨。 true
focusCleanup Boolean 假诺是 true
那么当未通过验证的因素获得核心时,移除错误提醒。防止和 focusInvalid
1起用。 false

$(formName).data(“bootstrapValidator”).updateStatus("fieldName", "NOT_VALIDATED", null );
// 重置表单
$().ready(function() {
 var validator = $("#signupForm").validate({
  submitHandler:function(form){
   alert("submitted"); 
   form.submit();
  } 
 });
 $("#reset").click(function() {
  validator.resetForm();
 });

});

二、重置表单全数验证规则

8、异步验证 remote:URL
采取 ajax
格局展开认证,默许会提交当前证实的值到长途地址,假使供给提交别的的值,能够应用
data 选项。

$(formName).data("bootstrapValidator").resetForm();
remote: "check-email.php"
remote: {
 url: "check-email.php",  //后台处理程序
 type: "post",    //数据发送方式
 dataType: "json",   //接受数据格式 
 data: {      //要传递的数据
  username: function() {
   return $("#username").val();
  }
 }
}

三、手动触发布单验证

远程地址只可以输出 “true” 或 “false”,不可能有任何输出。
九、添加自定义校验 addMethod:name, method, message
自定义表达形式

//触发全部验证
$(formName).data(“bootstrapValidator”).validate();
//触发指定字段的验证
$(formName).data(“bootstrapValidator”).validate('fieldName');
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
 var length = value.length;
 for(var i = 0; i < value.length; i++){
  if(value.charCodeAt(i) > 127){
   length++;
  }
 }
 return this.optional(element) || ( length >= param[0] && length <= param[1] ); 
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

// 邮政编码验证 
jQuery.validator.addMethod("isZipCode", function(value, element) { 
 var tel = /^[0-9]{6}$/;
 return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

四、获取当前表单验证状态

注意:要在 additional-methods.js 文件中增进只怕在 jquery.validate.js
文件中丰盛。建议一般写在 additional-methods.js 文件中。
注意:在 messages_cn.js 文件中丰盛:isZipCode:
“只能包含汉语字、英文字母、数字和下划线”。调用前要添加对
additional-methods.js 文件的引用。
10、radio 和 checkbox、select 的验证 radio 的 required 表示必须选中一个。

// flag = true/false 
var flag = $(formName).data(“bootstrapValidator”).isValid();
<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input type="radio" id="gender_female" value="f" name="gender"/>
checkbox 的 required 表示必须选中。
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />
checkbox 的 minlength 表示必须选中的最小个数,maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
select 的 required 表示选中的 value 不能为空。
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
 <option value=""></option>
 <option value="1">Buga</option>
 <option value="2">Baga</option>
 <option value="3">Oi</option>
</select>
select 的 minlength 表示选中的最小个数(可多选的 select),maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
 <option value="b">Banana</option>
 <option value="a">Apple</option>
 <option value="p">Peach</option>
 <option value="t">Turtle</option>
</select>

5、依据钦定字段名称获取验证指标

附表:内置验证办法:

// element = jq对象 / null
var element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');

4858美高梅 9

6、表单提交

正文已被整理到了《jquery表单验证大全》,欢迎大家学习阅读。

1、当提交按钮是平常按钮

以上就是指向jQuery
Validate表单验证的中肯学习,希望对大家的读书抱有帮忙。

手动触公布单验证

您可能感兴趣的文章:

  • jQuery
    validate插件达成ajax验证重复的二种格局
  • jQuery
    validate插件submitHandler提交导致死循环化解办法
  • 深远学习jQuery
    Validate表单验证(二)
  • 深切学习jQuery
    Validate表单验证
  • jquery
    validate表单验证的主干用法入门
  • jQuery
    easyui的validatebox校验规则增加及easyui校验框validatebox用法
  • jquery.validate
    自定义表明办法及validate相关参数
  • jQuery插件Validate达成自定义校验结果样式
  • 飞速学习jQuery插件
    jquery.validate.js表单验证插件使用格局
  • jQuery插件EasyUI校验规则
    validatebox验证框
  • jquery.validate提醒错误音讯地方方法

示例:

$("buttonName").on("click", function(){
//获取表单对象
var bootstrapValidator = form.data('bootstrapValidator');
//手动触发验证
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
//表单提交的方法、比如ajax提交
}
});

贰、当提交按钮的[type=”submit”]时

会在success从前自动触公布单验证

var bootstrapValidator = form.data('bootstrapValidator');
bootstrapValidator.on('success.form.bv', function (e) {
e.preventDefault();
//提交逻辑
});

上述所述是小编给大家介绍的BootstrapValidator超详细教程(推荐),希望对大家有所扶助,借使大家有其余疑问请给自身留言,小编会及时过来大家的。在此也万分感激我们对剧本之家网址的支撑!

你恐怕感兴趣的篇章:

  • bootstrapValidator
    bootstrap-select验证不可用的消除办法
  • jquery插件bootstrapValidator表单验证详解
  • 依照BootstrapValidator的Form表单验证(二四)
  • bootstrapValidator自定验证办法写法
  • jquery插件bootstrapValidator数据印证详解
  • BootStrap Validator
    依据规则在JS中丰盛或移除校验操作

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有