一. <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.