【Element】表单 el-form

宾果的救星

已于 2023-05-08 20:33:26 修改

阅读量7.1k

点赞数 1

分类专栏： # Element 文章标签： elementui vue.js javascript

于 2022-11-25 03:00:00 首次发布

本文链接：https://blog.csdn.net/wuli_youhouli/article/details/127491345

版权

Element 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

自定义验证规则—区分callback和return callback

动态改变是否必填

触发所有项检验

触发所有项检验，不成功的情况仍然能点击按钮调用接口

ElementUI

验证

自定义验证规则—验证手机号

data() {
  var checkphone = (rule, value, callback) => {
    if (value === "") {
      callback(new Error("手机号不能为空"));
    } else if (!this.isCellPhone(value)) {
      callback(new Error("请输入正确的手机号"));
    } else {
      callback();
    }
  };

  return {
    form: {
      phone: "",
    },
    rules: {
      phone: [{ required: true, validator: checkphone, trigger: "blur" }]
    }
  }
},
methods: {
  //检查手机号
  isCellPhone(val) {
    if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(val)) {
      return false;
    } else {
      return true;
    }
  }
}

自定义验证规则—验证公司信用代码

data() {
  return {
    form: {
      creditCode: "",
    },
    rules: {
      creditCode: [
        { required: true, message: "公司信用代码不能为空", trigger: "blur" },
        { min: 18, max: 23, message: '公司信用代码长度范围是18到23', trigger: 'blur' },
        { pattern: /^[0-9A-Z]+$/, message: "请输入正确的公司信用代码", trigger: "blur"}
      ]
    }
  }
},

自定义验证规则—区分callback和return callback

一定要记得callback()

data中使用callback，methods或者通过js文件引用是return callback。

data：

export default {
  data() {
    var validateLevel = (rule, value, callback) => {
      if(this.base.level == '') {
        callback(new Error('等级不能为空'));
      } else if(!this.base.levelTime || this.base.levelTime == []) {
        callback(new Error('等级日期不能为空'));
      }else {
        callback();
      }
    };

    return {
      
    }
  }
}

methods

methods:{
  var validateLevel = (rule, value, callback) => {
    if(this.base.level == '') {
      return callback(new Error('等级不能为空'));
    } else if(!this.base.levelTime || this.base.levelTime == []) {
      return callback(new Error('等级日期不能为空'));
    }else {
      return callback();
    }
  };
}

utils/index.js 导出

export function validateLevel(rule, value, callback) {
  if(this.base.level == '') {
    return callback(new Error('等级不能为空'));
  } else if(!this.base.levelTime || this.base.levelTime == []) {
    return callback(new Error('等级日期不能为空'));
  }else {
    return callback();
  }
}

import { validateLevel } from '@/utils/index.js'

动态改变是否必填

<el-form-item label="姓名必填：">
  <el-select v-model="form.must" placeholder="请选择姓名是否必填" clearable>
    <el-option label="必选" value="1"/>
    <el-option label="非必选" value="0"/>
  </el-select>
</el-form-item>

<el-form-item label="姓名：" prop="name" :required="(form.must == 1)">
  <el-input v-model="form.name"/>
</el-form-item>

data() {
  let validateName = (rule, value, callback) => {
    console.log(this.form)
    if (this.form.must == 1 && this.form.name == "") {
      callback(new Error("请输入名称"));
    } else {
      callback();
    }
  };
  return {
    form: {
      name:'',
      must:'',
    },
    rules: {
      name: [
        { validator: validateName, trigger: ["change","blur"] }
      ]
    },
  }
}

触发所有项检验

<el-form :model="form" ref="form" label-width="140px">
  <el-form-item label="标题：" prop="title" :rules="{required:true,message:'请输入标题',trigger:'change'}">
      <el-input v-model="form.title" size="small" placeholder="请输入标题">
    </el-input>
  </el-form-item>
</el-form>

this.$refs.form.validate()

触发所有项检验，不成功的情况仍然能点击按钮调用接口

类型1：值可以填写，点击确定的时候调用的是新增接口

类型2：值不可以填写，点击获取的时候调用的是获取值接口

<el-form :model="form" ref="formRef" label-width="100px" :rules="rules">

  <el-form-item prop="name" label="名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>

  <el-form-item prop="type" label="类型">
    <el-select v-model="form.type" @change="handleTypeChange">
      <el-option key="1" label="1" value="1"></el-option>
      <el-option key="2" label="2" value="2"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item prop="val" label="值">
    <el-input v-model="form.val" placeholder="获取当前值" :readonly="form.type == 2" ></el-input>
  </el-form-item>

  <el-form-item  label="">
    <el-button type="primary" @click="handleSubmit">{{ form.type == 2 ? '获取' : '确定'}}</el-button>
  </el-form-item>

</el-form>

form: {
  name: '',
  type: 1,
  val: null,
},
rules: {
  name: [{
    required: true, message: '请填写名称', trigger: 'change'
  }],
  val: [{
    required: true, message: '请填写值', trigger: ['change', 'blur']
  }],
},

  handleTypeChange(value) {
    this.$refs.formRef.clearValidate('val');
    if(value === 1){
      this.rules.val = [{ required: true, message: '请填写值', trigger: ['change', 'blur'] }]
    } else {
      this.rules.val =  [{required: true, message: '获取失败', trigger: ['change', 'blur']}]
    }
  },

验证成功的情况：说明两个类型都正常填写。

验证不成功的情况：说明是刚切换成类型2，这时候并没有获取到值。判断名称是否填写，如果填写就调用获取接口，否则就不操作（没有成功）

handleSubmit(){
  this.$refs.formRef.validate(valid => {
    if(valid){
      let data
      if(this.form.type === 1){
        data ={
          type: this.form.type,
          name: this.form.name,
          val: this.form.val
        }
      }else{
        data ={
          type: this.form.type,
          name: this.form.name,
        }
      }
      sendOrder(data).then(data => {
        if(this.form.type === 2){
          this.form.val = data.data
        }else{
          this.$message({
            type: 'success',
            message: '新增成功'
          })
        }
      })
    } else {
      if (this.form.type === 2) {
        this.$refs.formRef.validateField("name", v => {
          if (v) {
            console.log("校验未通过");
          } else {
            console.log("校验通过");
            let data = {
              type: this.form.type,
              name: this.form.name,
            }
            sendOrder(data).then(data => {
              this.form.val = data.data
            })
          }
        });
      }
    }
  })
},

触发某一项检验

<el-form :model="form" ref="form" label-width="140px">
  <el-form-item label="标题：" prop="title" :rules="{required:true,message:'请输入标题',trigger:'change'}">
      <el-input v-model="form.title" size="small" placeholder="请输入标题">
    </el-input>
  </el-form-item>
</el-form>

this.$refs.form.validateField("title", errMsg => { 
  if (errMsg) { 
    console.log("校验未通过"); 
  } else { 
    console.log("校验通过"); 
  } 
});

修改某一项验证规则

this.rules.title= [{ required: true, message: '请上传标题' }]

取消某一项验证

this.$refs.form.clearValidate('title');

删除所有验证文字

<el-form :model="form" ref="form"></el-form>

 this.$refs["form"].resetFields();

红色星花

隐藏所有红色星花

<el-form
  :model="form"
  :rules="rules"
  ref="form"
  label-width="100px"
  hide-required-asterisk
>
</el-form>

单个必填显示红色星花

<el-form
  :model="form"
  :rules="rules"
  ref="form"
  label-width="100px"
>
    <el-form-item required>
    </el-form-item>
</el-form>

form-item内多个输入框验证

第一种：el-form-item中多个input框。缺点：一个出错全部输入框线框变红。

<el-form
  ref="form"
  :model="form"
  :rules="rules"
  :inline="true"
  label-position="left"
  label-width="100px"
  class="form"
>

  <el-form-item label="分类：" prop="sex">

    <el-input
      v-model="form.sex"
      placeholder="总数"
      maxlength="10"
      clearable
      style="width: 130px;margin-right: 15px"
    />

    <el-input
      v-model="form.boy"
      placeholder="男性数量"
      maxlength="10"
      clearable
      style="width: 130px;margin-right: 15px"
    />

    <el-input
      v-model="form.girl"
      placeholder="女性数量"
      clearable
      maxlength="10"
      style="width: 130px"
    />

  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submit">提 交</el-button>
  </el-form-item>
</el-form>

data() {
  var validateSex = (rule, value, callback) => {
    if(this.form.sex == '') {
        callback(new Error('总数不能为空'));
    } else if(this.form.boy == '') {
        callback(new Error('男性数量不能为空'));
    } else if(this.form.girl == '') {
        callback(new Error('女性数量不能为空'));
    } else {
        callback();
    }
  };

  return {
    form: {
      sex: '',
      boy: '',
      girl: '',
    },
    rules: {
        sex:[
          { required: true, message: "总数不能为空", trigger: "blur" },
          { validator: validateSex, trigger: 'blur' }
        ],
    },
  },
}

// 提交表单
submit() {
  this.$refs.form.validate(async (valid) => {
    if (valid) {
      console.log('验证成功')
    } 
  });
},

嵌套el-form-item

一个el-form-item 内几个el-input就用几个el-form-item包裹，利用prop验证。



<el-form
  ref="form"
  :model="form"
  :rules="rules"
  :inline="true"
  label-position="left"
  label-width="100px"
  class="form"
>
  <el-form-item label="分类：" required>

    <el-form-item prop="sex">
      <el-input
        v-model="form.sex"
        placeholder="总数"
        maxlength="10"
        clearable
        style="width: 130px;margin-right: 15px"
      />
    </el-form-item>

    <el-form-item prop="boy">
      <el-input
        v-model="form.boy"
        placeholder="男性数量"
        maxlength="10"
        clearable
        style="width: 130px;margin-right: 15px"
      />
    </el-form-item>

    <el-form-item prop="girl">
      <el-input
        v-model="form.girl"
        placeholder="女性数量"
        clearable
        maxlength="10"
        style="width: 130px"
      />
    </el-form-item>

  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submit">提 交</el-button>
  </el-form-item>

</el-form>


data() {
  return {
    form: {
      sex: '',
      boy: '',
      girl: '',
    },
    rules: {
        sex:[
          { required: true, message: "总数不能为空", trigger: "blur" },
        ],
        boy:[
          { required: true, message: "男性数量不能为空", trigger: "blur" },
        ],
        girl:[
          { required: true, message: "女性数量不能为空", trigger: "blur" },
        ],
    },
  }
}

form-item动态增减

出现blur失去焦点不验证的情况，只要给每个form-item加上key就好了，比如 :key="item.key"

<el-form
  :model="form"
  :rules="rules"
  ref="form"
  :inline="true"
  label-position="left"
  label-width="100px"
  class="form"
  style="margin: 100px 0;"
>
  <div v-for="(item,index) in form.list" :key="index"> 
    <el-form-item :label="'分类' + index" required>

      <el-form-item 
        :key="item.key"
        :prop="'list.' + index + '.sex'"
        :rules="{
          required: true, message: '总数不能为空', trigger: 'blur'
        }"
      >
        <el-input
          v-model="item.sex"
          placeholder="总数"
          maxlength="10"
          clearable
          style="width: 130px;margin-right: 15px"
        />
      </el-form-item>

      <el-form-item 
        :key="item.key"
        :prop="'list.' + index + '.boy'"
        :rules="{
          required: true, message: '男性数量不能为空', trigger: 'blur'
        }"
      >
        <el-input
          v-model="item.boy"
          placeholder="男性数量"
          maxlength="10"
          clearable
          style="width: 130px;margin-right: 15px"
        />
      </el-form-item>

      <el-form-item 
        :key="item.key"
        :prop="'list.' + index + '.girl'"
        :rules="{
          required: true, message: '女性数量不能为空', trigger: 'blur'
        }"
      >
        <el-input
          v-model="item.girl"
          placeholder="女性数量"
          clearable
          maxlength="10"
          style="width: 130px"
        />
      </el-form-item>
    </el-form-item>

    <el-form-item>
      <el-button  @click="add()">新 增</el-button>
      <el-button  @click="del(index)">删 除</el-button>
    </el-form-item>

  </div>

  <el-form-item>
    <el-button type="primary" @click="submit">提 交</el-button>
  </el-form-item>

</el-form>

data:{
  return {
    form: {
      list:[
        {
          sex: '',
          boy: '',
          girl: ''
        }
      ]    
    }
  }
}

add() {
  this.form.list.push({
    sex:'',
    boy: '',
    girl: ''
  })
},
del(index) {
  if(this.form.list.length > 1) {
    this.form.list.splice(index,1)
  }
},

Element-plus

<el-form ref="service" :model="service" label-width="80px">
    <el-form-item label="名称">
      <el-input v-model="service.name"></el-input>
    </el-form-item>
</el-form>