Element-ui 表单的基础使用

Posted 2021-11-10 数组喜欢打对象

1. 基本三大组件

<el-form>
  <el-form-item>
    <el-input/>
  </el-form-item>
</el-form>

2. 数据收集

        在 el-form 上面指定 model，在 el-input 组件加 v-model 进行双向数据绑定

3. 数据校验

在el-form 上面指定 rules 校验规则，在 el-form-item 组件加 prop，指定要校验的字段

<template>
  <div id="app">
    <!-- 卡片组件 -->
    <el-card class="login-card">
      <!-- 登录表单 -->
      <el-form style="margin-top: 50px" :model="loginForm" :rules="loginRules">
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      loginForm: {
        mobile: "",
        password: ""
      },
      loginRules: {
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "密码应为6-16位的长度",
            trigger: "blur"
          }
        ]
      }
    };
  }
};
</script>

3.1自定义校验规则

<script>
export default {
  name: 'App',
  data() {
    const customValidatorMobile = (rule, value, callback) => {
      // 无论符不符合规则，都要调用 callback，只不过，校验失败要传递一个错误对象，校验成功不用传递任何内容
      value[2] === '9' ? callback() : callback(new Error('第三个数字必须是 9'))
    }
    return {
      loginRules: {
        mobile: [
          {
            validator: customValidatorMobile,
            trigger: 'blur'
          }
        ],
      }
    }
  }
}
</script>

3.2 表单预校验，当所有的内容都符合规则了，才去调用对应的接口

<el-form ref="loginFormRef"></el-form>
async handleSubmit() {
  this.$refs['loginFormRef'].validate(function(valid) {
    if (!valid) return console.log('失败')
    // 发请求调用接口
  })
  // 这里不能直接调用接口
  /* this.$refs['loginFormRef'].validate().then(() => {
    // 发请求调用接口
  }).catch(() => {
    // 预校验失败，弹框提示
  }) */
  /* try {
    await this.$refs['loginFormRef'].validate()
    // 预校验通过调用接口
  } catch (e) {
    // 预校验失败，弹框提示
    console.log(e.message, 23)
  } */}