el-form 校验分离

src\utils\validate.ts

// 邮箱
const emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
export const isValidEmail = (str: string) => emailReg.test(str)

项目文件

import { isValidEmail } from '@/utils/validate'


 email: [
    {
      required: false,
      trigger: ['blur'],
      validator: (rule: any, value: string, cb: Function) => {
        cb()
      }
    },
    {
      required: false,
      trigger: ['blur'],
      validator: (rule: any, value: string, cb: Function) => {
        if(!value) {
          cb()
        } else {
          if(isValidEmail(value)) {
            cb()
          } else {
            cb(new Error('请输入正确格式的邮箱'))
          }
        }
      }
    }
  ],

el-form 校验

 <el-form
  ref="elFormRef"
  :model="reviewData"
  label-width="80px"
  :rules="rules"
>
  <el-form-item label="审核结果">
    <el-select
      v-model="reviewData.opinion"
      placeholder="请选择审核结果"
      style="width: 200px;"
    >
      <el-option
        label="同意"
        value="agree"></el-option>
      <el-option
        label="不同意"
        value="refuse"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item
    v-if="reviewData.opinion == 'refuse'"
    label="拒绝原因"
    prop="reason"
  >
    <el-input
      v-model="reviewData.reason"
      style="width: 200px;"
      :maxlength="100"
    ></el-input>
  </el-form-item>
</el-form>


import type { ElForm } from 'element-ui/types/form'


const elFormRef = shallowRef<InstanceType<typeof ElForm>>()
async function submit() {
  const pass = await elFormRef.value?.validate()
  if(!pass) return  //未通过校验
}

interface rulesType {
  reason:string
}

//校验规则
const rules: Partial<Record<keyof rulesType, any[]>> = {
  reason: [
    { required: true, message: '请填写拒绝原因', trigger: 'blur' },
    // { 
    //   validator: (_: any, value: number, cb: Function) => {
    //     if(value > 100000) {
    //       cb('不能大于100000')
    //     }else if(value < 0) {
    //       cb('不能小于0')
    //     } else {
    //       cb()
    //     }
    //   }, 
    //   trigger: 'blur' 
    // }
  ],
}

阻止回车自动提交

给form表单添加 @submit.native.prevent

<el-form :model="form" ref='form' @submit.native.prevent>
    <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
</el-form>

使用两个 el-input

<el-form :model="form" ref='form' @submit.native.prevent>
    <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="即时配送">
        <el-input v-model="form.delivery"></el-input>
    </el-form-item>
</el-form>