1綁定rules

<el-dialog title="新建賬號" :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="賬號名稱" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><!--3platform--><el-form-item prop="platform" label="所屬平臺" :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="請選擇所屬欄目" 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="請選擇所屬欄目" 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="內容類型" :label-width="formLabelWidth"><el-select v-model="form.resource_type" placeholder="請選擇發布類型"><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="刊例價" :label-width="formLabelWidth"><el-input v-model="form.price" autocomplete="off"></el-input></el-form-item><el-form-item prop="content_type" label="發布類型" :label-width="formLabelWidth"><el-select v-model="form.content_type" placeholder="請選擇發布類型"><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 {/*表單校驗規則*/rules:{name: [{ required: true, message: '請輸入賬號名稱',trigger:'blur'}, // 'blur'是鼠標失去焦點的時候會觸發驗證],platform: [{ required: true, message: '請輸入所屬平臺',trigger:'blur'}, // 'blur'是鼠標失去焦點的時候會觸發驗證],department_id:[{ required: true, message: '請輸入部門id',trigger:'blur'} // 'blur'是鼠標失去焦點的時候會觸發驗證],column:[{ required: true, message: '請輸入所屬單元',trigger:'blur'} // 'blur'是鼠標失去焦點的時候會觸發驗證],resource_type:[{ required: true, message: '請輸入業務單元',trigger:'blur'} // 'blur'是鼠標失去焦點的時候會觸發驗證],content_type:[{ required: true, message: '請輸入業務單元',trigger:'blur'} // 'blur'是鼠標失去焦點的時候會觸發驗證],price:[{ required: true, message: '請輸入業務單元',trigger:'blur'} // 'blur'是鼠標失去焦點的時候會觸發驗證],},

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。