美文网首页
vue表单验证,vee-validate自定义用法

vue表单验证,vee-validate自定义用法

作者: 随风飞2019 | 来源:发表于2019-10-11 18:34 被阅读0次

element-ui使用的验证库是validator,一个下载量非常大的验证库,非常方便
参考https://www.npmjs.com/package/validator
或参考element-ui form表单验证部分的使用

这里介绍一款vue专用验证库,下载量也很大,叫做vee-validate
下面是全局引用和使用方式

安装:
npm i vee-validate

全局引入,main.js
import { ValidationProvider,localize } from "vee-validate/dist/vee-validate.full";
import zh_CN from 'vee-validate/dist/locale/zh_CN.json';
localize("zh_CN",zh_CN); //表示使用中文提示错误信息
Vue.component("ValidationProvider", ValidationProvider);

使用案例

<el-form-item label="邮箱" >
          <ValidationProvider name="Email:"
            :rules="{required:true,email:true,max:{length:10}}"
            v-slot="{ errors }"
          >
            <el-input
              v-model="form.email"
              placeholder="请输入号码"
            ></el-input>
            <span>{{ errors[0] }}</span>
          </ValidationProvider>
 </el-form-item>

使用ValidationProvider 包裹需要校验的输入项目即可
参考官网[https://logaretm.github.io/vee-validate/](https://logaretm.github.io/vee-validate/)
可翻译成中文阅读

旧版本自定义的用法
首先定义一个本地字段,组件初始化时加载
在要校验的字段上加name属性,name属性值和本地字段值保持一致
在要校验的字段上加入v-validate="{}"字符串对象
在要校验的字段下方加上错误提示语
在需要校验的逻辑里,加入校验方法,只有通过校验才可以继续,例:

<input type="text" v-model="realName" placeholder="请输入姓名" name="realName" v-validate="{required:true,regex:/^[a-zA-    
       Z\u4e00-\u9fa5]+$/}">
<span class="error-text">{{errors.first('realName')}}</span>

rules() {
    const dict = {
            custom: {
            realName: {
            required: "请输入姓名",
            regex: "请输入合法的姓名"
                }
            }
        };
    this.$validator.localize("en", dict);
}

created() {
    this.rules();
}

methods里面需要使用时
toNextStep() {
    this.$validator.validate().then(valid => {
        if (valid) {
            BIN.getBankBin(this.cardId).then(res => {
                console.log(res)
                }).catch(err => {
                Toast("银行卡输入有误或暂不支持,请重新输入");
                 })
            }
        });
},

this.$validator.validate().then方法里面
validate()括号里,如果不传参数,就是需要校验全部
validate(“telphone”)传一个字符串,就是校验telphone这一个规则
如果想要校验多个,需这样做
1. 笨方法,嵌套,在每一个通过验证里面去做下面的事
2. 
required: "请输入银行卡号",
numeric: "银行卡号只能为数字哦",
min: "卡号至少为16位哦",
max: "卡号最多为19位哦",
regex:自定义正则部分,比如手机号不正确

vee-validate自定义规则,一些字段的固定写法,包括正则
姓名:可以包含汉字和字母
v-validate="{required:true,regex:/^[a-zA-Z\u4e00-\u9fa5]+$/}"

银行卡号:最少16位,最多19位,只能是数字
v-validate="{required:true,numeric:true,min:16,max:19}"

手机号:11位
v-validate="{required:true, regex:/^(1(3|4|5|6|7|8|9)[0-9]\d{8})$/}"

身份证号:15位或18位数字,或17位数字+字母
v-validate="{required:true,regex:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,alpha_num:true,max:18}"

只可输入数字:/[^\d]/g

表单里面可以配合maxlength来使用,效果更好。
vue校验数据的写法
<el-input v-model='applyNum' @input="applyNumInput"></el-input>
applyNumInput () {
      let reg = /[^\d]/g   //只能输入数字正则
      this.applyNum = this.applyNum.replace(reg, '')
}

相关文章

网友评论

      本文标题:vue表单验证,vee-validate自定义用法

      本文链接:https://www.haomeiwen.com/subject/nfyxmctx.html