elemeng-ui中表单如何校验_emu-ul数据校验-CSDN博客

本文链接：https://blog.csdn.net/weixin_57994974/article/details/117677577

这篇博客介绍了如何在Vue项目中引入和使用Element UI库来创建一个包含账号和密码输入的登录表单，并实现了表单验证功能。通过在main.js中导入Element UI和样式文件，然后在组件中利用form-item和el-input元素配合v-model和rules属性进行表单验证。当用户点击提交按钮时，会触发验证，如果账号或密码为空，则显示相应提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、首先我们引入element

1、下载

npm i element-ui -S

2、引入

我们这里直接完整引入了，按需引入请看element官网
在main.js中写入以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
  el: '#app',
  render: h => h(App)
});

二、使用我们的表单

我就拿简单的有账号和密码的举一个例子

<template>
<div>
 <el-form
          :model="loginUser"
          ref="loginUser"
          label-width="100px"
          class="demo-ruleForm">
 		<el-form-item
            label="用户名"
            prop="username"
            :rules="[{ required: true, message: '用户名不能为空' }]">
              <-! 账号判空，如果账号为空就提示，input失去焦点时触发 ->
            <el-input
              v-model="loginUser.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            :rules="[{ required: true, message: '密码不能为空' }]">
            <-! 密码判空，如果密码为空就提示，input失去焦点时触发 ->
            <el-input
              v-model="loginUser.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="login">提交</el-button>
          </el-form-item>
        </el-form>
  </div>
</template>
<script>
export default { 
	data() {
    return {
      loginUser: {
        username: "",
        // 账号
        password: "",
        // 密码
      },
    };
  },
  methods: {
    login() {
      this.$refs["loginUser"].validate((val) => {
      // val 是 true 或 false 
      // 通过我们的rules判断为true，否则为false
        if (!val) return false;
        // 用户和密码不能为空
    },
    // 登录
    reset() {
      this.loginUser.username = "";
      this.loginUser.password = "";
    },
    // 重置
  },
}
</script>