elementUI的表单组件,form
组件,使用输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。这个组件同时提供了对控件输入内容的校验功能。
整体表单区域,使用el-form
来包裹,每一行的输入组件,使用el-form-item
组件:
<el-form ref="form_demo" :model="form" label-width="120px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data(){
return {
form:{
name:'',// 姓名
}
}
}
}
<script>
el-form
的几个属性,model是表单数据对象,每一项提价的数据,都放在这个对象里。然后注册ref特征。
首先在整体表单中,声明校验规则对象
<el-form ref="form_demo" :model="form" label-width="120px" :rules="rules">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
然后,将校验规则,引入到具体表单项:
在el-form-item
中,增加prop属性,值为校验的字段值。该值属于表单域下(el-form
绑定的数据对象下),在本例子中,el-form-item
中的prop设为name,实际数据指的就是form.name
。
<el-form ref="form_demo" :model="form" label-width="120px" :rules="rules">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
最后针对每一项表单项中,需要校验的字段,制定校验规则:
rules: {
// 校验
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
}
这样,在表单中,姓名输入框,就设置为必须输入,且输入的要求是长度3-5个字符。
rules官方文档
错误时,提示的文字
出发的时机
validate
方法在添加了校验后,在合适的时机,会出发校验(例如失焦、内容改变的时候)。如果校验不通过,需要阻断向下的行为。在elementUI 中,提供了 validate
方法,来查询整个表单的校验结果(使用该方法时,需要通过持有的ref,来调用)。
validate
: 对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise
this.$refs['form'].validate(function(isPass,obj){// 是否校验成功,和不通过的字段
if(isPass){// 校验成功
// 成功后的操作,例如提交
}else{ // 校验失败
// 校验失败后的操作
// 例如,在一连串表单中,弹出第一个校验失败的内容,然后提示规则中的message字段
for(let key in msg){
alert(msg[key][0].message);
return false
}
}
})
<template>
<div class="home">
<el-form ref="form" :model="form" label-width="120px" :rules="rules">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio :label="0">女</el-radio>
<el-radio :label="1">男</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="菜品" prop="checkList">
<el-checkbox-group v-model="form.checkList">
<el-checkbox label="烧鸡" name="checkList"></el-checkbox>
<el-checkbox label="肘子" name="checkList"></el-checkbox>
<el-checkbox label="火锅" name="checkList"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="时间" prop="name">
<el-date-picker v-model="form.days" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "home",
components: {},
data() {
return {
form: {
name: "",
sex: 0,
checkList: [],
days: ""
},
rules: {
// 校验
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
checkList: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
]
}
};
},
methods: {
showThis() {
console.log(this);
},
submit() {
this.$refs["form"].validate((valid, msg) => {
if (valid) {
console.log("submit");
} else {
console.log("error submit!!");
console.log(msg);
for (let key in msg) {
alert(msg[key][0].message);
return false;
}
}
});
}
}
};
</script>
<style scoped>
.home {
width: 450px;
margin: auto;
}
</style>
运行后的示意图: