1綁定rules

<el-dialog title="新建賬號(hào)" :visible.sync="dialogFormVisible" @close="close"><!--1.name--><el-form ref="form" :rules="rules" :model="form" size="medium" :label-width="formLabelWidth"><el-form-item prop="name" label="賬號(hào)名稱" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><!--3platform--><el-form-item prop="platform" label="所屬平臺(tái)" :label-width="formLabelWidth"><el-input v-model="form.platform" autocomplete="off"></el-input></el-form-item><!--6department_id--><el-form-item prop="department_id" label="所屬部門" :label-width="formLabelWidth"><select-form @change="DepartmentList" v-model="form.department_id" /></el-form-item><!-- <el-form-item prop="business_module" label="所屬欄目" :label-width="formLabelWidth">&lt;!&ndash;注意用戶的返回值&ndash;&gt;<el-select v-model="form.business_module" placeholder="請(qǐng)選擇所屬欄目" multiple><el-option @click="resetLoginFrom" v-for="label in business_module" :label="label" :value="label"></el-option></el-select></el-form-item>--><!--7column--><el-form-item prop="column" label="所屬單元" :label-width="formLabelWidth"><!--注意用戶的返回值--><el-select @change="updateFun" v-model="form.column" placeholder="請(qǐng)選擇所屬欄目" multiple><el-option v-for="column in columns" :label="column" :value="column"></el-option></el-select></el-form-item><!--2content_type--><el-form-item prop="resource_type" label="內(nèi)容類型" :label-width="formLabelWidth"><el-select v-model="form.resource_type" placeholder="請(qǐng)選擇發(fā)布類型"><el-option v-for="resource in resource_type" :label="resource.text" :value="resource.value"></el-option></el-select></el-form-item><!--5price--><el-form-item prop="price" label="刊例價(jià)" :label-width="formLabelWidth"><el-input v-model="form.price" autocomplete="off"></el-input></el-form-item><el-form-item prop="content_type" label="發(fā)布類型" :label-width="formLabelWidth"><el-select v-model="form.content_type" placeholder="請(qǐng)選擇發(fā)布類型"><el-option v-for="content in content_type" :label="content.text" :value="content.value"></el-option></el-select></el-form-item></el-form>

2data里面聲明

return {/*表單校驗(yàn)規(guī)則*/rules:{name: [{ required: true, message: '請(qǐng)輸入賬號(hào)名稱',trigger:'blur'}, // 'blur'是鼠標(biāo)失去焦點(diǎn)的時(shí)候會(huì)觸發(fā)驗(yàn)證],platform: [{ required: true, message: '請(qǐng)輸入所屬平臺(tái)',trigger:'blur'}, // 'blur'是鼠標(biāo)失去焦點(diǎn)的時(shí)候會(huì)觸發(fā)驗(yàn)證],department_id:[{ required: true, message: '請(qǐng)輸入部門id',trigger:'blur'} // 'blur'是鼠標(biāo)失去焦點(diǎn)的時(shí)候會(huì)觸發(fā)驗(yàn)證],column:[{ required: true, message: '請(qǐng)輸入所屬單元',trigger:'blur'} // 'blur'是鼠標(biāo)失去焦點(diǎn)的時(shí)候會(huì)觸發(fā)驗(yàn)證],resource_type:[{ required: true, message: '請(qǐng)輸入業(yè)務(wù)單元',trigger:'blur'} // 'blur'是鼠標(biāo)失去焦點(diǎn)的時(shí)候會(huì)觸發(fā)驗(yàn)證],content_type:[{ required: true, message: '請(qǐng)輸入業(yè)務(wù)單元',trigger:'blur'} // 'blur'是鼠標(biāo)失去焦點(diǎn)的時(shí)候會(huì)觸發(fā)驗(yàn)證],price:[{ required: true, message: '請(qǐng)輸入業(yè)務(wù)單元',trigger:'blur'} // 'blur'是鼠標(biāo)失去焦點(diǎn)的時(shí)候會(huì)觸發(fā)驗(yàn)證],},

?

總結(jié)

以上是生活随笔為你收集整理的工作188：表单校验规则的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。