[PHP知识库] 验证器vee-validate3的使用

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> PHP知识库 -> 验证器vee-validate3的使用 -> 正文阅读

[PHP知识库]验证器vee-validate3的使用

背景

项目使用的是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}