实现form表单提交验证功能
model : 绑定整个表单model值
rules : 整个表单校验规则
ref ：获取该表单form组件
prop : 绑定每个表单的规则，写在el-form-item上
validate : 对整个表单进行校验的方法
valid : 每个必填表单项都提交为true,否则为false
1、简易版 表单提交
//使用element-ui 页面组件
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
</el-form-item>
//data中定义form表单中每项表单model值、和每个表单校验的规则
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
};
},
//定义表单提交方法
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
}
}
2、复杂版 表单提交
- 对于页面有多个整体的form提交，每个form表单里类型为文本框、下拉框、单选框、复选框等类型，可对类型进行封装，使用循环遍历使页面呈现不同类型表单项
<el-form v-if="fromHtmlList.deviceInfo.sitsb.length" :model="fasj" :rules="rules" label-position="left" label-width="125px" ref='sitsb'>
<el-form-item label-width="100%" >
<div slot="label" class="titleInfo">局端设备</div>
</el-form-item>
<el-form-item v-for="(item, i) in fromHtmlList.deviceInfo.sitsb"
:key="`F_key_${i}`"
:label="`${item.label}：`"
:class="item.class"
:label-width="item.labelWidth"
:prop="`${item.rule ? 'deviceInfo.sitsb.'+item.rule : ''}`">
<el-select v-if="item.el === 'slt'" v-model="fasj.deviceInfo.sitsb[item.model]" placeholder="请选择" style="width:200px;" clearable>
<el-option v-for="(op, n) in options[item.option]"
:key="`vop_key_${n}`"
:label="op.label"
:value="op.value">
</el-option>
</el-select>
<el-input v-if="item.el === 'ipt'" v-model="fasj.deviceInfo.sitsb[item.model]" @focus="()=>{ item.focus && handleFocus('sitsb', item.model)}" :placeholder="`${item.placeholder ? item.placeholder : '请输入'}`" style="width:200px;"></el-input>
<span v-if="item.el === 'txt'">{{fasj.base[item.model]}}</span>
</el-form-item>
</el-form>
<div class="btn-list">
<el-button type="primary" @click="checkRequired">提 交</el-button>
</div>
<script>
export default {
data() {
return {
fasj: {
base: {}, // 基本信息
deviceInfo: {},
},
//定义 页面表单结构
fromHtmlList: {
baseInfo: [],
deviceInfo: {
ywzsb: [],
sitsb: []
}
},
//定义 表单校验规则
rules: {
'deviceInfo.sitsb.IPType': [
{ required: true, message: '请输入', trigger: 'blur' }
],
'deviceInfo.sitsb.IPAddr': [
{ required: true, message: '请输入', trigger: 'blur' }
],
'deviceInfo.sitsb.netmask': [
{ required: true, message: '请输入', trigger: 'blur' }
],
'deviceInfo.sitsb.vlanId': [
{ required: true, message: '请输入', trigger: 'blur' }
],
},
options: {
IPType: [
{label: 'ipv4', value: 'ipv4'},
{label: 'ipv6', value: 'ipv6'}
],
rmSite: [],
room: [],
},
}
},
created(){
const orderType = '业务开通' ;//页面初始加载用到的变量值，可通过组件传值获取
//created中初始定义页面表单结构
this.fromHtmlList = {
baseInfo: orderType === '业务开通' ? [
{label: '接入方式', labelWidth: '100px', rule: '' , model: 'serviceType', option: '', el: 'txt', class: 'w2'},
{label: '标准九级地址', labelWidth: '120px', rule: '', model: 'aendAdreesName', option: '', el: 'txt', class: 'w2'},
{label: '城乡类型', labelWidth: '100px', rule: 'cityType', model: 'cityType', option: 'cityType', el: 'slt', class: 'w2'},
{label: '方案设计附件', labelWidth: '120px', rule: '', model: 'fileId', option: '', el: 'btn', class: 'w2'},
] : orderType === '移机' ? [
{label: '接入方式', labelWidth: '100px', rule: '' , model: 'serviceType', option: '', el: 'txt', class: 'w2'},
{label: '标准九级地址', labelWidth: '120px', rule: '', model: 'aendAdreesName', option: '', el: 'txt', class: 'w2'},
{label: '城乡类型', labelWidth: '100px', rule: 'cityType', model: 'cityType', option: 'cityType', el: 'slt', class: 'w2'},
{label: '方案设计附件', labelWidth: '120px', rule: '', model: 'fileId', option: '', el: 'btn', class: 'w2'},
{label: '移机场景', labelWidth: '100px', rule: 'moveScene', model: 'moveScene', option: 'moveScene', el: 'slt', class: 'w2'},
{label: '是否需要网络调整', labelWidth: '', rule: 'netChange', model: 'netChange', option: 'netChange', el: 'slt', class: 'w2'}
] : [
{label: '接入方式', labelWidth: '100px', rule: '' , model: 'serviceType', option: '', el: 'txt', class: 'w2'},
{label: '标准九级地址', labelWidth: '120px', rule: '', model: 'aendAdreesName', option: '', el: 'txt', class: 'w2'},
{label: '城乡类型', labelWidth: '100px', rule: 'cityType', model: 'cityType', option: 'cityType', el: 'slt', class: 'w2'},
{label: '方案设计附件', labelWidth: '120px', rule: '', model: 'fileId', option: '', el: 'btn', class: 'w2'},
{label: '是否需要网络调整', labelWidth: '', rule: 'netChange', model: 'netChange', option: 'netChange', el: 'slt', class: 'w2'},
{label: '是否更换末端设备', labelWidth: '', rule: 'devChange', model: 'devChange', option: 'devChange', el: 'slt', class: 'w2'}
],
deviceInfo: {
ywzsb: serviceType === 'PON' ? [
// 默认PON
{label: '机房', labelWidth: '90px', rule: '' , model: 'siteRoom', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: '设备名称', labelWidth: '90px', rule: '', model: 'deviceName', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: '设备端口', labelWidth: '90px', rule: '', model: 'devicePort', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: '延伸设备', labelWidth: '90px', rule: '', model: 'deviceExtend', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'}
] : [
// 裸光纤、传输下沉、传输延伸(ywzsb)
{label: '机房', labelWidth: '', rule: '' , model: 'siteRoom', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: '站点', labelWidth: '', rule: '', model: 'site', option: '', el: 'ipt', class: 'w2'},
{label: '设备名称', labelWidth: '', rule: '', model: 'deviceName', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: '设备端口', labelWidth: '', rule: '', model: 'devicePort', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
],
sitsb: serviceType === 'PON' ? [
{label: '机房名称', labelWidth: '', rule: '' , model: 'siteRoom', option: '', el: 'ipt', class: 'w2'},
{label: '站点名称', labelWidth: '', rule: '', model: 'site', option: '', el: 'ipt', class: 'w2'},
{label: '汇聚交换机', labelWidth: '', rule: '', model: 'switch', option: '', el: 'ipt', class: 'w2'},
{label: '汇聚交换机端口', labelWidth: '', rule: '', model: 'switchPort', option: '', el: 'ipt', class: 'w2'},
{label: 'SR/BARS', labelWidth: '', rule: '' , model: 'srbars', option: '', el: 'ipt', class: 'w2'},
{label: 'SR/BARS端口', labelWidth: '', rule: '', model: 'srbarsPort', option: '', el: 'ipt', class: 'w2'},
{label: 'IP地址类型', labelWidth: '', rule: 'IPType', model: 'IPType', option: 'IPType', el: 'slt', class: 'w2'},
{label: 'IP地址', labelWidth: '', rule: 'IPAddr', model: 'IPAddr', option: '', el: 'ipt', class: 'w2'},
{label: '子网掩码', labelWidth: '', rule: 'netmask', model: 'netmask', option: '', el: 'ipt', class: 'w2'},
{label: 'VLAN ID', labelWidth: '', rule: 'vlanId', model: 'vlanId', option: '', el: 'ipt', class: 'w2'}
] : serviceType === '裸光纤' ? [
// 裸光纤
{label: '机房名称', labelWidth: '', rule: '' , model: 'siteRoom', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: '站点名称', labelWidth: '', rule: '', model: 'site', option: '', el: 'ipt', class: 'w2'},
{label: 'SR', labelWidth: '', rule: '', model: 'SR', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: 'SR端口', labelWidth: '', rule: '', model: 'SRPort', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: 'BARS', labelWidth: '', rule: '' , model: 'BARS', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
{label: 'BARS端口', labelWidth: '', rule: '', model: 'BARSPort', option: '', el: 'ipt', class: 'w2', focus: true, placeholder: '点击查询'},
] : [
// 传输下沉、传输延伸
]
}
}
},
methods:{
async checkRequired() {
let checkName = ['base','sitsb'];//表单校验定义ref
let text;
for(let key of checkName){
if(this.$refs[key]){
this.$refs[key].validate((valid) => {
if(!valid){
text = '请检查必填项';
}else {
return false;
}
});
}
}
if(text){
this.$message.warning(text);
return false;
}
let _res_ = await this.saveFasjData('', true);//页面表单要保存后才能提交
if(!!_res_ && _res_.code === 200){
this.commit(_param, _url);//保存表单再提交
}else{
this.$message.error(_res_.msg)
}
},
async commit(param, url) {
this.loadings.body = true;
let _res = await postDataRequest(url, param);
this.loadings.body = false;
if (_res && _res.code === 200) {
this.$message.success("提交成功");
this.$router.go(-1);
}
}
}
}
</script>
版权声明：本文为qq_41008567原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。