程序员scholar
  • Element-UI
  • 表单组件
scholar
2024-08-12
目录

表单（Form）

# 表单（Form）

Element-UI 的表单组件用于创建包含输入框、选择器、单选框、多选框等控件的表单，以收集、校验和提交数据。

提示

表单（Form）组件官方文档：https://element.eleme.cn/#/zh-CN/component/form (opens new window)

# 1. 基本用法

基本语法：在 Vue 组件中使用 <el-form> 和 <el-form-item> 标签创建一个表单，通过 model 属性绑定表单数据对象，并通过 rules 属性定义表单验证规则。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></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>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '', // 表单用户名字段
        password: ''  // 表单密码字段
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功');
        } else {
          this.$message.error('提交失败');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
  • v-model 绑定：表单字段通过 v-model 与表单数据对象中的字段绑定，实现数据的双向绑定。
  • 表单验证：通过 rules 属性定义表单字段的验证规则，并在 el-form-item 中指定 prop 属性与表单数据对象中的字段对应。
  • 提交和重置：通过 validate 方法进行表单验证，通过 resetFields 方法重置表单字段。
  • image-20240808111549624

# Form 属性

参数 说明 类型 可选值 默认值
model 表单数据对象 object — —
rules 表单验证规则 object — —
inline 行内表单模式 boolean — false
label-position 表单域标签的位置，如果值为 left 或 right，则需要设置 label-width string right/left/top right
label-width 表单域标签的宽度，例如 '50px'。支持 auto string — —
label-suffix 表单域标签的后缀 string — —
hide-required-asterisk 是否隐藏必填字段的标签旁边的红色星号 boolean — false
show-message 是否显示校验错误信息 boolean — true
inline-message 是否以行内形式展示校验信息 boolean — false
status-icon 是否在输入框中显示校验结果反馈图标 boolean — false
validate-on-rule-change 是否在 rules 属性改变后立即触发一次验证 boolean — true
size 用于控制该表单内组件的尺寸 string medium/small/mini —
disabled 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效 boolean — false

# Form 方法

方法名 说明 参数
validate 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise Function(callback: Function(boolean, object))
validateField 对部分表单字段进行校验的方法 Function(props: array | string, callback: Function(errorMessage: string))
resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 —
clearValidate 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 Function(props: array | string)

# Form 事件

事件名称 说明 回调参数
validate 任一表单项被校验后触发 被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）

# Form-Item 属性

参数 说明 类型 可选值 默认值
prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 string 传入 Form 组件的 model 中的字段 —
label 标签文本 string — —
label-width 表单域标签的的宽度，例如 '50px'。支持 auto string — —
required 是否必填，如不设置，则会根据校验规则自动生成 boolean — false
rules 表单验证规则 object — —
error 表单域验证错误信息, 设置该值会使表单验证状态变为 error，并显示该错误信息 string — —
show-message 是否显示校验错误信息 boolean — true
inline-message 以行内形式展示校验信息 boolean — false
size 用于控制该表单域下组件的尺寸 string medium/small/mini —

# Form-Item 插槽

名称 说明
— Form Item 的内容
label 标签文本的内容

# Form-Item 作用域插槽

名称 说明
error 自定义表单校验信息的显示方式，参数为 { error }

# Form-Item 方法

方法名 说明 参数
resetField 对该表单项进行重置，将其值重置为初始值并移除校验结果 —
clearValidate 移除该表单项的校验结果 —

# 2. 表单常用示例

# 行内表单

通过 inline 属性启用行内表单模式。

<template>
  <el-form :model="form" :rules="rules" inline ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></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>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '', // 表单用户名字段
        password: ''  // 表单密码字段
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功');
        } else {
          this.$message.error('提交失败');


          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
  • 行内模式：通过 inline 属性启用，表单项会水平排列。
  • image-20240808111734387

# 标签位置

通过 label-position 属性设置表单域标签的位置。

<template>
  <el-form :model="form" :rules="rules" label-position="left" label-width="100px" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></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>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '', // 表单用户名字段
        password: ''  // 表单密码字段
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功');
        } else {
          this.$message.error('提交失败');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
  • 标签位置：通过 label-position 属性设置标签的位置，可以为 left、right 或 top，并通过 label-width 设置标签的宽度。
  • image-20240808112017713

# 禁用表单

通过 disabled 属性禁用表单内的所有组件。

<template>
  <el-form :model="form" :rules="rules" :disabled="true" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm" :disabled="true">提交</el-button>
      <el-button @click="resetForm" :disabled="true">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '', // 表单用户名字段
        password: ''  // 表单密码字段
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功');
        } else {
          this.$message.error('提交失败');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
  • 禁用表单：通过 disabled 属性禁用表单内的所有组件。
  • image-20240808112101436

# 表单验证

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
    <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="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '', // 表单用户名字段
        age: '', // 表单年龄字段
        email: ''  // 表单邮箱字段
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功');
        } else {
          this.$message.error('提交失败');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
  • 自定义校验规则：通过 rules 属性定义不同类型的校验规则，例如必填字段、数字类型验证和邮箱格式验证。
  • image-20240808112143224

# 表单内组件尺寸控制

通过设置 Form 上的 size 属性可以使该表单内所有可调节大小的组件继承该尺寸。

<template>
  <el-form :model="form" :rules="rules" size="small" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></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>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '', // 表单用户名字段
        password: ''  // 表单密码字段
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功');
        } else {
          this.$message.error('提交失败');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
  • 表单组件尺寸控制：通过 size 属性统一控制表单内所有组件的尺寸。
  • image-20240808112319225

总结

  • 灵活的属性配置：通过 inline、label-position、label-width、validate-on-rule-change 等属性可以自定义表单的行为和样式。
  • 丰富的事件处理：支持 validate 事件，允许开发者在表单项校验后进行自定义处理。
  • 多样的验证规则：通过 rules 属性定义验证规则，并在表单项中指定 prop 属性与表单数据对象中的字段对应，实现灵活的表单验证。

# 3. 经典常用表单

# 1. 登录表单

一个企业级别的登录表单，包括输入框验证和样式。

<template>
  <div class="login-container">
    <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="70px" class="loginForm">
      <div style="display: flex;align-items: center; justify-content: center;">
        <h2>欢迎登录</h2>
        <!-- <span style="margin: 12px 0;font-size: 20px;font-weight: 400;">欢迎登录</span> -->
      </div>

      <el-form-item label="用户名" prop="username">
        <el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input prefix-icon="el-icon-lock" type="password" v-model="loginForm.password" placeholder="请输入密码"
          show-password></el-input>
      </el-form-item>

      <!-- 验证码 -->
      <el-form-item label="验证码" prop="vercode">
        <div>
          <el-row style="display: flex;">
            <el-col :span="12">
              <el-input v-model="loginForm.vercode" prefix-icon="el-icon-lock" style=" margin-right: 10px"
                placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="12">
              <img :src='captchaImg'  height="100%" alt="验证码" @click="refresh()">
            </el-col>
          </el-row>
        </div>
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
        <el-row>
          <div style="display: flex;justify-content: space-between;">
            <el-button type="text" @click="changePassword">忘记密码?</el-button>
            <el-button type="text" @click="goToRegister">没有账号?</el-button>
          </div>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin">登录</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogFormVisible" title="修改密码" width="500px">
      <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input prefix-icon="el-icon-user" v-model="editForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input prefix-icon="el-icon-message" v-model="editForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-row>
            <el-col :span="16">
              <el-input v-model="editForm.code" placeholder="请输入验证码" ></el-input>
            </el-col>
            <el-col :span="7">
              <el-button type="primary" plain @click="sendCode" style="margin-left: 10px;">发送验证码</el-button>
            </el-col>
          </el-row>

        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" prefix-icon="el-icon-lock" v-model="editForm.newPassword" placeholder="请输入新密码"
            show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleChangePassword">提交</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>


<script>
import request from "@/request";

export default {
  data() {
    return {
      dialogFormVisible: false, // 控制 Dialog 显示与隐藏的状态
      captchaImg:'', // 后端返回的图片验证码
      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        vercode:'',   // 前端输入的图片验证码
        captchaKey:''  //图片验证码的唯一key
      },
      editForm: {
        username: '',
        email: '',
        code: '',
        newPassword: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }
        ],
        vercode:[
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ]
      },
      editRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    created() {
      this.refresh();  // 页面加载的时候刷新验证码
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          request.post('/web/login', this.loginForm)
            .then(response => {
              this.$message.success('登录成功');
              // 如果选择了记住我，则将Token或者SessionID存储在本地
              if (this.loginForm.rememberMe) {
                console.log(response.data);
                const user = JSON.stringify(response.data);
                localStorage.setItem('xm-user', user); // 或者使用 Cookies
              } else {
                const user = JSON.stringify(response.data);
                sessionStorage.setItem('xm-user', user);
              }
              this.$router.push('/main');
              this.$message.success('登录成功');
            })
            .catch(error => {
              this.$message.error('登录失败：'+error);
              console.error(error);
            });
          // this.$message.success('登录成功');
          // this.$router.push('/main');
        } else {
          this.$message.error('请完善表单信息');
          return false;
        }
      });
    },
    handleReset() {
      this.$refs.loginForm.resetFields();
    },
    goToRegister() {
      this.$router.push({ path: '/register' });
    },
    changePassword() {
      this.dialogFormVisible = true;
    },
    sendCode() {
      // 发送验证码逻辑
      request.post('/send-code', {
        username: this.editForm.username,
        email: this.editForm.email
      })
        .then(response => {
          this.$message.success('验证码已发送');
        })
        .catch(error => {
          this.$message.error('发送验证码失败');
          console.error(error);
        });
    },
    handleChangePassword() {
      // this.$refs.editForm.validate((valid) => {
      //   if (valid) {
      //     axios.post('/api/change-password', {
      //       username: this.editForm.username,
      //       email: this.editForm.email,
      //       code: this.editForm.code,
      //       newPassword: this.editForm.newPassword
      //     })
      //       .then(response => {
      //         this.$message.success('密码修改成功');
      //         this.dialogFormVisible = false;
      //       })
      //       .catch(error => {
      //         this.$message.error('修改密码失败');
      //         console.error(error);
      //       });
      //   } else {
      //     this.$message.error('请完善表单信息');
      //     return false;
      //   }
      // });
    },
    // 获取图片验证码请求
    refresh() {
      // request.post("/admin/code").then(res => {
      //   if (res.code === '0') {
      //     // 设置图片验证码
      //     this.captchaImg = res.data.captchaImg;
      //     // 将后端返回的该图片验证码的唯一key存进当前表单里面,用于提交到后端去获取redis里面的验证码
      //     this.loginForm.captchaKey = res.data.captchaKey;
      //   }
      // })
    }
  }
};
</script>


<style scoped>

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #d0d2ea, #d3d4e1);
  /* 渐变背景色 */
  /* background-image: url('/path/to/your/background.jpg'); */
  /* 背景图像 */
  background-size: cover;
  /* 保证图片覆盖整个背景 */
  background-repeat: no-repeat;
  background-position: center;
}

.loginForm {
  width: 400px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  /* 半透明白色背景 */
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
/deep/.el-form-item__content {
  line-height: 20px !important;
  position: relative;
  font-size: 14px;
}
/deep/.el-form-item {
  margin-bottom: 12px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262

# 2. 注册表单

一个企业级别的注册表单，包括输入框验证和样式。

<template>
  <div style="display: flex;align-items: center; height: 100vh;">
    <el-form :model="registerForm" :rules="registerRules" ref="registerForm" label-width="100px">
      <div style="display: flex;justify-content: center;">
        <h2>欢迎注册</h2>
      </div>
      <el-form-item label="用户名" prop="username">
        <el-input prefix-icon="el-icon-user" v-model="registerForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prefix-icon="el-icon-lock" label="密码" prop="password">
        <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input prefix-icon="el-icon-lock" type="password" v-model="registerForm.confirmPassword"
          placeholder="请再次输入密码"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input prefix-icon="el-icon-box" v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <div>
          <el-button type="primary" @click="handleRegister" style="width: 120px;">注册</el-button>
          <!-- <el-button @click="handleReset">重置</el-button> -->
          <el-button type="text" @click="gotologin">前往登录？</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      registerForm: {
        username: '',
        password: '',
        confirmPassword: '',
        email: ''
      },
      registerRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.registerForm.password) {
                callback(new Error('两次输入的密码不一致'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          this.$message.success('注册成功');
        } else {
          this.$message.error('请完善表单信息');
          return false;
        }
      });
    },
    handleReset() {
      this.$refs.registerForm.resetFields();
    },
    gotologin() {
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.el-form {
  width: 400px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

# 3. 个人信息表单

包括姓名、性别、年龄、邮箱等基本信息的输入表单。

<template>
  <el-form :model="userInfoForm" :rules="userInfoRules" ref="userInfoForm" label-width="100px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="userInfoForm.name" placeholder="请输入姓名"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="gender">
      <el-radio-group v-model="userInfoForm.gender">
        <el-radio label="male">男</el-radio>
        <el-radio label="female">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input type="number" v-model="userInfoForm.age" placeholder="请输入年龄"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="userInfoForm.email" placeholder="请输入邮箱"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      userInfoForm: {
        name: '',
        gender: '',
        age: '',
        email: ''
      },
      userInfoRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.userInfoForm.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功');
        } else {
          this.$message.error('请完善表单信息');
          return false;
        }
      });
    },
    handleReset() {
      this.$refs.userInfoForm.resetFields();
    }
  }
};
</script>

<style scoped>
.el-form {
  width: 600px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

# 4. 网站信息表单

包括网站名称、域名、描述等基本信息的输入表单。

<template>
  <el-form :model="websiteInfoForm" :rules="websiteInfoRules" ref="websiteInfoForm" label-width="100px">
    <el-form-item label="网站名称" prop="name">
      <el-input v-model="websiteInfoForm.name" placeholder="请输入网站名称"></el-input>
    </el-form-item>
    <el-form-item label="域名" prop="domain">
      <el-input v-model="websiteInfoForm.domain" placeholder="请输入域名"></el-input>
    </el-form-item>
    <el-form-item label

="描述" prop="description">
      <el-input type="textarea" v-model="websiteInfoForm.description" placeholder="请输入描述"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      websiteInfoForm: {
        name: '',
        domain: '',
        description: ''
      },
      websiteInfoRules: {
        name: [
          { required: true, message: '请输入网站名称', trigger: 'blur' }
        ],
        domain: [
          { required: true, message: '请输入域名', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.websiteInfoForm.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功');
        } else {
          this.$message.error('请完善表单信息');
          return false;
        }
      });
    },
    handleReset() {
      this.$refs.websiteInfoForm.resetFields();
    }
  }
};
</script>

<style scoped>
.el-form {
  width: 600px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

总结

  • 企业级别表单：登录表单和注册表单具有严格的输入验证和用户友好的错误提示。
  • 个人信息表单：包括基本信息的输入和验证。
  • 网站信息表单：包括网站基本信息的输入和验证。
  • 统一样式：所有表单使用了统一的样式，确保页面整洁美观。
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
穿梭框（Transfer）
表单（Form）校验

← 表单（Form）校验→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar