vue3表单验证

℘团子এ

已于 2023-08-28 10:19:03 修改

阅读量627

点赞数

分类专栏： vue3 文章标签：前端 javascript vue.js elementui typescript

于 2023-02-12 11:32:31 首次发布

本文链接：https://blog.csdn.net/2202_75509848/article/details/128992786

版权

vue3 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

该代码段展示了在Vue3中使用模板语法创建一个包含商品信息的表单，并进行了详细的验证规则设置，包括必填项、数字格式和自定义验证方法，确保原始价格小于当前价格和VIP价格。在JS部分，定义了表单数据、验证规则以及验证回调函数，用于确认和提交表单。

摘要由CSDN通过智能技术生成

在html中

<template>
  <el-form :model="form" ref="ruleFormRef" :rules="rules">
    <!-- 商品名称 -->
    <el-form-item label="商品名称" label-width="100px" prop="title">
      <el-input v-model.trim="form.title" autocomplete="off" />
    </el-form-item>
    <!-- 原始价格 -->
    <el-form-item label="原始价格" label-width="100px" prop="originalPrice">
      <el-input v-model="form.originalPrice" autocomplete="off">
        <template #append>元</template>
      </el-input>
    </el-form-item>
    <!-- 当前价格 -->
    <el-form-item label="当前价格" label-width="100px" prop="price">
      <el-input v-model="form.price" autocomplete="off">
        <template #append>元</template>
      </el-input>
    </el-form-item>
    <!-- VIP价格 -->
    <el-form-item label="VIP价格" label-width="100px" prop="vipPrice">
      <el-input v-model="form.vipPrice" autocomplete="off">
        <template #append>元</template>
      </el-input>
    </el-form-item>
  </el-form>
  <!-- 确定 -->
  <div style="width: 100%;text-align: right;margin-top: 20px;">
    <el-button type="primary" @click="confirm(ruleFormRef)">保存商品</el-button>
  </div>
</template>

说明：:rules="rules"是绑定的验证规则，一定要绑定。prop="title"是需要验证的值，一定要对应输入框中绑定的值，如v-model.trim="form.title"

在js中

<script setup lang="ts">
// 获取虚拟节点
const ruleFormRef = ref<FormInstance>()

// 表单验证
let form = ref({
  title: '',
  originalPrice: undefined,
  price: undefined,
  vipPrice: undefined
})
//验证规则
const rules = reactive({
  title: [
    { required: true, message: '商品名称不能为空', trigger: 'blur' },
  ],
  originalPrice: [
    { validator: originalPrice, trigger: 'blur' },
    // { required: true, message: '原始价格不能为空', trigger: 'blur' },
    { required: true, pattern: /^(\d+.?)?\d{0,2}$/, message: '请输入数字或者2位的小数' }
  ],
  price: [
    { validator: price, trigger: 'blur' },
    // { required: true, message: '价格不能为空', trigger: 'blur' },
    { required: true, pattern: /^(\d+.?)?\d{0,2}$/, message: '请输入数字或者2位的小数' }
  ],
  vipPrice: [
    { validator: vipPrice, trigger: 'blur' },
    // { required: true, message: 'VIP价格为空', trigger: 'blur' },
    { required: true, pattern: /^(\d+.?)?\d{0,2}$/, message: '请输入数字或者2位的小数' }
  ]
})

//追加的验证规则
const originalPrice = (rule: string, value: string, callback: Function) => {//密码验证
  if (Number(value) <= Number(form.value.price) || Number(value) <= Number(form.value.vipPrice) || Number(form.value.price) <= Number(form.value.vipPrice)) {
    callback(new Error('原始价格>当前价格>vip价格'))
  }
  callback()
}
const price = (rule: string, value: string, callback: Function) => {//密码验证
  if (Number(form.value.originalPrice) <= Number(value) || Number(value) <= Number(form.value.vipPrice)) {
    callback(new Error('原始价格>当前价格>vip价格'))
  }
  callback()
}
const vipPrice = (rule: string, value: string, callback: Function) => {//密码验证
  if (Number(form.value.originalPrice) <= Number(value) || Number(form.value.price) <= Number(value)) {
    callback(new Error('原始价格>当前价格>vip价格'))
  }
  callback()
}
const checkUnit = (rule: string, value: number | string, callback: Function) => {
  if (!value) {
    callback(new Error('此处不能为空'))
  } else if (form.value.unit != "件" && form.value.unit != "个" && form.value.unit != "盒") {
    callback(new Error('请输入正确的单位！'))
  } else {
    callback()
  }
}
// 确认修改/添加
const confirm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log(form.value, "form");
    }
  })
}
</script>

说明：验证规则rules中，required是是否在页面中显示“*”标记（是否为必填项）；message是提示消息；trigger是触发验证的形式，如点击触发、焦点失去触发、change触发等等；validator是绑定追加验证的方法；pattern是正则表达式验证