关于vee-validate自定义验证

最新推荐文章于 2024-09-01 22:59:50 发布

闲人有点忙

最新推荐文章于 2024-09-01 22:59:50 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/qq_39598092/article/details/82494426

版权

<template>
    <div style="width: 500px; float: right;">
      自定义验证
      <input type="tel" v-model="username" name="username" v-validate="{regex : resg}" data-vv-name="username">
      <span v-if="errors.has('username')" style="height:40px; width: 100px; background: #7f7e7e; font-size: 16px;">请输入正确的手机号</span>
    </div>
</template>

<script>
    export default {
        name: "text",
      $_veeValidate: {
        validator: 'new'
      },
      data(){
          return{
            popover:false,
            username:'',
            resg:/^(1[3|5|7|8]\\d{9})|([\\w.\\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\\.)+[a-z]{2,3})$/
          }
      },
    }
</script>

<style scoped>
  input{ border: 1px solid #ccc;}
</style>

这是在vue项目中自己简单写的自定义的验证

input中的name一定要设定名字这个名字和daya-vv-name一样的 v-validata这是验证的条件我是在data专用定义的一个验证手机号的正则下面的span则是一个提示信息电话号信息不对的时候会自动显示提示错误信息而且errors.has后面的额名字要和input的name名字一样