普通的表单验证及表单验证提交
<el-form ref="ruleForm" :model="Form" :rules="rules" label-width="200px">
<el-form-item prop="score">
<el-input v-model="Form.score" placeholder="请输入得分" type="tel">
<template #prepend>得分</template>
</el-input>
</el-form-item>
</el-form>
<div>
<el-button type="primary" @click="handleConfirm()">确认</el-button>
<el-button @click="handleCancel()">取消</el-button>
</div>
data() {
return {
Form: {
score: null,
},
// 表单验证
// ruleForm 与 <el-form> 表单的 ref 属性值相同
ruleForm: { score: "" },
// rules 与 <el-form> 表单的 :rules 属性值相同
// score 与 <el-form-item> 表单子元素的 prop 属性值相同
// 得分必填，失去焦点时验证，message为提示信息
rules: {
score: [
{
required: true,
message: "请输入得分",
trigger: "blur",
},
],
},
};
},
methods: {
handleConfirm() {
// 表单验证提交
this.$refs.ruleForm.validate((valid) => {
if (valid) {
console.log("success submit!!");
} else {
console.log("error submit!!");
return false;
}
});
},
handleCancel() {},
},
<el-form>：代表这是一个表单
<el-form> 绑定ref，:model，:rules
ref：表单被引用时的名称，标识
rules：表单验证规则
model：表单数据对象
<el-form-item>：表单中的每一项子元素
<el-form-item>绑定prop，一定要和v-model的属性相同
prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
<el-input>：输入框
<el-input>绑定v-model，绑定的表单数据对象属性，和el-form-item的prop相同
自定义表单验证
data() {
// score只能在一定范围内，且只能输入数字，可以输入小数，但小数最多输入三位数
// 校验输入的数字的大小是否超过范围
const validateScore = (rule, value, callback) => {
if (!value) {
callback(new Error("请输入数字"));
} else if (!(value >= this.limitMin && value <= this.limitMax)) {
callback(
new Error(
"请输入数字，大小在" + this.limitMin + "-" + this.limitMax + "之间"
)
);
} else {
callback();
}
};
return {
Form: {
score: null,
},
limitMin: 0,
limitMax: 100,
// 表单验证
// ruleForm 与 <el-form> 表单的 ref 属性值相同
ruleForm: { score: "" },
// rules 与 <el-form> 表单的 :rules 属性值相同
// score 与 <el-form-item> 表单子元素的 prop 属性值相同
// 得分必填，失去焦点时验证，validateScore为自定义的表单验证
// 且使用正则表达式验证只能输入数字，可以输入小数，但小数最多输入三位数
rules: {
score: [
{ required: true, validator: validateScore, trigger: "blur" },
{
pattern:
/(^[1-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
message: "请输入数字，可保留三位小数",
trigger: "blur",
},
],
},
};
},
methods: {
handleConfirm() {
// 表单验证提交
this.$refs.ruleForm.validate((valid) => {
if (valid) {
console.log("success submit!!");
} else {
console.log("error submit!!");
return false;
}
});
},
handleCancel() {},
},
向自定义表单验证传递参数
data() {
const limit = [0, 100];
// 校验输入的数字的大小是否超过范围
// rule中即包含传入的参数limit，打印rule.limit可见
const validateScore = (rule, value, callback) => {
// limit传递到了rule中
console.log(rule, value);
if (!value) {
callback(new Error("请输入数字"));
} else if (!(value >= rule.limit[0] && value <= rule.limit[1])) {
callback(
new Error(
"请输入数字，大小在" + rule.limit[0] + "-" + rule.limit[1] + "之间"
)
);
} else {
callback();
}
};
return {
Form: {
score: null,
},
// 表单验证
// ruleForm 与 <el-form> 表单的 ref 属性值相同
ruleForm: { score: "" },
// rules 与 <el-form> 表单的 :rules 属性值相同
// score 与 <el-form-item> 表单子元素的 prop 属性值相同
// 得分必填，失去焦点时验证，validateScore为自定义的表单验证，limit为传入自定义表单验证的参数
// 且使用正则表达式验证只能输入数字，可以输入小数，但小数最多输入三位数
rules: {
score: [
{
required: true,
limit: limit,
validator: validateScore,
trigger: "blur",
},
{
pattern:
/(^[1-9]([0-9]+)?(\.[0-9]{1,3})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
message: "请输入数字，可保留三位小数",
trigger: "blur",
},
],
},
};
},
methods: {
handleConfirm() {
// 表单验证提交
this.$refs.ruleForm.validate((valid) => {
if (valid) {
console.log("success submit!!");
} else {
console.log("error submit!!");
return false;
}
});
},
handleCancel() {},
},
可以将validateScore自定义验证规则定义在methods中，也可以将整个表单验证规则写在<el-form-item>的:rules属性中
