Vue3+Yup进行数据验证

Vue3+Yup进行数据验证

npm安装：

npm i yup

使用

import * as Yup from "yup";

//配置
const login = Yup.object().shape({
  // username为string格式，必填（错误提示为：请输入用户名）
  username: Yup.string().required('请输入用户名').label("username"),
  password: Yup.string().required('请输入密码').min(4,'最小4位字符').max(14,'最多14个字符').label("Password"),
});


在VForm中绑定
<VForm
  class="form w-100 text-left px-8"
  id="kt_login_signin_form"
  @submit="onSubmitLogin"
  :validation-schema="login"
  :initial-values="{ username: '', password: '' }"
>
<!--绑定参数-->
<div class="fv-row mb-10">
  <!--begin::Label-->
  <label class="form-label fs-6 fw-medium text-dark">用户名</label>
  <!--end::Label-->

  <!--begin::Input-->
  <Field
    tabindex="1"
    class="form-control form-control-lg"
    type="text"
    name="username"
    autocomplete="off"
  />
  <!--end::Input-->
  <div class="fv-plugins-message-container">
    <div class="fv-help-block">
<!--异常信息显示的位置-->
      <ErrorMessage name="username" />
    </div>
  </div>
</div>

更多配置见官网：https://www.npmjs.com/package/yup