1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > vue 前端组件表单动态验证(必填) 设置默认值

vue 前端组件表单动态验证(必填) 设置默认值

时间:2021-10-07 11:46:44

相关推荐

vue 前端组件表单动态验证(必填) 设置默认值

element组件:

<el-form ref="groupAddForm" :model="groupAddForm" label-width="110px" label-position="left" :rules="rules"><el-row><el-col><el-divider /><el-form-item label="名称" prop="key1" :rules="key1 ? carouselSpeed : rules.key1"><el-input v-model="groupAddForm.key1" maxlength="30" /></el-form-item><el-form-item label="描述"><el-input v-model="groupAddForm.data1" /></el-form-item><el-form-item label="密码" prop="data2" :rules="data1 ? carouselSpeed : rules.data1"><el-input v-model="groupAddForm.data2" minlength="6" maxlength="20" /></el-form-item><el-form-item label="XX频率(秒)" prop="carouselSpeed" :rules="carouselSpeed ? carouselSpeed : rules.carouselSpeed"><el-input-numberv-model="carouselSpeed"size="small":min="15":step="5"/></el-form-item><el-form-item label="XX频率(分)" prop="refreshSpeed" :rules="refreshSpeed ? refreshSpeed : rules.refreshSpeed"><el-input-numberv-model="refreshSpeed"size="small":min="30":step="5"/></el-form-item></el-col></el-row></el-form>

初始值(根据自己需求):

props: {carouselSpeed: {type: Number,default: 30 // 默认值},refreshSpeed: {type: Number,default: 30 // 默认值}}

表单验证(必填)

return {rules: {key1: [{required: true, message: '请输入rule名', trigger: 'blur' }],data1: [{required: true, message: '请输入密码', trigger: 'blur' }],carouselSpeed: [{required: true, message: '请输入XX频率', trigger: 'blur' }],refreshSpeed: [{required: true, message: '请输入XX频率', trigger: 'blur' }]},}

第一次发表文章,希望对各位有所帮助!O(∩_∩)O哈哈~

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。