一、属性绑定

在 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' },
    ],
})

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