el-form 使用方法整理

el-form基础验证和自定义验证

<template><div><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm"><el-row><el-col :span="12"><el-form-item :label="名称" prop="Name"> <el-input v-model="ruleForm.Name" style="width: 100%"></el-input></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item :label="收件人" prop="Email"><el-input v-model="ruleForm.Email" style="width: 100%" placeholder="支持多个邮箱地址,用逗号分隔"></el-input> </el-form-item></el-col></el-row></el-form><el-button type="primary" v-on:click="submit">submit</el-button></div>
</template><script>
export default {name: "",data() {return {ruleForm: {Name: "",Email: "",},rules: {//trigger 常用blur/change 可参考jquery的监听事件 支持数组  trigger: ["blur", "change"]Name: [{ required: true, message: "请输入名称", trigger: "blur" }],Email: [{ required: true, message: "请输入收件人", trigger: "blur" }, //非空验证{ validator: this.validateEmails, trigger: "blur" }, //自定义验证],},};},created() {},methods: {submit() {this.$refs["ruleForm"].validate((valid) => {if (valid) {console.log("验证通过");} else {console.log("验证不通过");}});},validateEmails(rule, value, callback) {const emails = value.split(",").map((email) => email.trim());const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;for (let email of emails) {if (!emailPattern.test(email)) {return callback(new Error(`无效的邮箱地址: ${email}`));}}callback();},},mounted() {},
};
</script><style>
</style>

el-form 清空验证

this.$refs.form.clearValidate();//注意,如果使用的时候不生效,可使用nextTick

el-form 重置并清空

this.$refs.form.resetFields();