vue element 表单自定义效验 及 单独效验某个值

主要功能 (表单自定义效验  && 单独效验某个值)

表单自定义效验

export default {
        data() {
        // 定义效验
        const validatePersonCharge = (rule, value, callack) => {
          // value 是绑定值的内容
    if (value == '张三') {
            callack(new Error('不能为张三'))
          } else {
            callack()
          }
        }
        return {
            form: {
                name: ''
            },
             rules: {
                name: [
                  { required: true, message: '请输入名称', trigger: 'blur' },
            // 使用
            { validator: validatePersonCharge, trigger: 'blur' }
                ],
            }
        }
    }
}

单独效验某个值

methods: {
    // 下拉框事件
    select (e) {
      // 点击复选框单独对某个值进行效验 ("selectCharge") 这个是你 prop 绑定的名称
         this.$refs["form"].validateField("selectCharge")
    }
}

源代码

js

data () {
    // 自定义效验
    const validatePersonCharge = (rule, value, callack) => {
       // value 是 v-model 绑定的值
      if (value == '请选择任务负责人') {
       // 抛出效验文字
        callack(new Error('请选择任务负责人'))
      } else {
        callack()
      }
    }
    return {

      taskRules: {

        selectPersonCharge: [

          { required: true, message: '请选择负责人', trigger: 'blur' },

          { validator: validatePersonCharge, trigger: 'blur' }

        ],

      },

             taskForm: {
             selectPersonCharge: '请选择任务负责人',

        　　　　personnel: [

         　　 　　{

           　　 　　checked: false,

          　　  　　label: '张小刚'

         　　　　 },

       　　　　   {

      　　  　　    checked: false,

     　　  　　     label: '李小红'

      　　  　　  },

     　　   　　  {

       　　  　　   checked: false,

     　　    　　   label: '王小明'

       　　 　　  },

      　　  　　  {

      　　 　　     checked: false,

      　　  　　    label: '周小伟'

      　　  　　  },

      　　   　　 {

      　　   　　   checked: false,

     　　     　　  label: '李小刚'

       　　 　　  }

     　　  　　 ]

        }
    }
}
methods: {

    stopDefault (e) {
      e.stopPropagation()


      let peopleArray = []
      this.taskForm.personnel.forEach(item => {
        if (item.checked) {
          peopleArray.push(item.label)
        }
      })



      this.taskForm.selectPersonCharge = peopleArray.join('、')




      if (peopleArray.length == 0) {
        this.taskForm.selectPersonCharge = '请选择任务负责人'
      }



      // 点击复选框单独对某个值进行效验
      this.$refs["form"].validateField("selectPersonCharge")
    },

}

HTML 

<el-form-item label="请选择任务负责人:"
                      prop="selectPersonCharge">
          <el-dropdown split-button>
            <span>{{taskForm.selectPersonCharge}}</span>
            <el-dropdown-menu class="select-person"
                              slot="dropdown">
              <el-dropdown-item v-for="(item, index) in taskForm.personnel"
                                :key="index"
                                :command="item.label">
                <el-checkbox v-model="item.checked"
                             @change.native="stopDefault($event)"
                             :label="item.label"></el-checkbox>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>

css

// 下拉菜单的宽度
.select-person li {
  width: 150px;
}
// 图标
::v-deep .el-dropdown .el-dropdown__caret-button {
  padding: 7px 7px 11px 7px;
  border-left: 1px solid #dcdfe6;
}

::v-deep .el-dropdown .el-dropdown__caret-button i {
  font-size: 20px;
}