• ele之vue3.0的form表单验证与重置


    <template>
      <div class="dia-cont">
        <el-form :model="ruleForm" :rules="rules" ref="ruleFormsss" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名称" prop="xm">
            <el-input v-model="ruleForm.xm"></el-input>
          </el-form-item>
          <el-form-item label="登录账号" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" :disabled="!passStatus" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="dw" class="add-dw">
            <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>
          <el-form-item label="状态" prop="isdelete">
            <el-switch v-model="ruleForm.isdelete" active-color="#179BFF" :active-text="showName" active-value="1" inactive-value="0" :width="54"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script  lang="ts" >
    import { defineComponent, unref, defineAsyncComponent, ref, reactive, onMounted, toRefs, markRaw, shallowRef, getCurrentInstance } from 'vue';
    export default defineComponent({
      components: {
        props: {
          dialogTitle: {
            type: String
          }
        }
      },
      setup(props, context) {
        const ruleFormsss = ref(null);
        // 定义变量
        let data = reactive({
          ruleForm: {
            xm: '',
            name: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          },
          rules: {
            name: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
            date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
            date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],
            type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],
            resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
            desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
          }
        });
        const submitForm = async () => {
          const form: any = unref(ruleFormsss);
          if (!form) return;
          try {
            await form.validate();
            const { xm, name } = data.ruleForm;
            console.log('76', xm, name);
          } catch (error) {}
        };
        const resetForm = () => {
          const form: any = unref(ruleFormsss);
          form.resetFields();
        };
        return {
          ...toRefs(data),
          submitForm,
          resetForm,
          ruleFormsss
        };
      }
    });
    </script>
    <style lang="less" scoped>
    /deep/ .el-switch {
      position: relative;
      height: 24px;
      line-height: 24px;
      &.is-checked {
        .el-switch__core {
          background: #179bff;
          &:after {
            margin-left: -22px;
          }
        }
      }
      .el-switch__label,
      .el-switch__core {
        height: 24px;
      }
      .el-switch__core {
        border-radius: 12px;
        border: none;
        background: #f1f1f1;
        &:after {
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
           22px;
          height: 22px;
        }
      }
      .el-switch__label.is-active {
        color: #333;
      }
      .el-switch__label--right {
        margin-left: 0px;
        &.is-active {
          color: #fff;
          right: 24px;
        }
        position: absolute;
        right: 5px;
        top: -1px;
        color: #999;
        > span {
          font-size: 12px;
        }
      }
    }
    </style>
    <style lang="less">
    .dia-cont .el-form-item__content {
      display: flex;
    }
    </style>

    注解

     const submitForm = async () => {
          const form: any = unref(ruleFormsss);
          if (!form) return;
          try {
            await form.validate();
            const { xm, name } = data.ruleForm;
            console.log('76', xm, name);
          } catch (error) {}
        };
    里面的
    async
    await 很重要,要不就会报验证的警告错误
  • 相关阅读:
    B树和B+树的区别
    宏(腾讯)
    数组作为函数参数传递时退化为指针(腾讯)
    求已知表达式的后缀形式(腾讯)
    JAVA笔记12-接口interface
    JAVA笔记11-Final关键字
    JAVA笔记10-抽象类
    JAVA笔记9-多态(动态绑定、池绑定)
    JAVA笔记8-对象转型casting
    JAVA笔记7-Object类之toString方法和equals方法
  • 原文地址:https://www.cnblogs.com/lsc-boke/p/14717953.html
Copyright © 2020-2023  润新知