您的位置:首页 > 产品设计 > UI/UE

vue插件=============》vee-validate

2018-03-02 14:09 344 查看
一.  <script></script>引入的步骤
1.可以npm在命令行里输入npm install vee-validate --save 下载到一个文件夹里面
<script src="vee-validate.js"></script>
<script src="zh_CN.js"></script>
2.在js怎样加载使用
第一步引入中文包,因为默认是英文的
Vue.use(VeeValidate,{ locale: 'zh_CN' });
第二步写入自定义的-----下面为不能为空的正则
VeeValidate.Validator.extend('kongNULL', {
    getMessage:function(){
            return   '不能为空'
    },
    validate:function(value){
      return /\S/.test(value)
    }

});
3.在html语法书写了,和官网没区别

  <el-input 
        v-model="row.AppId"  
        placeholder="请输入应用ID"
        v-validate="'required|kongNULL'"********
         :class="{'input': true, 'is-danger': errors.has('应用ID') }" *******
          name="应用ID">*******
</el-input>---这个就是输入框的写法
<span v-show="errors.has('应用ID')" class="help is-danger">{{ errors.first('应用ID') }}</span>*******
以上只是点击提交前的验证

以下是包含提交时报错的完整书写

this.$validator.validateAll().then((msg)=>{
if(msg){   }
})
提交加上上面一句就可以了完美哈哈

清除报错; errors.clear();
   this.$validator.errors.clear();

常用验证条件

  after: (field, [target]) => ` ${field}必须在${target}之后`,  
  alpha_dash: (field) => ` ${field}能够包含字母数字字符,包括破折号、下划线`,  
  alpha_num: (field) => `${field} 只能包含字母数字字符.`,  
  alpha_spaces: (field) => ` ${field} 只能包含字母字符,包括空格.`,  
  alpha: (field) => ` ${field} 只能包含字母字符.`,  
  before: (field, [target]) => ` ${field} 必须在${target} 之前.`,  
  between: (field, [min, max]) => ` ${field} 必须在${min} ${max}之间.`,  
  confirmed: (field, [confirmedField]) => ` ${field} 不能和${confirmedField}匹配.`,  
  date_between: (field, [min, max]) => ` ${field}必须在${min}和${max}之间.`,  
  date_format: (field, [format]) => ` ${field}必须在在${format}格式中.`,  
  decimal: (field, [decimals] = ['*']) => ` ${field} 必须是数字的而且能够包含${decimals === '*' ? '' : decimals} 小数点.`,  
  digits: (field, [length]) => ` ${field} 必须是数字,且精确到 ${length}数`,  
  dimensions: (field, [width, height]) => ` ${field}必须是 ${width} 像素到 ${height} 像素.`,  
  email: (field) => ` ${field} 必须是有效的邮箱.`,  
  ext: (field) => ` ${field} 必须是有效的文件.`,  
  image: (field) => ` ${field} 必须是图片.`,  
  in: (field) => ` ${field} 必须是一个有效值.`,  
  ip: (field) => ` ${field} 必须是一个有效的地址.`,  
  max: (field, [length]) => ` ${field} 不能大于${length}字符.`,  
  mimes: (field) => ` ${field} 必须是有效的文件类型.`,  
  min: (field, [length]) => ` ${field} 必须至少有 ${length} 字符.`,  
  not_in: (field) => ` ${field}必须是一个有效值.`,  
  numeric: (field) => ` ${field} 只能包含数字字符.`,  
  regex: (field) => ` ${field} 格式无效.`,  
  required: (field) => `${field} 是必须的.`,  
  size: (field, [size]) => ` ${field} 必须小于 ${size} KB.`,  
  url: (field) => ` ${field}不是有效的url.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: