前端工作小结67-表单校验规则

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>      

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'是鼠标失去焦点的时候会触发验证
        ],
      },