vue3之表单验证

3相信很多小伙伴都玩起来了，表单验证是很正常不过的事情，话不多说，直接贴代码,

<el-form :model="editForm" ref="editFormRef" :rules="rules"> 
  <el-form-item label="姓名:" prop="name" :required="true">
    <el-input  v-model="editForm.name" placeholder="请输入姓名" />
  </el-form-item>

顺便提一嘴， required 代表表单前面的小红星 

用到的校验，我们可以放在公共文件中 utils/validate.js中

// 验证姓名，长度10个字符，不带数字
export function validateVName(value){
    let reg = /^[0-9]+.?[0-9]*$/
    return reg.test(value)? true : false;
}

然后再我们需要的文件中，引入validateVName这个函数

随后再setup中声明一手，

.....
import {
  validateVName
} from '@/units/validate'
export default {
  setup() {
    // 校验
    const validateName = (rule,value,callback) => {
      if(value == '') callback(new Error('名字不能为空！'));
      else if(validateVName(value)){
        callback(new Error('不可以带数字！'))
      }else if(value.length >= 10){
        callback(new Error('长度最多10个字符！'))
      }else callback();
    }
......

然后在rules中声明一手 

  const state = reactive({
....
rules: {
   name: [{ validator: validateName, trigger: 'blur' }]
}
....
})

写法与2不太一样，学习一下