验证器vee-validate3的使用

本文介绍了在一个未进行前后端分离的项目中,如何在ThinkPHP6和Vue.js环境下集成Vee-Validate3进行表单验证。详细展示了页面模板结构,包括引入的外部资源、Vue组件和验证规则,并提供了本地化的配置示例以及实际使用案例。同时,指出了在使用过程中需要注意的细节,如validation-observer的包裹形式和immediate属性的设置。
摘要由CSDN通过智能技术生成

背景

项目使用的是thinkphp6,前端使用的是单页面引入vue.js,未做前后端分离

页面模板

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <title>
    {block name="title"}页面标题{/block}
  </title>
  <!-- 引入样式 -->
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
  <link rel="stylesheet" href="/static/iconfont/iconfont.css">
  <!-- import Vue before Element -->
  {if condition="env('APP_DEBUG')"}
  <!-- 开发版 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  {else/}
  <!-- 正式版 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  {/if}

  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
  <!-- 引入组件库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>

  <!-- 验证器 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vee-validate/3.4.11/vee-validate.full.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vee-validate/3.4.11/rules.min.js" type="module"></script>
  <script src="/static/js/vee-efile.js"></script>
  {block name="css"}{/block}
</head>

<body>
  <div id="app" style="margin:10px 10px 0 10px;display: none;">
    {block name="main"}{/block}
  </div>
</body>
<script> 

  let Axios = axios.create({
    baseURI: '/',
    headers: {
      'X-Requested-With': 'XMLHttpRequest',
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    },
    transformRequest: [function (data) {
      const d = Qs.stringify(data);
      return d;
    }]
  });
</script>

{block name="js"}
<script>
  var Main = {
    data() { //数据
      return {

      }
    },
    mounted() { //初始化

    },
    methods: { //函数

    },
    computed: { //计算属性

    }
  }
</script>
{/block}

<script>
  var Root = {
    mixins: [Main], //混入
    data() { //数据
      return {

      }
    },
    created() {
      this.$nextTick(() => {
        document.getElementById('app').style.display = 'block';
      })
    },
    mounted() { //初始化

    },
    methods: { //函数
      post(url, data) {
        return new Promise((resolve, reject) => {
          Axios.post(url, data).then((res) => {
            if (res.data.code != 1) {
              this.$message.error(res.data.msg);
              return reject(res.data.msg);
            }
            resolve(res.data);
          }).catch((err) => {
            this.$message.error(err);
            reject(err);
          });
        });
      },
      get(url) {
        return new Promise((resolve, reject) => {
          Axios.get(url).then((res) => {
            if (res.data.code != 1) {
              this.$message.error(res.data.msg);
              return reject(res.data.msg);
            }
            resolve(res.data);
          }).catch((err) => {
            this.$message.error(err);
            reject(err);
          });
        });
      },           
    },
    computed: { //计算属性

    }
  }
  var Ctor = Vue.extend(Root);
  Vue.component('ValidationObserver', VeeValidate.ValidationObserver);
  Vue.component('ValidationProvider', VeeValidate.ValidationProvider);
  var vm = new Ctor().$mount('#app');
</script>

</html>

页面示例

{extend name='public/vue'/}
{block name='css'}

{/block}
{block name='main'}

{/block}
{block name='js'}
<script>
  var Main = {
    data() { //数据
      return {

      }
    },
    mounted() { //初始化

    },
    methods: { //函数

    },
    computed: { //计算属性

    }
  }
</script>
{/block}

Vee-Validate3

官方手册

  • 在模板中引入js
<script src="https://cdn.bootcdn.net/ajax/libs/vee-validate/3.4.11/vee-validate.full.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vee-validate/3.4.11/rules.min.js" type="module"></script>
  • 加入组件
Vue.component('ValidationObserver', VeeValidate.ValidationObserver);
Vue.component('ValidationProvider', VeeValidate.ValidationProvider);
  • 本地化
VeeValidate.localize('cn',
    {
        "code": "zh_CN",
        "messages": {
            "alpha": "{_field_}只能包含字母字符",
            "alpha_dash": "{_field_}能够包含字母数字字符、破折号和下划线",
            "alpha_num": "{_field_}只能包含字母数字字符",
            "alpha_spaces": "{_field_}只能包含字母字符和空格",
            "between": "{_field_}必须在{min}与{max}之间",
            "confirmed": "{_field_}不能和{target}匹配",
            "digits": "{_field_}必须是数字,且精确到{length}位数",
            "dimensions": "{_field_}必须在{width}像素与{height}像素之间",
            "email": "{_field_}不是一个有效的邮箱",
            "excluded": "{_field_}不是一个有效值",
            "ext": "{_field_}不是一个有效的文件",
            "image": "{_field_}不是一张有效的图片",
            "oneOf": "{_field_}不是一个有效值",
            "integer": "{_field_}必须是整数",
            "length": "{_field_}长度必须为{length}",
            "max": "{_field_}不能超过{length}个字符",
            "max_value": "{_field_}必须小于或等于{max}",
            "mimes": "{_field_}不是一个有效的文件类型",
            "min": "{_field_}必须至少有{length}个字符",
            "min_value": "{_field_}必须大于或等于{min}",
            "numeric": "{_field_}只能包含数字字符",
            "regex": "{_field_}格式无效",
            "required": "{_field_}是必须的",
            "required_if": "{_field_}是必须的",
            "size": "{_field_}必须小于{size}KB",
            "double": "{_field_}字段必须为有效的小数"
        }
    }
);
  • 使用实例
{extend name='public/vue'/}
{block name='css'}
<style>
  .error {
    border: 1px solid red;
  }

  .success {
    border: 1px solid green;
  }
</style>
{/block}
{block name='main'}
<validation-observer ref="vee-table" tag="form">
  <table>
    <tr>
      <th>文件ID</th>
      <th>序号</th>
      <th>文件标题</th>
      <th>形成日期</th>
    </tr>
    <tr v-for="file in files">
      <td>
        <validation-provider name="文件id" rules="required|integer|min_value:1" v-slot={errors}>
          <input type="text" name="id" v-model="file.id" :class="errors.length > 0 ? 'error' : 'success'" :title="errors[0]">
        </validation-provider>
      </td>
      <td>
        <validation-provider name="序号" rules="required|integer|min_value:1" v-slot={errors}>
          <input type="text" name="no" v-model="file.no" :class="errors.length > 0 ? 'error' : 'success'" :title="errors[0]">
        </validation-provider>
      </td>
      <td>
        <validation-provider name="文件标题" rules="required" v-slot={errors}>
          <input type="text" name="title" v-model="file.title" :class="errors.length > 0 ? 'error' : 'success'" :title="errors[0]">
        </validation-provider>
      </td>
      <td>
        <validation-provider name="形成日期" :rules="{regex:/^\d{4}-\d{2}-\d{2}$/}" v-slot={errors}>
          <input type="text" name="time" v-model="file.time" :class="errors.length > 0 ? 'error' : 'success'" :title="errors[0]">
        </validation-provider>
      </td>
    </tr>
  </table>
</validation-observer>

{/block}
{block name='js'}
<script>
  var Main = {
    data() { //数据
      return {
        files: [
        {
          id: 1,
          no: 1,
          title: '文件1',
          time: '2021-08-16'
        },
        {
          id: 2,
          no: 2,
          title: '文件2',
          time: '2021-08-17'
        },
        {
          id: 3,
          no: 3,
          title: '文件3',
          time: '2021-08-18'
        }, ]
      }
    },
    mounted() { //初始化
      this.$refs['vee-table'].validate().then(res => {
        console.log(res);
      })
    },
    methods: { //函数

    },
    computed: { //计算属性

    }
  }
</script>
{/block}

注意事项

  • 如果validation-observer没有包含form标签,需要添加tag="form"
  • 使用了element-ui表格组件,自定义单元格input的验证发现无法自动验证,validation-provider需要增加设置属性 immediate

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: vee-validate是一个基于Vue.js的表单验证库,它可以让你轻松地在Vue.js应用中对表单进行验证。它允许你定义验证规则,并使用Vue组件将验证集成到表单中。vee-validate还具有自定义错误消息和本地化的功能,使你能够根据自己的需要定制验证流程。 ### 回答2: vee-validate是一个基于Vue.js的强大的表单验证库。它提供了许多内置的验证规则和自定义规则,可以在表单中轻松实现数据的验证和错误提示。 vee-validate的主要特点包括: 1. 简单易用:vee-validate提供了简洁明了的API,使用起来非常方便。通过简单地在表单输入元素上添加相应的指令,就可以实现验证功能。 2. 内置验证规则:vee-validate内置了许多常用的验证规则,包括必填、邮箱、URL、手机号码等等。只需设置规则名称即可应用相应的验证规则,无需自己编写复杂的验证逻辑。 3. 自定义规则:除了内置的规则,vee-validate还支持自定义规则。可以根据具体需求编写自定义的验证逻辑,非常灵活。 4. 错误提示:vee-validate提供了丰富的错误提示功能。在表单验证失败时,会自动显示相应的错误信息,用户可以清楚地知道出错的地方以及具体的错误原因。 5. 异步验证vee-validate还支持异步验证,可以进行远程数据验证或耗时操作的验证。在异步验证完成前,用户将无法提交表单。 总之,vee-validate是一个非常实用和强大的表单验证库,能够大大简化表单验证的实现,提高开发效率。无论是小型网站还是大型应用程序,都可以使用vee-validate来实现表单验证。 ### 回答3: vee-validate是一个基于Vue.js的表单验证插件。它提供了一组易于使用和灵活的验证规则,可以帮助我们在前端实现强大的表单验证功能。 vee-validate的使用非常简单。我们只需要在Vue组件中引入vee-validate并且在表单元素上添加相应的验证规则即可。例如,我们可以使用"required"规则来验证一个输入框是否为空,使用"email"规则来验证邮箱格式等。除了内置的规则外,vee-validate还允许自定义规则来满足我们的特定验证需求。 除了提供便捷的验证规则外,vee-validate还提供了灵活的错误信息处理方式。我们可以自定义错误消息,使其符合我们的项目需求,并可以在表单提交时进行错误信息的展示。 另外,vee-validate还提供了一些其他特性,如异步验证、条件验证等。异步验证允许我们在前端与后端进行交互,例如验证用户名是否已存在于数据库中。条件验证允许我们在特定的条件下进行验证,以满足复杂的验证需求。 总结来说,vee-validate是一款功能强大同时易于使用和灵活的表单验证插件。无论是简单的还是复杂的验证需求,vee-validate都能够提供良好的解决方案。它为我们开发表单功能提供了便利和可靠性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值