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'
}]

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值