写一个基于elementui的新建仓库表单并带上验证

短命女 2024-03-25 16:33 22阅读 0赞

<p>使用 element-ui 创建带验证的新仓库表单：</p>
    <ol>
    <li><p>安装 element-ui：在命令行中运行 "npm install element-ui"。</p>
    </li>
    <li><p>在项目中引入 element-ui：在 main.js 中写入 "import ElementUI from 'element-ui';" 和 "import 'element-ui/lib/theme-chalk/index.css';"。</p>
    </li>
    <li><p>使用 Vue.use() 安装 element-ui：在 main.js 中写入 "Vue.use(ElementUI);"。</p>
    </li>
    <li><p>在页面中创建表单：</p>
    </li>
    </ol>
    <p>```
    <template>
      <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="仓库名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="仓库地址" prop="address">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template></p>
    <script>
    export default {
      data() {
        return {
          form: {
            name: '',
            address: ''
          },
          rules: {
            name: [
              { required: true, message: '请输入仓库名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            address: [
              { required: true, message: '请输入仓库地址', trigger: 'blur' },
              { min: 5, max: 8, message: '长度在 5 到 8 个字符', trigger: 'blur' }
            ]
          }
        };
      },
      methods: {
        submitForm() {
          this.$refs.form.validate((valid) => {
            if (valid) {
              console.log('表单验证通过');
            } else {
              console.log('表单验证失败');
            }
          });
        },
        resetForm() {
          this.$refs.form.resetFields();
        }
      }
    };