zoukankan      html  css  js  c++  java
  • vue:表单验证时,trigger的值什么时候选blur什么时候选change

    对el-input输入框的验证,trigger的值选blur,即失去焦点时进行验证。

    下拉框(el-select)、日期选择器(el-date-picker)、复选框(el-checkbox)、单选框(el-radio)的验证时,trigger的值选择change,即当值发生变化时就进行验证。

    下拉框的验证:

    <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    rules: {
              region: [
                { required: true, message: '请选择活动区域', trigger: 'change' }
              ]
    }

    日期选择器的验证:

    <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style=" 100%;"></el-date-picker>
    </el-form-item>

    date1: [ { type: 'date', required: true, message: '请选择日期', trigger: 'change' } ],

    复选框的验证:

    <el-form-item label="活动性质" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
    </el-form-item>

    type: [ { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' } ],

    单选框的验证:

    <el-form-item label="特殊资源" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>

    resource: [ { required: true, message: '请选择活动资源', trigger: 'change' } ],
  • 相关阅读:
    Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。
    react.js
    IE8 frameset SESSION丢失
    回调函数参数问题,闭包解决方案示例
    自定义 httpHandler 配置
    查看SQLServer数据库每个表占用的空间大小
    数据库备份到局域网其他电脑
    SpringSecurity权限管理系统实战—一、项目简介和开发环境准备
    java开发环境配置,看这一篇就足够了!
    java23种设计模式——八、组合模式
  • 原文地址:https://www.cnblogs.com/zwh0910/p/14187414.html
Copyright © 2011-2022 走看看