配置校验
1、在el-form 标签上配置
<el-form ref="form" :model="form" label-width="120px" :rules="rules">
<!-- 若干个的el-form-item标签 -->
</el-form>其中
:model=“form” 必须配置 表单数据对象 form 指的是该表单对应的data中的表单，而 el-form-item 绑定的数据大多都在这个form中
:rules=“rules” 必须配置 表单验证规则
ref=“form” 必须配置 后面 是 选中该表单进行全表单校验 或者 是单个数据的校验 会用到
:inline=“true” 非必须 行内表单模式 值为true则表单中元素排列在一行；不配置则默认值为false
disabled 禁用表单，禁止编辑
2、在 el-form-item 标签上配置
<el-form-item label="设备名称" prop="name">
<el-input
v-model="form.name"
clearable
placeholder="请输入设备名称"
></el-input>
</el-form-item>其中
label=“设备名称” 是该输入框的名字
prop=“name” 必须配置 指定该项字段
:rules=“xxxx” 非必须 一般都在data中统一配置校验规则
3、在 data 中配置校验规则
data() {
return {
rules: {xxxx}
}4、在提交表单时进行校验
全表单校验-validate
submitForm() {
this.$refs["form"].validate((valid) => { // 选中ref名为 form 的元素进行校验
if (valid) { // 如果校验通过才会对数据进行下一步处理，
if (this.form.id !== undefined) {
updateEquipment(this.form).then((response) => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
equipmentAdd(this.form).then((response) => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},对单个表单数据进行校验-validateField
this.$refs.formRef.validateField('name',err => { // 选中ref值为 formRef 的元素进行校验
if(!err){ // 通过，则...........
alert('姓名校验通过啦！')
}
})清除表单校验-clearValidate
仅清除表单校验，一般用于表单的取消编辑和关闭表单时使用，避免下次打开表单时校验规则残留在表单上
this.$nextTick(() => { // 最好包裹在 $nextTick 函数里清除校验，将回调延迟到下次 DOM 更新循环之后执行
this.$refs.formRef.clearValidate();
});重置表单值-resetFields
对整个表单进行重置，将所有字段值重置为初始值 并 移除校验结果
所以，根据开发需要自行选择
注意：这里的重置为初始值。也就是在data中书写的初始值，当表单第一次在页面中渲染时所用的数据就是初始数据，而不是把值都变为空；注意概念
this.$refs[formName].resetFields();// 选中ref值为formName 的 表单 把表单数据重置为初始值并且清除其校验规则案例-清除表单校验
需求：让表单弹窗在点击X号以及取消按钮时都清除本次的校验记录，且把表单数据重置为初始值
解决方案：让X号的回调以及取消按钮所触发的回调都触发同一个函数，在该函数里清空校验记录即可
1、弹窗配置：@close=“cancel”
<el-dialog
:title="title"
:visible.sync="open"
:width="dialogWidth"
@close="cancel"
>
</el-dialog>2、表单中的取消按钮
<el-button @click="cancel">取 消</el-button>3、cancel()
通常有时候还需要在该函数里做一些其他操作，因为resetFields有时候并不能保证可以清空form表单中的数据，那么就需要额外的对form表单数据进行清空
cancel() {
this.open = false; // 关闭弹窗
this.$refs["form"].resetFields(); // 清空ref名为form的表单校验规则
},当然，会存在不生效的问题
问题一：在还没有显示对话框之前就调用this.$refs[‘form’].resetFields()，会报错。
// 解决办法
this.$nextTick(() => {
this.$refs['form'].resetFields();
});问题二：如果添加和修改共用一个表单时就会出现重置无效的情况。
// 解决办法
this.$nextTick(() => {
utils.copyFormObject(data, this.form);
});校验规则-rules
其中
required 参数的值为true时，表单校验时 框框前面 才会出现 红点
message 就是 校验失败后 报错的 提示信息
trigger 校验触发时机 blur：表单元素失去焦点时触发； change：表单元素的值发生变化时触发；
type 值的类型 string: 字符串（默认值） number: 数字 boolean: 布尔值 method: 函数 regexp: 正则表达式 integer: 整数 float: 浮点数 array: 数组 object:对象 enum: 枚举类型，可以参考 百度资料-枚举类型 date: 日期类型 url: URL类型，如 https://www.baidu.com/ hex: 文件格式类型，如 :020000040000FA email: 邮箱类型，如 3652452@qq.com any: 任意类型
pattern 正则校验规则写在这里嗷！！！
若只有一条校验规则，使用对象写法，直接就可以写在 el-form-item 头标签中；当然也可以统一在data中配置（建议）
:rules="{ required: true, message: '不能为空'}" // 写在 el-form-item 头标签中的写法
rules:[company_no:{ required: true, message: "公司名称不能为空", trigger: "blur" }] // 在data中配置的写法,需要在校验规则前指明是哪个字段，前面所指的就是 company_no 字段的校验规则若有多条校验规则，则使用对象数组；在一个数组中书写多个校验规则；下面是一个字段对应一个数组对象的校验
rules: [
company_no: { required: true, message: "公司名称不能为空", trigger: "blur" },
status: { required: true, message: "状态不能为空", trigger: "blur" },
type: { required: true, message: "设备类型不能为空", trigger: "blur" },
model : { required: true, message: "设备型号不能为空", trigger: "blur" }，
mach_code : { required: true, message: "机器码不能为空", trigger: "blur" }
],若有多条校验规则且有的字段就不止一个校验规则，则使用对象数组；在一个数组中书写多个校验规则；下面是一个字段对应多个数组对象的校验
rules: {
username: [
{ required: true, message: "用户名不能为空", trigger: "blur" },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
status: { required: true, message: "状态不能为空", trigger: "blur" }
},正则校验
nickname: [
{
message: "昵称不能为空",
trigger: "blur",
required: true,
},
{
pattern: /^[\u4e00-\u9fa5]{2,5}$/g,
message: "只能输入中文不要加其他字符且长度为2到5位",
trigger: "blur",
},
]自定义校验规则
往往很多时候，常规的校验规则不能满足项目要求，那么此时就需要自定义校验规则加把劲
data() {
const validateUsername = (rule, value, callback) => { // 自定义校验，自定义校验的话报错的提示信息就需要看返回的是什么了
if (!validUsername(value)) {
callback(new Error("请输入正确用户名"));
} else {
callback();
}
};
const validatePassword = (rule, value, callback) => { // 自定义校验
if (value.length < 6) {
callback(new Error("密码不能小于6位"));
} else {
callback();
}
};
return { // data的返回值；在vue项目中，data必须是一个函数，是为了当组件每被复用一次时，都会返回一个新的一组data数据，各组件实例之间不影响，形成了良好的数据隔离，让各组件实例只维护自己的数据，自己变不影响其他
loginRules: {
username: [
{ required: true, trigger: "blur", validator: validateUsername }, // validateUsername 为自定义校验函数名，在自定义函数中书写自定义校验规则
],
password: [
{ required: true, trigger: "blur", validator: validatePassword },
],
},
};
},
