效果如图
部分表单结构(只举例其中4个典型的):
<el-form
:inline="false"
:model="formData"
:rules="formMethod.rules"
label-width="140px"
ref="form"
>
<el-row>
<el-col :span="24">
<el-form-item label="公司名称:" prop="company" class="newInput">
<el-input
v-model.trim="formData.company"
placeholder="请输入"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="网址:" prop="website" >
<el-input
v-model.trim="formData.website"
placeholder="请输入"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="邮编:" prop="zipCode" >
<el-input
v-model.trim="formData.zipCode"
placeholder="请输入"
></el-input>
</el-form-item>
</el-col>
</el-row>
<!--地图 plat -->
<el-row>
<el-form-item label="地图图片:" prop="plat" >
<el-upload
action="#"
:class="{
disabled: formMethod.fileList.length > 0 ? 'disabled' : '',
}"
list-type="picture-card"
:limit="1"
:on-change="formMethod.addFile"
:auto-upload="false"
:on-preview="formMethod.handlePictureCardPreview"
:on-remove="formMethod.handleRemove"
:file-list="formMethod.fileList"
>
<el-icon><Plus /></el-icon>
</el-upload>
</el-form-item>
</el-row>
<el-row type="flex" justify="end" class="footerBtns">
<el-button type="primary" @click="formMethod.submit">确 定</el-button>
<el-button type="danger" v-if="formData.id != ''" @click="deletInfo">删 除</el-button>
</el-row>
</el-form>
只有校验代码:
//校验普通电话、号码:可以“+”开头,除数字外,可含有“-”
const reg = /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入内容'));
}else {
if(!reg.test(value)){
callback(new Error("请输入正确号码"));
}else{
callback();
}
}
};
// 传真号码
const faxReg = /^(\d{3,4}-)?\d{7,8}$/
const faxValidatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入内容'));
}else {
if(!faxReg.test(value)){
callback(new Error("请输入正确传真"));
}else{
callback();
}
}
};
// 邮箱
const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
const emailValidatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入邮箱'));
}else {
if(!emailReg.test(value)){
callback(new Error("请输入正确邮箱"));
}else{
callback();
}
}
};
// 邮编
const codeReg = /^\d{6}$/
const codeValidatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入邮编'));
}else {
if(!codeReg.test(value)){
callback(new Error("请输入正确邮编"));
}else{
callback();
}
}
};
rules: {
company: [{ required: true, message: "请输入公司名称", trigger: "change" }],
website:[
{ required: true, message: "请输入网址", trigger: "blur" },
{
pattern:/^((http|https):\/\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]+)[/?:]?.*$/,
message: "输入以http或https开头的url地址",
trigger: "blur",
},
],
marketPhone: [{ required: true, validator: validatePass, trigger: "blur" }],//市场部电话
techniquePhone: [{ required: true, validator: validatePass, trigger: "blur" }],//技术部电话
productPhone: [{ required: true, validator: validatePass, trigger: "blur" }],//产品部电话
complaintPhone: [{ required: true, validator: validatePass, trigger: "blur" }],//投诉与建议电话
email: [{ required: true, validator: emailValidatePass, trigger: "blur" }],//邮箱
phone: [{ required: true, validator: faxValidatePass, trigger: "blur" }],//传真
address: [{ required: true, message: "请输入公司名称", trigger: "change" }],
zipCode: [{ required: true, validator: codeValidatePass, trigger: "blur" }],//邮编
plat: [{ required: true, message: "请上传图片", trigger: "blur" }],
},
样式控制显示一张后,添加按钮隐藏
:deep(.disabled .el-upload--picture-card ){
display: none;
}