vue+ts+element-plus表单验证部分知识解析

//一个简陋的模板
<template>
  <div>
    <!--  size:用于控制该表单内组件的尺寸; ：rules:验证规则
    ref:用来获取对该表单组件的引用的属性    
    使用 ref 属性可以直接访问 el-form 的实例，
    从而可以进行一系列操作，如表单验证、重置、获取表单数据等
    -->
    <el-form
        style="max-width: 300px;margin: 200px"
        size="large"
        :rules="rules"
        :model="data"
        ref="ruleForm"
    >
      <el-form-item label="名字" prop="name">
        <el-input v-model="data.name" type="text" autocomplete="off">
        </el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="data.age" type="text" autocomplete="off"></el-input>
      </el-form-item>
      <el-button type="primary" @click="test">提交</el-button>
    </el-form>
  </div>
</template>


<script lang="ts" setup>

import {reactive, ref} from "vue";

const ruleForm = ref()
const data = reactive({
  name: '',
  age: ''
})

const myFunction= function (rule: any, value: any, callback: any){//自定义验证方法
    if(value===''){
      callback(new Error('名字为空'))
    }
}
//表单验证规则
//required(boolean) 是否为必填项,message:不符合规则后提示信心,trigger:验证逻辑的触发方式，blur失去焦点时出发，change:内容改变时触发
//validator: 自定义验证方法，可以根据情况自定义验证
const rules = {
  name: [{required: true,validator: myFunction,  trigger: 'blur'}],
  age: [{required: true, message: '请输入名字', trigger: 'blur'}]
}


const test = function () {
  ruleForm.value.validate((aaa: boolean) => { //aaa为表单验证是否符合规则返回的结果 boolean类型 验证通过为true
    //可根据aaa的结果来执行其他操作
    if(aaa){
      console.log('发送请求')
    }else {
      console.log('其他')
    }
    console.log(aaa)
  })
}
</script>


<style scoped>

</style>