一、属性绑定

在 Element-plus 的 Form 组件中，需要对用户的输入进行规范验证时，可使用 rules 属性对验证规则做绑定。并在 el-form-item标签上设置 prop 属性的键值。

<template><div><el-form :model="ruleForm"style="max-width: 600px":rules="rules"><el-form-item label="课程号" prop="cno"><el-input v-model="form.cno" /></el-form-item><el-form-item label="课程名" prop="cname"><el-input v-model="form.cname" /></el-form-item><el-form-item label="课时" prop="classhour"><el-input v-model="form.classhour" /></el-form-item><el-form-item label="学分" prop="credit"><el-input v-model="form.credit" /></el-form-item></el-form></div>
</template>

二、表单校验

const rules = reactive({cno: [{ required: true, message: '请输入课程号', trigger: 'blur' },{ length: 4, message: '课程号长度为4位', trigger: 'blur' },],cname: [{ required: true, message: '请输入课程名', trigger: 'blur' },{ max: 20, message: '课程名长度不能超过20位', trigger: 'blur' },],classhour: [{ type: 'number', message: '课时必须为数字', trigger: 'blur' },],credit: [{ type: 'number', message: '学分必须为数字', trigger: 'blur' },],
})

三、自定义校验规则

在使用自定义规则中，使用 v-model绑定自定义校验规则的字段。

PS：自定义校验规则必须写在 rules 方法之前，因为这里声明的校验规则（函数）使用的是 const，而 const、let 是块级作用域，不能进行变量提升；var是函数级作用域，可以变量提升。

PS：校验规则函数三个函数 rule, value, callback 中，虽然 rule 没有使用，但这里也不能去掉，因为它确定了 callback()是一个函数。不然会报错：callback is not a function。

绑定自定义校验规则的字段：

<el-form-item label="课程名" prop="classhour"><el-input v-model="form.cname" v-model="ruleForm.cname" />
</el-form-item>

校验规则：

// 需要自定义校验的字段
const ruleForm= reactive({cname: '',
})// 自定义的校验规则
const validateCname= (rule, value, callback) => {if (value === '' || value === null) {callback(new Error('课程名不能为空'));} else if (自定义条件) {callback(new Error('返回错误提示'));} else {callback();}
}// 
const rules = reactive({...cname: [{ validator: validateCname, trigger: 'blur' },],...
})

四、数字类型验证

在自定义校验规则时，如果是数字类型验证，那么需要在 v-model  处加上 .number 的修饰符。

绑定校验规则：

<el-form-item label="课程名" prop="classhour"><el-input v-model="form.cname" v-model="ruleForm.cname" />
</el-form-item>
<el-form-item label="学分" prop="classhour"><el-input v-model="form.credit" v-model.number="ruleForm.credit" />
</el-form-item>

自定义校验规则：

// 需要自定义校验的字段
const ruleForm= reactive({cname: '',credit: '',
})
// 自定义校验规则
const validateCreditRange = (rule, value, callback) => {if (value < 2 || value > 5) {callback(new Error('课时必须在2-5之间'));} else {callback();}
}
const rules = reactive({...credit: [{ type: 'number', message: '学分必须为数字', trigger: 'blur' },{ validator: validateCreditRange, trigger: 'blur' },],
})

若有错误，欢迎大佬斧正。