關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口)

更新時(shí)間：2022年07月31日 08:56:36 作者：HoShining

這篇文章主要介紹了關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element-ui中el-form自定義驗(yàn)證

需求

在輸入項(xiàng)目名稱后，調(diào)用后端接口isNameOnly，若已存在，則效果如下圖：

1.先設(shè)置校驗(yàn)規(guī)則rules

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" 
class="demo-ruleForm">

2.在return中定義

// 判定規(guī)則
                rules: {
                    taskName: [{
                            required: true,
                            message: '請(qǐng)輸入項(xiàng)目名稱',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 15,
                            message: '長(zhǎng)度在 3 到 15 個(gè)字符',
                            trigger: 'blur'
                        },
                        {
                            required: true,
                            trigger: 'blur',
                            //validatePass --- 我們自定義的校驗(yàn)規(guī)則
                            validator: validatePass  
                        }
                    ],
                },

3.在data中添加如下代碼：（注意，以下代碼和return同級(jí)）

const validatePass = (rule, value, callback) => {
                this.$depot.get({
                    url: '/isNameOnly',
                    config: {
                        params: {
                            taskName: 1,
                            userId: 1)
                        }
                    },
                    cb: (res) => {
                        this.nameOK = res.data == 1 ? true : false	
                    }
                })
                if (this.nameOK != false) {
                    callback()
                } else {
                    callback(new Error('經(jīng)驗(yàn)證，該項(xiàng)目已存在于數(shù)據(jù)庫(kù)中'))
                }
            }

4.method定義提交表單方法

// 提交表單數(shù)據(jù)
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$message({
                            message: '恭喜你！項(xiàng)目創(chuàng)建成功！',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: '請(qǐng)按照提示正確輸入信息后再創(chuàng)建！',
                            center: true
                        });
                    }
                });
            },

element-ui自定義form表單校驗(yàn)規(guī)則

HTML：

<el-form
    ref="form"
    label-width="120px"
    :rules="rules"
    :model="ruleForm"
        >
 <el-form-item
     label="身份證號(hào)"
     size="mini"
     class="part"
     prop="id_card"
   >
     <el-input
       v-model="ruleForm.id_card"
     ></el-input>
 </el-form-item>
 </el-form>

注意

使用校驗(yàn)規(guī)則的表單,在data中定義的時(shí)候必須要放在一個(gè)對(duì)象中,:model="ruleForm"這行代碼一定要寫,不寫不生效!

js：

export default {
  name: "",
  data() {
  //自定義校驗(yàn)規(guī)則
    var checkIdCard = (rule, value, cb) => {
      const regIdCard = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
     
      if (regIdCard.test(value)) {
        return cb();
      }
      cb(new Error("您輸入的身份證號(hào)碼不是有效格式"));
    };
    return {
      ruleForm: {
        id_card: "", //身份證
      },
      rules: {
        id_card: [
          { required: true, message: "請(qǐng)輸入身份證", trigger: "blur" },
          { validator: checkIdCard, trigger: "blur" },
        ],
      }
    },

element ui 官網(wǎng)也有詳細(xì)介紹哦------https://element.eleme.cn/#/zh-CN/component/form

這樣也就實(shí)現(xiàn)了自定義校驗(yàn)的規(guī)則,可以在項(xiàng)目中使用了!

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: