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"> <!–注意用户的返回值–> <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'是鼠标失去焦点的时候会触发验证 ], },
