el-from 使用 rules自定义表单验证规则

 el-from 内使用的数据需使用 :model 相关联的值方可正常使用,关联值为数组状态 :rules="clientFormRules"  指明了校验规则使用rules规则对象,名称自定义;prop项,指明哪些字段可能使用校验规则

<el-form id="clientForm" ref="client" :model="clientForm" :rules="clientFormRules" label-width="110px" label-position="left">
          <el-card class="box-card" shadow="hover">
            <el-row>
              <el-col :span="8">
                <el-form-item label="名称" prop="titleValue">
                  <el-input v-model="clientForm.titleValue" maxlength="50" :disabled="false" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="简介" prop="contentValue">
                  <el-input v-model="clientForm.contentValue" maxlength="500" type="textarea" :autosize="{ minRows: 2, maxRows: 20}" :disabled="false" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form>

clentFrom为 :model 相关联的数组定义在data(return{})内,其名称必须与form的:rules属性绑定的rules规则对象名一致,clientFromRules 为定义相关的规则定义在data()内

  data() {
    var checkTitle = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('名称为空'))
      } else {
        callback()
      }
    }
    var checkContent = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('简介为空'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      publish_note: false,
      activeButton: '保存',
      title: '新增',
      table_loading: false,
      maxTableHeight: '650px',
      tableData: [],
      selectedContent: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      clientForm: {
        titleValue: '',
        contentValue: ''
      },
      clientFormRules: {
        titleValue: [{
          required: true,
          validator: checkTitle,
          trigger: 'blur'
        }],
        contentValue: [{
          required: true,
          validator: checkContent,
          trigger: 'blur'
        }]
      }
    }
  },

rule项

rule项,即规则数组的元素,这是本文要重点探讨的项目。这里先就上述rules的各元素项解析一下:

  • required:表示是否必须有值,取值为true/false,如为true,表示必须有值,如果无值,则校验不通过;如为false,则允许无值,但在有值的情况下,不影响其它规则的使用。
  • message:提示消息,在校验不通过时提示此消息。
  • trigger:触发方式,取值为blur/change,blue表示失去焦点,一般在input组件中使用;change为值改变,一般在选择框中使用。
  • min:字符串最小长度。
  • max:字符串最大长度。

validate 任一表单项被校验后触发,后跟自定规则 validator: checkContent 规则定义在data内,不论结果是否正确都要执行 callback()

var checkContent = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('掲載強化文言を入力してください。'))
      } else {
        callback()
      }
    }
Type 内置类型(定义在prop关联的数据内,非定义类型的数据就会报错)
  • string: 必须是 stringThis is the default type.
  • number: 必须是 number.
  • boolean: 必须是 boolean.
  • method: 必须是 function.
  • regexp: 必须是正则或者是在调用 new RegExp 时不报错的字符串.
  • integer: 整数.
  • float: 浮点数.
  • array: 必须是数组,通过 Array.isArray 判断.
  • object: 是对象且不为数组.
  • enum: 值必须出现在 enmu 枚举值中.
  • date: 合法的日期,使用 Date 判断
  • url: url.
  • hex: 16进制.
  • email: 邮箱地址.
contentValue: [{
  type: "string", 
  required: true,
  validator: checkContent,
  trigger: 'blur'
}]

### el-form 中自定义组件的验证规则实现方法 在 `el-form` 中对自定义组件进行验证时,可以通过绑定 `v-model` 和设置 `rules` 属性的方式完成。具体来说,需要确保自定义组件能够正确地向父级组件传递数据,并支持双向绑定。 以下是详细的实现方式: #### 1. 自定义组件的数据同步 为了使 `el-form` 能够识别并验证自定义组件中的值,需确保该组件实现了 `value` 的输入和事件触发机制。这通常通过 Vue 的 `model` 选项或 `props` 和 `$emit('input', value)` 来实现[^1]。 ```vue <template> <div> <!-- 这里是一个简单的自定义组件 --> <input :value="value" @input="updateValue($event.target.value)" /> </div> </template> <script> export default { props: ['value'], // 接收外部传入的值 methods: { updateValue(value) { this.$emit('input', value); // 将新值通知给父组件 } } }; </script> ``` #### 2.el-form 中使用自定义组件 当将自定义组件嵌套到 `el-form-item` 中时,必须为其指定 `prop` 属性以便关联对应的校验规则。此外,还需要调用 `this.dispatch` 方法手动触发表单的校验逻辑[^2]。 ```vue <template> <el-form ref="formRef" :model="formData" :rules="rules"> <el-form-item prop="customField"> <CustomInput v-model="formData.customField" /> </el-form-item> </el-form> </template> <script> import CustomInput from './CustomInput.vue'; export default { components: { CustomInput }, data() { return { formData: { customField: '' }, rules: { customField: [ { required: true, message: '这是必填项!' }, // 基础校验规则 { validator: validateCustomRule, trigger: 'blur' } // 自定义校验函数 ] } }; } }; function validateCustomRule(rule, value, callback) { if (value !== 'expected') { callback(new Error('请输入预期的内容')); } else { callback(); } } </script> ``` #### 3. 手动触发表单校验 如果自定义组件内部有复杂交互逻辑,则可能需要显式调用 `validate()` 或其他相关 API 完成动态校验操作[^1]。 ```javascript this.$refs.formRef.validate((valid) => { if (!valid) { console.log('表单未通过验证'); } else { console.log('表单已成功提交'); } }); ``` --- ### 注意事项 - **双向绑定**:确保自定义组件支持 `v-model` 并能实时更新其状态。 - **校验时机**:合理配置 `trigger` 参数(如 `'change'` 或 `'blur'`),以决定何时触发校验行为。 - **错误提示显示**:默认情况下,`el-form-item` 可自动处理错误消息展示;但如果涉及特殊样式调整,可进一步定制化设计。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值