<template>
<el-form :model="formData" :rules="formRule" ref="formData" label-width="100px">
<el-form-item prop="name" label="姓名">
<el-input v-model="formData.name" ></el-input>
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input v-model="formData.password" ></el-input>
</el-form-item>
<el-form-item prop="user.tel" label="手机号" >
<el-input v-model="formData.user.tel" ></el-input>
</el-form-item>
<el-form-item prop="phones[0].model" label="手机号">
<el-input v-model="formData.phones[0].model"></el-input>
</el-form-item>
<el-form-item v-for="(phone, index) in formData.phones" :label="phone.brand" :key="phone.brand" :prop="'phones.' + index + '.model'" :rules="{
required: true, message: 'model不能为空', trigger: 'blur'
}">
<el-input v-model="phone.model"></el-input>
<el-form :model="formData.phones[index]" label-width="100px">
<el-form-item v-for="(item, index1) in formData.phones[index].arr" :key="index1" :prop="'arr.' + index1 + '.data1'" label="data1" :rules="{
required: true, message: 'data1不能为空', trigger: 'blur'
}">
<el-input v-model="item.data1"></el-input>
</el-form-item>
</el-form>
</el-form-item>
</el-form>
<el-button @click="handleSubmit">提交</el-button>
</template>
data () {
return {
formData:{
name: '',
password: '',
user: {
tel: ''
},
phones: [
{ brand: "华为", model: "", arr: [{ data1: "" }] },
{ brand: "小米", model: "", arr: [{ data1: "" }] }
]
},
formRule:{
name: [{required: true, message: '不能为空', trigger: 'blur'},
{pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文', trigger: 'blur'}],
password: [{required: true, message: '不能为空', trigger: 'blur'},
{validator: Verify.validatePassword, trigger: 'blur'},
],
'user.tel' : [{required: true, message: '手机号码不能为空', trigger: 'blur'}],
'phones[0].model': [{required: true, message: 'model不能为空', trigger: 'blur'}],
},
}
},
methods: {
handleSubmit(){
const t = this;
t.$refs['formData'].validate((valid) => {
if(valid){
console.log(this.formData);
}
})
}
}data () {
return {
formData:{
name: '',
password: '',
user: {
tel: ''
},
phones: [
{ brand: "华为", model: "", arr: [{ data1: "" }] },
{ brand: "小米", model: "", arr: [{ data1: "" }] }
]
},
formRule:{
name: [{required: true, message: '不能为空', trigger: 'blur'},
{pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文', trigger: 'blur'}],
password: [{required: true, message: '不能为空', trigger: 'blur'},
{validator: Verify.validatePassword, trigger: 'blur'},
],
'user.tel' : [{required: true, message: '手机号码不能为空', trigger: 'blur'}],
'phones[0].model': [{required: true, message: 'model不能为空', trigger: 'blur'}],
},
}
},
methods: {
handleSubmit(){
const t = this;
t.$refs['formData'].validate((valid) => {
if(valid){
console.log(this.formData);
}
})
}
}
<el-row v-for="(couponItem,oIndex) in model.Coupons" :key="oIndex" :inline="true">
<el-col :span="2">
<el-form-item :label="'券'+(oIndex+1)" :rules="couponRules.CouponName" :prop="'Coupons.' + oIndex+'.CouponName'">
<el-input v-model="couponItem.CouponName" placeholder="优惠券名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item :rules="couponRules.FaceValue" :prop="'Coupons.' + oIndex+'.FaceValue'">
<el-input v-model="couponItem.FaceValue" placeholder="优惠券面值(元)"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item :rules="couponRules.EveryoneSendNumber" :prop="'Coupons.' + oIndex+'.EveryoneSendNumber'">
<el-input v-model="couponItem.EveryoneSendNumber" placeholder="每人发优惠券张数"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item :rules="couponRules.VerificationIntegral" :prop="'Coupons.' + oIndex+'.VerificationIntegral'">
<el-input v-model="couponItem.VerificationIntegral" placeholder="核销门店积分/张"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<div style="min-width:310px">
<el-form-item :rules="couponRules.StartDate" :prop="'Coupons.' + oIndex+'.StartDate'">
<el-date-picker v-model="couponItem.StartDate" type="date" value-format="yyyy-MM-dd" placeholder="选择有效开始日期" :picker-options="checkTime(couponItem.StartDate,couponItem.EndDate)">
</el-date-picker>
</el-form-item>
</div>
</el-col>
<el-col :span="2">
<div style="margin-left: 30px;min-width:310px">
<el-form-item :rules="couponRules.EndDate" :prop="'Coupons.' + oIndex+'.EndDate'">
<el-date-picker v-model="couponItem.EndDate" type="date" value-format="yyyy-MM-dd" placeholder="选择有效结束日期" :picker-options="checkTime(couponItem.StartDate,couponItem.EndDate)">
</el-date-picker>
</el-form-item>
</div>
</el-col>
<el-col :span="2">
<div style="margin-left: 60px;min-width:310px">
<el-form-item :rules="couponRules.GoodsIdList" :prop="'Coupons.' + oIndex+'.GoodsIdList'">
<el-select v-model="couponItem.GoodsIdList"
filterable
multiple
placeholder="请选择指定产品">
<el-option v-for="item in goodsOptions"
:key="item.value"
:label="item.text"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<el-col :span="2">
<div style="margin-left:90px">
<el-form-item :rules="couponRules.LimitTing" :prop="'Coupons.' + oIndex+'.LimitTing'">
<el-input v-model="couponItem.LimitTing" placeholder="限购使用听数"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="1" v-if="oIndex>=0">
<div style="margin-left: 125px">
<el-form-item>
<el-button type="danger" size="mini" @@click="deleteCoupon(oIndex)" icon="el-icon-delete-solid">
</el-button>
</el-form-item>
</div>
</el-col>
</el-row>
自定义校验
couponRules: {
CouponName: [validate.required("请输入优惠券名称")],
FaceValue: [validate.required("请输入面值"), validate.isCheckRegExp('面值格式不正确', /^([1-9]\d{0,9})(\.\d{1,2})?$/)],
EveryoneSendNumber: [validate.required('请输入每人发放优惠券数量'), validate.isCheckRegExp('数值为正整数', /^\+?[1-9]\d*$/)],
VerificationIntegral: [validate.required('请输入门店核销分'), validate.isCheckRegExp('数值为正整数', /^\+?[1-9]\d*$/)],
StartDate: [validate.required("请选择开始日期")],
EndDate: [validate.required("请选择结束日期")],
GoodsIdList: [validate.required('请选择指定产品')],
LimitTing: [validate.required('请输入限购使用听数'),validate.isCheckRegExp('数值为正整数', /^\+?[1-9]\d*$/)]
},
校验
this.$refs['model'].validate((flags) => {
if (!flags) {
return false;
}}
或
this.$refs.loginForm.validate((valid) => {
if (!valid) {
return false;
}
})
此随笔或为自己所写、或为转载于网络。仅用于个人收集及备忘。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
