el-form表单验证:只在点击保存时校验(包含select、checkbox、radio)

本文介绍了如何在ElementUI中的el-form-item中控制input、select等组件的验证行为,包括使用validate-event属性、修改trigger设置以及在点击保存按钮时主动触发验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、input类型 

 input类型  在el-input里加入:validate-event="false"

<el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name" :validate-event="false"></el-input>
</el-form-item>

2、select、radio、checkbox、date类型 

在el-form-item中将rules里的trigger 修改为blur,不要加change方法即可改变值不触发校验

或者在data的rules里修改,相同效果

<el-form-item label="活动区域" prop="region" :rules=" {{ required: true, message: '请选择活动区域', trigger: 'blur' }">
   <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
 </el-form-item>


或者在data中修改rules配置相同效果
data() {
  return {
    rules: {

      region: [
         { required: true, message: '请选择活动区域', trigger: 'blur' }
        ],
}}}

 3、点击保存按钮时,用方法触发校验

**在点击确定按钮的时候,触发函数,然后进行验证**
handleSave () {
       this.$refs.form.validate((valid) => {
        if (valid) {
         // 校验成功
        } else {
          //校验失败
        }
      })
    },

### 如何在 `el-form` 中为 `el-tree` 组件配置和使用自定义验证规则 为了实现在 `Element UI` 的 `el-form` 表单中对 `el-tree` 组件应用验证规则,可以按照如下方法操作: #### 定义表单模型与初始状态 创建一个用于存储树形控件选中节点的数据字段,在初始化设定为空或默认值。 ```javascript data() { return { form: { treeSelection: [] // 存储被选中的节点ID列表或其他标识符 }, rules: { /* 验证规则 */ } }; } ``` #### 设置验证规则 对于 `el-tree` 控件而言,通常会关注是否有选项被勾选。因此可以在 `rules` 属性下针对上述定义的 `treeSelection` 字段指定相应的校验逻辑[^1]。 ```javascript rules: { treeSelection: [ { required: true, message: '请选择至少一项', trigger: ['change'] } // 当触发条件满足执行此条规则 ] }, ``` #### 自定义验证函数 如果需要更复杂的业务场景下的验证,则可以通过编写自定义验证器来完成特定需求。这允许开发者根据实际应用场景灵活调整验证行为。 ```javascript methods: { validateTree(value, callback) { if (this.form.treeSelection.length === 0) { callback(new Error('必须选择至少一个节点')); } else { // 进行其他复杂判断... callback(); } } } // 将其加入到rules里 rules: { treeSelection: [{ validator: this.validateTree, trigger: ['blur', 'change'] }] } ``` #### 使用 `el-tree` 和关联至 `el-form-item` 最后一步是在模板部分正确地将这些元素组合起来,并确保它们之间能够正常交互工作。 ```html <el-form :model="form" :rules="rules" ref="ruleForm"> <!-- ... --> <el-form-item label="树形结构:" prop="treeSelection"> <el-tree show-checkbox node-key="id" :default-checked-keys="form.treeSelection" @check-change="(nodeObj, checked) => handleCheckChange(nodeObj, checked)" :data="treeData"></el-tree> </el-form-item> <!-- ... --> </el-form> ``` 在此基础上还需要处理当用户改变选择更新表单域的状态,即实现 `handleCheckChange()` 方法以便同步最新的选择情况给 `form.treeSelection` 变量。 ```javascript methods: { handleCheckChange(data, checked) { const selectedKeys = []; function traverse(nodes) { nodes.forEach((node) => { if (node.checked || (checked && data.id === node.id)) { selectedKeys.push(node.id); } if (node.children && node.children.length > 0) { traverse(node.children); } }); } traverse(this.$refs.ruleForm.getCheckedNodes()); this.form.treeSelection = [...new Set(selectedKeys)]; } } ``` 通过这种方式就可以有效地把 `el-tree` 节点的选择状况纳入整个表单提交前后的合法性检查流程之中了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值