vue-strap 表单验证 修复

html

<div class="panel panel-default affiche-det-edit">
    <!-- 添加 name="url" 属性，便于js判断。 error="请输入标题"，为错误时的文本提示 -->
    <bs-input :value.sync="affdata.title" name="title" placeholder="请输入标题" label="标题*： " required icon minlength="1" error="请输入标题"></bs-input>
    <datepicker :value.sync="affdata.publish_date" name="publish_date" format="yyyy-MM-dd" width="100%"></datepicker>
</div>

js

    
methods: {
    updateInfo () {
        /** 校验不通过时，直接退出，不发送网络请求 --start **/
        if(!this.validator()){return false};
        /** 校验不通过时，直接退出，不发送网络请求 --end **/
        sendAjax({

        });
    },

    /** 未填的必填项，高亮提示 --start **/
    validator(){
        let isSuccess = true;  // 返回校验状态 true/false
        let affdataTmp = this.affdata;
        // const requiredFiled = ['title', 'author', 'publish_date', 'share_desc', 'share_title'];  // 必填字段
        const requiredFiled = {  // 必填字段
            'title': '标题',
            'author': '作者',
            'publish_date': '公告日期',
            'share_title': '分享标题',
            'share_desc': '分享描述'
        };
        const $editElement = $('.affiche-det-edit');  // 包含所有表单的节点

        let msg = '必填字段：';

        for(let item in affdataTmp){
            let currentItem = affdataTmp[item];
            if(Object.keys(requiredFiled).indexOf(item) !== -1 && (currentItem === '' || currentItem === null)){
                msg += `${requiredFiled[item]}、`;
                isSuccess = false;  // 校验不通过
                const $operateElement = $editElement.find('[name='+item+']');

                // 手动触发一次 焦点的获取与失去，导致触发 vue-strap 的未填高亮提示
                ($operateElement[0].tagName.toLowerCase() === 'input') ? ($operateElement.focus().blur()) : ($operateElement.find('input').focus().blur());
            };
        };

        msg = msg.replace(/、$/g, '');
        window.layer.open({title:'　',icon:2,area : ['450px','250px'],content:msg});
        return isSuccess;
    },
    /** 未填的必填项，高亮提示 --end **/
}