vue+element UI表单验证

 element UI表单默认使用async-validator做验证，对它的用法做一些介绍。 

一、基本用法

<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
    <el-form-item label="名称" prop="name">
      <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="ruleForm.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        password: "",
        age: "",
      },
      rules: {
        name: [{ required: true, trigger: "blur" }],
        age: [{ required: true, trigger: "blur", message: "年龄不能为空" }],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        console.info(valid);
      });
    },
  },
};
</script>

 1.创建form表单，绑定model及校验规则rules，给表单项绑定prop属性，需要注意prop、v-model、rules三者一致

<el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>

如prop的age、文本域的v-model： age，rules.age。

2.添加校验规则

rules: {
    name: [{ required: true, trigger: "blur" }],
    age: [
        { required: true, trigger: "blur", message: "年龄不能为空" },
        { min: 18, max: 29, type: "number", trigger: ['blur', 'change'] , message: "年龄必须在18-29之间"}
    ],
}

required为必填校验，

trigger为校验的触发时机，有blur和change，或trigger: ['blur', 'change']

message为校验不通过时的提示消息

校验规则可以添加多条。

                    

二、规则说明

required必填

type类型，可选值有string、number、boolean、methdod、regexp、integer、float、array、object、enum、date、url、email

pattern，需要符合的正则，如

{ pattern: /^([a-zA-Z])\w*/g, message: '不符合标识符规则', trigger: 'blur' },

range，需要添加min和max属性，如果是字符串和数组，则要求其长度满足min和max之间，如果是数字则需要满足其值在min和max之间

length，需要添加len属性，如果是字符串和数组，则要求其长度等于len，如果是数字则需要满足其值等于len

enumberable，通过enum指定可使用的枚举值

三、自定义校验规则

如不允许输入的属性和已有的重复时，async-validator自有的规则就不能满足了，需要自定义校验规则。

自定义规则使用validator接收一个函数，

{ validator: this.repeatValidate, message: '属性不能重复', trigger: 'blur' }，

repeatValidate函数有三个参数，rule为校验规则，value为输入的值，callback为校验的回调，

repeatValidate (rule, value, callback) { ... callback() }

完整代码如下：

<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
    <el-form-item label="名称" prop="name">
      <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="ruleForm.age"></el-input>
    </el-form-item>
    <el-form-item label="新的属性" prop="newProperty">
      <el-input v-model.number="ruleForm.newProperty"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      propperties: ["a", "b", "c", "d"],
      ruleForm: {
        name: "",
        password: "",
        age: "",
        newProperty: "",
      },
      rules: {
        name: [{ required: true, trigger: "blur" }],
        age: [
          { required: true, trigger: "blur", message: "年龄不能为空" },
          {
            min: 18,
            max: 29,
            type: "number",
            trigger: ["blur", "change"],
            message: "年龄必须在18-29之间",
          },
        ],
        newProperty: [
            { required: true, message: '名称不能为空', trigger: 'blur' },
            { pattern: /^([a-zA-Z])\w*/g, message: '不符合标识符规则', trigger: 'blur' },
            { validator: this.repeatValidate, message: '属性不能重复', trigger: 'blur' }
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        console.info(valid);
      });
    },
    repeatValidate (rule, value, callback) {
      let match = this.propperties.find(item => item === value)
      if (match) {
        callback(new Error('重复了'))
      }
      callback()
    }
  },
};
</script>

                       

四、常见问题

1.属性名中含有"."的处理

如有个属性的名称中含有“.”, 

<el-form-item label="价格" :prop="'book.price'">
    <el-input v-model.number="ruleForm['book.price']"></el-input>
</el-form-item>

ruleForm: {
    "book.price": "",
    name: "",
    password: "",
    age: "",
    newProperty: "",
}

Error in mounted hook: "Error: please transfer a valid prop path to form item!"

原因在于prop认为对应的属性为：ruleForm.book.price，也就是

ruleForm: {
    book: {
        price: "",
    }
}

而不是ruleForm['book.price']。所以不建议使用带“.”的字段名。

 2.动态表单校验

表单项是动态生成的一系列表单，不能预先为每一个表单项设置prop属性，这样可以利用特殊的索引设置prop。

如生成表单项的数据为books列表，这样设置 :prop="'books.' + index + '.name'"，同时把规则绑定在表单项上。

完整代码如下：

<template>
  <div>
    <el-button type="primary" @click="addBook">添加书籍</el-button>
    <el-form ref="ruleForm" :model="ruleForm">
      <el-form-item
        label="书名"
        :key="item.key"
        :prop="'books.' + index + '.name'"
        :rules="dynamic"
        v-for="(item, index) in ruleForm.books"
      >
        <el-input v-model="item.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        books: [],
      },
      dynamic: [{ required: true, message: "名称不能为空", trigger: "blur" }],
    };
  },
  methods: {
    addBook() {
      this.ruleForm.books.push({
        name: "",
        key: Date.now(),
      });
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        console.info(valid);
      });
    },
  },
};
</script>

                                                 

 3.下拉框失焦时不触发校验 

对于select，失焦时常常不能触发校验，如下没有选择内容失焦时不能触发必填校验。

可以给select添加blur和change的处理函数，在处理函数中调用表单的validateField方法，单独对该字段进行校验。

建议同时添加blur和change的处理函数，不然会出现blur时校验，但选择内容后校验不消失的问题。

<el-form-item
    label="选择"
    prop="selProp"
    :rules="{
        required: true,
        message: 'select不能为空',
        trigger: ['blur', 'change'],
    }"
>
<el-select v-model="ruleForm.selProp" @blur="blurHandler('selProp')" @change="blurHandler('selProp')">
    <el-option value="1">A</el-option>
    <el-option value="2">B</el-option>
</el-select>

blurHandler(prop) {
    this.$refs.ruleForm.validateField(prop, (val) => {
        console.info(val);
    });
},