vue3 + element-ui表单中的自定义规则验证

那个表单自带的规则就很简单，设置一下参数就可以了。这个自定义规则就让我吃了很久的亏，我都想放弃这个验证了，后面查阅了很多，算是解决了。

element-ui 的代码段

<!-- 主体区 -->
    <el-form
    label-width="70px"
    :model="formLabelAlign"
    style="max-width: 460px"
    :rules="rule"
    ref="addref"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formLabelAlign.username" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="formLabelAlign.password" />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="formLabelAlign.email" />
    </el-form-item>
    <el-form-item label="手机" prop="mobile">
      <el-input v-model="formLabelAlign.mobile" />
    </el-form-item>
  </el-form>
    <!-- 底部区 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="adduser"
          >确认</el-button
        >
      </span>
    </template>

 自定义规则  和 验证规则（为什么要这样写，因为这是有顺序的，不然就没效果，先自定义规则，再验证规则）

export default {
    setup () {
        const state = reactive({
        })
        // 自定义验证规则，然后再添加进去
        //  验证邮箱
        var checkemail=(rule,value,callback)=>{
            // 验证邮箱的表达式
            const regemail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
            // 如果返回true
            if(regemail.test(value)){
                // 合法的邮箱
                return callback()
            }
            callback(new Error('请输入合法的邮箱，包含@'))

        }
        // 验证手机
        var checkmobile=(rule,value,callback)=>{
            const regMobile=/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])            [0-9]{8}$/
            if(regMobile.test(value)){
                return callback()
            }
            callback(new Error('请输入合法的手机号'))
        }
        // 验证规则
        const rule={
                username:[
                    {required:true,message:'请输入用户名',trigger:'blur'},
                    {min:3,max:8,message:'请输入3-8位字符长度',trigger:'blur'}
                ],
                password:[
                    {required:true,message:'请输入密码',trigger:'blur'},
                    {min:6,max:13,message:'请输入6-13位密码长度',trigger:'blur'}
                ],
                email:[
                    {required:true,message:'请输入邮箱',trigger:'blur'},
                    {validator:checkemail,trigger:'blur'}
                ],
                mobile:[
                    {required:true,message:'请输入手机号',trigger:'blur'},
                    {validator:checkmobile,trigger:'blur'}
                ]
            }
        return {
            ...toRefs(state),rule
        }
    }
}

 记得把rule返回出去，就是加到return里面

 花了我几天时间，希望点个赞支持一下吧~