el-form 自定义校验规则

这里我们使用v3+ts来编写校验规则

代码结构：

<template>
 <el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="top">
        <el-form-item label="地址" prop="side" :class="{'input-focused': focusMark === 'side','input-has-value': side}" class="input-container">
          <input type="text" v-model="side" @blur="formBlur" @focus="formFocus('side')"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :class="{'input-focused': focusMark === 'email','input-has-value': form.email}" class="input-container">
          <input type="text" v-model="form.email" @blur="formBlur" @focus="formFocus('email')"/>
        </el-form-item>

      </el-form>
</template>

//
rules  定义的校验规则
label-position  输入框文字出现的位置 默认为 right

定义数据：

<template>
 <el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="top">
        <el-form-item label="地址" prop="side" :class="{'input-focused': focusMark === 'side','input-has-value': side}" class="input-container">
          <input type="text" v-model="side" @blur="formBlur" @focus="formFocus('side')"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :class="{'input-focused': focusMark === 'email','input-has-value': form.email}" class="input-container">
          <input type="text" v-model="form.email" @blur="formBlur" @focus="formFocus('email')"/>
        </el-form-item>

      </el-form>
</template>

//
rules  定义的校验规则
label-position  输入框文字出现的位置 默认为 right

<script lang='ts' setup>
import {ref,reactive} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  side: string
  email: string
}
//定义表单数据
const form=reavtive<RuleForm >（{
    side:"",
    email:""
}）

</script>

定义校验规则：

<template>
 <el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="top">
        <el-form-item label="地址" prop="side" :class="{'input-focused': focusMark === 'side','input-has-value': side}" class="input-container">
          <input type="text" v-model="side" @blur="formBlur" @focus="formFocus('side')"/>
        </el-form-item>
        <el-form-item label="电话" prop="phone" :class="{'input-focused': focusMark === 'phone','input-has-value': form.phone}" class="input-container">
          <input type="text" v-model="form.email" @blur="formBlur" @focus="formFocus('phone')"/>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldPassWord">
          <input type="text" v-model="form.oldPassWord" @blur="formBlur" @focus="formFocus('oldPassWord')"/>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord" >
          <input type="text" v-model="form.newPassWord" @blur="formBlur" @focus="formFocus('newPassWord')"/>
        </el-form-item>
        <el-form-item label="确定密码" prop="enterPassWord" >
          <input type="text" v-model="form.enterPassWord" @blur="formBlur" @focus="formFocus('enterPassWord')"/>
        </el-form-item>
      </el-form>
</template>

//
rules  定义的校验规则
label-position  输入框文字出现的位置 默认为 right

<script lang='ts' setup>
import {ref,reactive} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  side: string
  phone: string
  oldPassWord:string
  newPassWord:string
  enterPassWord:string
}
const PRICEREG = /(^[1-9]{1}[0-9]*$)|(^[1-9]{1}[0-9]*\.[0-9]{1,2}$)|([0]{1}\.\d{1,2}$)/;//必须把0和0.0以及0.00排除  正则验证
const ruleFormRef= ref<FormInstance>()
//定义表单数据
const form=reavtive<RuleForm >（{
    side:"",
    phone:"",
    oldPassWord:"",
    newPassWord:"",
    enterPassWord:""
}）

//确定新密码校验
const enterpassword=((rule:any, value:any, callback:any)=>{
    if(value === ''){  
    callback(new Error('请输入密码'));
  }else if(value !== form.newPassWord){
    callback(new Error('两次密码不一致'));
  }else{
    callback()
  }
})
//定义校验规则
const rules=reactive<FormRules<form>>({
    side:[{
         required: true,  //是否为必填项
         message: '请输入地址', //提示内容
         trigger: 'blur' ,     // 触发提示方式
        }],
    phone:[{
           required: true,  //是否为必填项
           pattern: PHONE_REG,  //正则验证
           message: "请填写正确的手机号码",
           trigger: ["blur", "change"]   
        }],
    oldPassWord:[{
           required: true,  //是否为必填项 
           message: "请输入原密码",
           trigger: ["blur", "change"]
    }],
    newPassWord:[{
           required: true,  //是否为必填项 
           message: "请输入新密码",
           trigger: ["blur", "change"]
    }],
    enterPassWord:[{
           required: true,  //是否为必填项 
           validator:enterpassword,  // 使用定义好的验证规则
           trigger: ["blur", "change"]
    }]
})

使用校验规则时
只需要再 el-form-item 标签上 定义  prop='定义的校验规则名'
</script>

回调方法：

<template>
 <el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="top">
        <el-form-item label="地址" prop="side" :class="{'input-focused': focusMark === 'side','input-has-value': side}" class="input-container">
          <input type="text" v-model="side" @blur="formBlur" @focus="formFocus('side')"/>
        </el-form-item>
        <el-form-item label="电话" prop="phone" :class="{'input-focused': focusMark === 'phone','input-has-value': form.phone}" class="input-container">
          <input type="text" v-model="form.email" @blur="formBlur" @focus="formFocus('phone')"/>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldPassWord">
          <input type="text" v-model="form.oldPassWord" @blur="formBlur" @focus="formFocus('oldPassWord')"/>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord" >
          <input type="text" v-model="form.newPassWord" @blur="formBlur" @focus="formFocus('newPassWord')"/>
        </el-form-item>
        <el-form-item label="确定密码" prop="enterPassWord" >
          <input type="text" v-model="form.enterPassWord" @blur="formBlur" @focus="formFocus('enterPassWord')"/>
        </el-form-item>
      </el-form>
<el-button @click="resetForm(rulePassWordFormRef)">重置</el-button>
<el-button type="primary" @click="enterChange(rulePassWordFormRef)">确定</el-button>
</template>

//
rules  定义的校验规则
label-position  输入框文字出现的位置 默认为 right

<script lang='ts' setup>
import {ref,reactive} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  side: string
  phone: string
  oldPassWord:string
  newPassWord:string
  enterPassWord:string
}
const PRICEREG = /(^[1-9]{1}[0-9]*$)|(^[1-9]{1}[0-9]*\.[0-9]{1,2}$)|([0]{1}\.\d{1,2}$)/;//必须把0和0.0以及0.00排除  正则验证
const ruleFormRef= ref<FormInstance>()
//定义表单数据
const form=reavtive<RuleForm >（{
    side:"",
    phone:"",
    oldPassWord:"",
    newPassWord:"",
    enterPassWord:""
}）

//确定新密码校验
const enterpassword=((rule:any, value:any, callback:any)=>{
    if(value === ''){  
    callback(new Error('请输入密码'));
  }else if(value !== form.newPassWord){
    callback(new Error('两次密码不一致'));
  }else{
    callback()
  }
})
//定义校验规则
const rules=reactive<FormRules<form>>({
    side:[{
         required: true,  //是否为必填项
         message: '请输入地址', //提示内容
         trigger: 'blur' ,     // 触发提示方式
        }],
    phone:[{
           required: true,  //是否为必填项
           pattern: PHONE_REG,  //正则验证
           message: "请填写正确的手机号码",
           trigger: ["blur", "change"]   
        }],
    oldPassWord:[{
           required: true,  //是否为必填项 
           message: "请输入原密码",
           trigger: ["blur", "change"]
    }],
    newPassWord:[{
           required: true,  //是否为必填项 
           message: "请输入新密码",
           trigger: ["blur", "change"]
    }],
    enterPassWord:[{
           required: true,  //是否为必填项 
           validator:enterpassword,  // 使用定义好的验证规则
           trigger: ["blur", "change"]
    }]
})

//使用校验规则时
//只需要再 el-form-item 标签上 定义  prop='定义的校验规则名'

//回调方法
/**
* 重置form
**/
const resetForm=(formEl: FormInstance | undefined)=>{
      if (!formEl) return
      formEl.resetFields()  //置空输入框

}
/**
* 确定
**/
const enterChange =async (formEl: FormInstance | undefined)=>{
    if (!formEl) return
     await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')  //校验成功
    } else {
      console.log('error submit!', fields)  //校验失败
    }
  })
}
</script>

以上就是 使用el-form 自定义校验规则的详细教程，有问题请留言，或者私信！！！