element form 校验 el-validate-schema

el-validate-schema.js utils中

定义校验规则 以及自定义校验规则

/**
 *  input 框 应该选 , trigger: 'blur'  失去焦点
 *  下拉框 el-select、日期选择器 el-date-picker、
 *  复选框 el-checkbox、单选框 el-radio验证时，trigger的值选择change
 *
 *  经过测试 什么也不设置 效果 与上面  分别设置一致
 *
 *  自定义校验规则  两个参数(接收传递的参数,校验参数) 一个 回调 callback 是否有 Error
 */
export default {
	// 用户名
	name: [
		{ required: true, message: '请输入姓名' },
		{ min: 2, max: 6, message: '名字长度2-6之间' },
	],
	// 年龄
	age: [{ required: true, type: 'number', message: '请输入年龄' }],
	// 性别
	sexLabel: [{ required: true, message: '请选择性别' }],
	// 生日
	birth: [{ type: 'date', required: true, message: '请选择日期' }],
	// 地址
	addr: [{ required: true, message: '请输入地址' }],
}

// custom  自定义校验规则   接收   form实例  与 formData
// rule 中接收参数  导致直接校验 原因不明  这里通过函数 传递参数
export const customRules = (formInstance, formData) => ({
	// 账号
	account: [
		{
			required: true,
			validator: validateAccount(formInstance, formData),
			// formInstance: formInstance,
			// formData: formData,
		},
	],
	// 密码
	pass: [
		{
			required: true,
			validator: validatePass(formInstance, formData),
		},
	],
})
// lambda ==》fun 主要为了将 rule 的参数 提出去做参数 这样写可以正常校验
const validateAccount = (formInstance, formData) => (rule, value, callback) => {
	if (!value) {
		return callback(new Error('账户不能为空'))
	}
	callback()
}
const validatePass = (formInstance, formData) => (rule, value, callback) => {
	if (!value) {
		return callback(new Error('密码不能为空'))
	}
	callback()
}

自带校验规则的使用

			<el-form
				:model="userData"
				ref="ruleForm"
				
				:rules="rules"
				
				status-icon
				label-position="right"
				label-width="80px"
			>

			<el-form-item label="姓名" prop="name">
			   <el-input v-model="userData.name" placeholder="请输入姓名" />
			</el-form-item>

/**
 * 是否是 编辑
 * 1 对话框 关闭时  无论是  确认 还是  取消  都执行了 resetFields  所以 新增时无需
 * 2 handleEdit 中 直接 赋值 userData 在 虚拟DOM中 beforeCreated 相当于修改了 userData 的初始值
 * 3 resetFields  就是复原初始值  所以 数据 不会清空  初始值不是空
 * 4 nextTick 中修改  是 mounted 后  不会修改初始值  异步中也同理
 * v-if true 中 使用form实例方法 如 resetFields  此时组件还没有实例化  需要 nextTick
 */

自定义校验规则的使用

import { customRules } from '@/utils/el-validate-schema'

// 自定义校验规则
// customRules中传递参数有问题 目前写法没问题

const rules = customRules(ruleForm, loginData)

				<el-form
					:model="loginData"
					ref="ruleForm"
					
					:rules="rules"
					
					status-icon
					size="large"
				>