vue 更换form表单rule直接验证了?

Question

if(!id)
  {
    state.dialogTitle = '新增管理'
    state.admin_rules = state.add_rules
    state.adminType = 1
    state.dialogAdminVisible = true
  }else{
    state.dialogTitle = '编辑管理'
    state.admin_rules = state.edit_rules
    state.adminType =2
    state.dialogAdminVisible = true
    edit(id)
  }

动态更换rule后打开弹框表单直接验证了

这样写也不行

if(!id)
  {
    state.dialogTitle = '新增管理'
    state.admin_rules = state.add_rules
    state.adminType = 1
    state.dialogAdminVisible = true
    nextTick(()=>{
       adminForm.value.clearValidate(['nickname'])
    })
  }else{
    state.dialogTitle = '编辑管理'
    state.admin_rules = state.edit_rules
    state.adminType =2
    state.dialogAdminVisible = true
    edit(id)
  }

完整内容

<el-dialog :title="state.dialogTitle" v-model="state.dialogAdminVisible" @close="handleClose">
  <el-form :model="state.admin" :rules="state.admin_rules" ref="adminForm" >
    <el-form-item label="昵称" prop="nickname">
      <el-input v-model="state.admin.nickname" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="账号" prop="name">
      <el-input v-model="state.admin.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="state.admin.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="状态" >
      <el-switch v-model="state.admin.status" active-value="2" inactive-value="1"></el-switch>
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </span>
  </template>
</el-dialog>

const state = reactive({
   dialogAdminVisible:false,
    dialogTitle:'',
    adminType:'',
    eidtId:'',
    admin:{
      nickname:'',
      name:'',
      password:'',
      avatar:'',
      status:''
    },
    admin_rules:{},
    add_rules:{
      nickname:[{ required: true, message: '请输入昵称', trigger: 'blur' },],
      name:[{ required: true, message: '请输入账户名', trigger: 'blur' },],
      password:[{ required: true, message: '请输入密码', trigger: 'blur' },],
    },
    edit_rules: {
      nickname:[{ required: true, message: '请输入昵称', trigger: 'blur' },],
      name:[{ required: true, message: '请输入账户名', trigger: 'blur' },],
    }

})
const add = (id)=>{
  if(!id)
  {
    state.dialogTitle = '新增管理'
    state.admin_rules = state.add_rules
    state.adminType = 1
    state.dialogAdminVisible = true
      nextTick(()=>{
       adminForm.value.clearValidate(['nickname'])
    })
  }else{
    state.dialogTitle = '编辑管理'
    state.admin_rules = state.edit_rules
    state.adminType =2
    state.dialogAdminVisible = true
    edit(id)
  }
 
 
}
const handleClose = ()=> {
  adminForm.value.resetFields()
}

Answer 1

因为你的校验类型是blur, 打开时触发了校验, 可以将方法改为change, 没有进行任何输入时，不会触发change
或者用ref调用resetFields:
手动调一下

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。