element Form表单自定义校验

记录下element中Form如何自定义校验

html

<el-form :model="formBanner" ref="formBanner" label-width="100px" :rules="checkItem">
          <el-form-item label="名称：" prop="name">
            <el-input v-model.trim="formBanner.name" size="mini" class="set-width"></el-input>
          </el-form-item>
          <el-form-item label="图片：" prop="slideShow" class="upload-probox">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-change="beforeUpload"
              :file-list="fileList"
              :http-request="uploadfileIcon"
              :before-remove="uploadbeforRemove"
              :limit="1"
              ref="uploadImg"
            >
              <span slot="default" class="check-text">上传图片</span>
              <div class="tips">
                <span>图片尺寸为: 585像素*830像素</span>
                <span>图片不得超过 300kb（jpg或者png）</span>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item required label="跳转地址：" prop="skipUrl" >
            <el-input v-model.trim="formBanner.skipUrl" size="mini" class="set-width"></el-input>
          </el-form-item>
          <el-form-item label="排序：" prop="sort">
            <el-input-number size="mini" v-model="formBanner.sort" :min="0" :max="Infinity"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" @click="cancel">取 消</el-button>
            <el-button size="mini" type="primary" @click="submit" style="margin-left: 30px">确 定</el-button>
          </el-form-item>
        </el-form>

1583421221(1).jpg

rules代码

checkItem: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        skipUrl: [{ required: true, validator: checkUrl, trigger: 'blur' }],
        slideShow: [{ validator: checkImg, required: true, trigger: 'change' }],
        sort: [{ required: true, validator: checkSort, trigger: 'blur' }]
      },

自定义校验图片使用到validator属性checkImg 是要进行的校验函数
vue项目中不论是用ts还是js 此段代码放到data中，return前

 const checkImg = (rule, value, callback) => {
      if (!value) {
        callback(new Error('图片不能为空'));
      } else {
        callback();
      }
    };

检验url是否符合

const checkUrl = (rule, value, callback) => {
      if (!value) {
        callback(new Error('跳转地址不能为空'));
      }
      setTimeout(() => {
        let url = value.match(
          /((http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?)/g
        );
        if (url) {
          if (value.length > 300) {
            callback(new Error('跳转地址长度限制300位以内'));
          } else {
            callback();
          }
        } else {
          callback(new Error('请输入规范的url地址'));
        }
      });
    };

检验是否是正整数

const checkSort = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('排序码不能为空'));
      }
      setTimeout(() => {
        if (Number.isInteger(value)) {
          if (value.toString().length > 5) {
            callback(new Error('排序码长度限制5位以内'));
          } else {
            callback();
          }
        } else {
          callback(new Error('排序码必须是正整数'));
        }
      });
    };

项目中弹出一个对话框且为form表单提交时，关闭后再次打开会留有上次的数据
此时关闭前或重新打开时需要
清除表单校验：

this.$refs.formBanner.resetFields()

清除upload file

this.$refs.uploadImg.clearFils()