配置校验
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-inputv-model="form.name"clearableplaceholder="请输入设备名称"></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 },],},};},
Nginx 负载均衡)
