Vue from-validate 表单验证的示例代码

下面是Vue表单验证的示例代码攻略。

1. 安装依赖和引入相关组件

首先需要安装依赖包，包括vee-validate和vue-i18n等。这里以npm为例，执行以下命令：

npm install vee-validate@next vue-i18n

然后在Vue项目入口文件中引入依赖：

import { createApp } from 'vue';
import App from './App.vue';
import { defineRule, configure } from 'vee-validate';
import { Field, Form, ErrorMessage, defineRule as defineBulmaRule } from 'vee-validate';
import zhCN from '@vee-validate/i18n/dist/locale/zh_CN.json';

// 引入Bulma样式
import './style.scss';

// 导入自定义的表单规则
import rules from './rules';

// 注册自定义的表单规则
Object.keys(rules).forEach(rule => {
  defineRule(rule, rules[rule]);
});

// 注册Bulma表单规则
defineBulmaRule('required', (value) => {
  if (!value || !value.length) {
    return '此项为必填项';
  }
  return true;
});

// 初始化表单验证配置
configure({
  validateOnInput: true,
});

// 创建Vue应用
const app = createApp(App);

// 注册全局组件
app.component('Field', Field);
app.component('Form', Form);
app.component('ErrorMessage', ErrorMessage);

// 注册中文语言包
app.use(createI18n({
  locale: 'zh_CN',
  messages: {
    zh_CN: zhCN,
  },
}));

// 绑定应用到DOM节点上
app.mount('#app');

2. 创建模板

在Vue组件中创建表单模板：

<template>
  <div>
    <h1>Vee-validate示例</h1>
    <form @submit="onSubmit" class="form">
      <div class="field">
        <label class="label">用户名</label>
        <div class="control">
          <Field name="username" class="input" />
          <ErrorMessage name="username" />
        </div>
      </div>
      <div class="field">
        <label class="label">电子邮箱</label>
        <div class="control">
          <Field name="email" type="email" class="input" />
          <ErrorMessage name="email" />
        </div>
      </div>
      <div class="field">
        <label class="label">密码</label>
        <div class="control">
          <Field name="password" type="password" class="input" />
         <ErrorMessage name="password" />
        </div>
      </div>
      <div class="field">
        <label class="label">确认密码</label>
        <div class="control">
          <Field name="confirmPassword" type="password" class="input" />
          <ErrorMessage name="confirmPassword" />
        </div>
      </div>
      <div class="field">
        <div class="control">
          <button
            type="submit"
            class="button is-primary"
            :disabled="!$refs.form.validate()"
          >
            提交
          </button>
        </div>
      </div>
    </form>
  </div>
</template>

3. 编写规则

在Vue组件中编写自定义表单校验规则：

import { required, email, min, max, confirmed } from 'vee-validate';

export default {
  username: [
    required('用户名不能为空'),
    max(16, '用户名不能超过 16 个字符')
  ],
  email: [
    required('电子邮箱不能为空'),
    email('请输入正确的电子邮箱地址')
  ],
  password: [
    required('密码不能为空'),
    min(8, '密码长度不能少于 8 个字符')
  ],
  confirmPassword: [
    required('确认密码不能为空'),
    confirmed('密码不一致，请重新输入')
  ]
}

4. 完成表单提交

在Vue组件中编写表单提交处理函数：

import { ref } from 'vue';

export default {
  setup() {
    const formValues = ref({
      username: '',
      email: '',
      password: '',
      confirmPassword: '',
    });

    function onSubmit() {
      // 处理表单提交的逻辑，例如将数据保存到后端或显示成功提示框等
      console.log(formValues.value);
    }

    return { formValues, onSubmit };
  },
}

完成以上步骤后，即可完成Vue from-validate表单验证的示例代码。其中需要注意几点：

1. 需要在Vue组件中引入相关组件；
2. 需要创建模板并在模板中添加组件和绑定校验规则；
3. 需要编写自定义校验规则；
4. 需要编写表单提交处理函数。