elementui 校验子组件 element检验

关于element中模态框里面的表单的验证问题

• 和iview的form的表单验证类似
• element中表单验证的步骤：

• 第一步：给 el-form设置属性 rules :rules
• 第二步：同时给需要验证的每个 el-form-item设置属性 prop 指向对应字段即可 prop=”“
• 第三步：注意：el-form标签里面是 :model
• 第四步：注意：在el-form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效
• 第五步：在操作保存按钮时，添加方法，对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean 表示成功与失败。

• element中模态框的步骤：

• 第一步：给el-dialog设置 :visible.sync="dialogVisible" //是否显示 Dialog，支持 .sync 修饰符,默认为false
• 第二步：给el-dialog设置 :close-on-click-modal="false"//是否可以通过点击 modal 关闭 Dialog,默认为true
• 第三步：给el-dialog设置 :close-on-press-escape="false" //是否可以通过按下 ESC 关闭 Dialog,默认为false
• 第四步：看项目各自情况而定

• 常见问题： 点击模态框新增完form表单后，点击确认或取消后，再次打开模态框需清除上次填写的数据痕迹。
  例如：

注意：form表单里面的绑定的元素，一定要在data里面定义全了，不全也是影响表单验证出来问题的原因。
    <el-dialog title="新增任务" :visible.sync="taskModal" width="50%" center :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form ref="formItem" label-width="100px" :model="formItem" :rules="ruleInline" :data='formItem'>
        <el-row>
          <el-col :span="20">
            <el-form-item label="任务名称：" prop="taskName">
              <el-input v-model="formItem.taskName" placeholder="请输入任务名称" :maxlength="20" :minlength="3"></el-input>
            </el-form-item>
            <el-form-item label="维修类型：" prop="classCode">
              <el-select v-model="formItem.classCode" placeholder="选择维修类型" @change="changeMaintenance">
                <el-option v-for="item in maintenance_list" :key="item.classCode" :label="item.className" :value="item.classCode"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="辖区：" prop="jurisdiction">
              <el-cascader :options="options" v-model="formItem.jurisdiction" change-on-select @change="handleChange" :props="props" clearable>
              </el-cascader>
            </el-form-item>
            <el-form-item label="协管员" prop="assistant">
              <el-select size="small" clearable v-model="formItem.assistant" placeholder="">
                <el-option v-for="(item,index) in volunteer_list" :label="item.realName" :value="item.userPin" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="date" label="任务周期：">
              <el-date-picker v-model="formItem.date" :picker-options="dutyCycleOptions" type="datetimerange" :default-time="['00:00:00', '23:59:59']" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change='getsignDate'>
              </el-date-picker>
            </el-form-item>
            <el-form-item label="具体地址：" prop="address">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="formItem.address" :maxlength="50" placeholder="请输入详细地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align:center">
        <el-button type="primary" @click="confirm('formItem')">发布</el-button>
        <el-button type="ghost" @click="cancel('formItem')">取消</el-button>
      </div>
    </el-dialog>

//点击新增按钮打开模态框，对该表单项进行重置。重置表单要写在打开模态框的操作中管用，写在模态框点击保存和确认里面会有问题。
    repairgoingListAdd() {  //新增操作按钮
      this.taskModal = true   //打开模态框
      this.volunteer_list = []  //对于下拉框的表单要将其单独置空。
      this.$nextTick(() => {
        this.$refs['formItem'].resetFields()   //对表单进行重置。
      })
    },

//新增模态框点击确认
    confirm(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
            //对新增表单数据通过调用接口返回给后台的操作
            //省略
            this.taskModal = false  //关闭模态框
        }
     //点击取消时最好也重置下表单
      cancel(name) {
      if (this.$refs[name] !== undefined) {
        this.$refs[name].resetFields()
      }
      this.taskModal = false
    },

表单验证：
repairMaintainSet.rulesParams = function () {
    return{
        taskName:[
            {required: true,message: '任务名称不能为空',trigger: 'blur'},
        ],
        classCode:[
          {required: true,message: "维修类别不能为空", trigger: "change"},
        ],
        userCode:[
            {required: true,message: "协管员不能为空", trigger: "change"},
          ],
        className:[
          {required: true,message: "任务类别不能为空", trigger: "change"},
        ],
        deviceModel:[
            {required: true,message: '任务名称不能为空',trigger: 'blur'},
        ],
        jurisdiction:[
            { required: true, message: '请选择辖区', trigger: 'change' },
          ],
        jurisdiction2:[
            { required: true, message: '请选择辖区', trigger: 'change' },
          ],
        assistant:[
            { required: true, message: '请选择协管员', trigger: 'change' },
          ],
        date:[
            {required: true,message: '任务周期不能为空',trigger: 'change'},
        ],
        address:[
            {required: true,message: '具体地址不能为空',trigger: 'blur'},
        ],
    }
}