Element UI 的表單組件

使用基礎(chǔ)：創(chuàng)建一個(gè)簡單的表單

使用 Element UI 創(chuàng)建一個(gè)基本的表單。
示例代碼展示一個(gè)包含文本輸入、選擇框和提交按鈕的表單。

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="用戶名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密碼">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form submitted!', this.form);
    }
  }
};
</script>

.

表單驗(yàn)證：確保數(shù)據(jù)有效性

講解如何在 Element UI 中進(jìn)行表單驗(yàn)證。
示例代碼展示如何使用 rules 屬性進(jìn)行簡單的必填項(xiàng)驗(yàn)證和自定義驗(yàn)證規(guī)則。
提供常見驗(yàn)證規(guī)則的使用案例，如郵箱格式驗(yàn)證、最小/最大長度驗(yàn)證等。

<el-form :model="form" :rules="rules" ref="form">
  <el-form-item label="郵箱" prop="email">
    <el-input v-model="form.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">提交</el-button>
  </el-form-item>
</el-form>

<script>
export default {
  data() {
    return {
      form: {
        email: ''
      },
      rules: {
        email: [
          { required: true, message: '請輸入郵箱地址', trigger: 'blur' },
          { type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('提交成功!');
        } else {
          console.log('提交失敗!');
          return false;
        }
      });
    }
  }
};
</script>

posted @ 2024-08-14 17:55 最小生成樹閱讀(136) 評論(0) 收藏舉報(bào)

刷新頁面返回頂部

zx618

Element UI 的表單組件

使用基礎(chǔ)：創(chuàng)建一個(gè)簡單的表單

表單驗(yàn)證：確保數(shù)據(jù)有效性

公告