vue-element 表单操作合集

最新推荐文章于 2025-07-28 15:14:36 发布

原创最新推荐文章于 2025-07-28 15:14:36 发布 · 912 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个基于Vue的用户注册表单实现，详细解释了如何使用Element UI进行表单布局、输入验证及响应式设计。文章展示了如何通过正则表达式验证手机号和密码强度，以及如何使用Axios向后端发送POST请求来完成用户信息的注册。

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

<template>
  <div class="background" style="padding-top: 10%">
    <div class="news">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="center" label-width="90px" align="center">
        <el-form-item label="用户名" prop="userName" >
          <el-input v-model="ruleForm.userName" placeholder="请输入3-8字符用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入6-15位密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="againPw">
          <el-input type="password" v-model="ruleForm.againPw" autocomplete="off" placeholder="请输入6-15位确认密码"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-model="ruleForm" @click="submitForm">添加用户</el-button>
          <br>
          <router-link to="/">已有账号，点此登录</router-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    export default {
        name: "register",
      data () {
        var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm.againPw !== '') {
              this.$refs.ruleForm.validateField('againPw');
            }
            callback();
          }
        };
        var validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.ruleForm.password) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        var checkPhone = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('请输入手机号'));
          } else {
            const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
            console.log(reg.test(value));
            if (reg.test(value)) {
              callback();
            } else {
              return callback(new Error('请输入正确的手机号'));
            }
          }
        };
        return {
          background: {
            backgroundImage: "url(" + require("../assets/pm.jpg") + ")",
            backgroundPosition: "center center",
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover",
          },
          ruleForm : {
            userName:'',
            password:'',
            againPw:'',
            email: '',
            phone: '',
          },
          rules : {
            userName: [{ required: true, message: '请输入3-8字符的用户名', trigger: 'blur' },
              { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }],
            password: [{ required: true,validator: validatePass, trigger: 'blur' }],
            againPw: [{required: true, validator: validatePass2, trigger: 'blur' }],
            email:[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
              { type:'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
            phone:[{ required: true,validator:checkPhone, trigger: 'blur' }],
          },
        }
      },
      methods:{
        submitForm() {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.ruleForm.action = "add"
              console.log(this.ruleForm);
              this.$axios
                .post('/user', this.$qs.stringify(this.ruleForm), {headers: {'Content-Type': "application/x-www-form-urlencoded"}})
                .then(response => {
                  withCredentials: true
                  console.log(response.data)
                  if (response.data.code == 200) {
                    this.$message({showClose: true, message: '添加用户成功！', type: 'success'});
                    return true;
                  } else if (response.data.code == 207) {
                    this.$message({showClose: true, message: '该邮箱已经被注册！', type: 'error'});
                    return false;
                  } else {
                    this.$message({showClose: true, message: '添加用户失败！', type: 'error'});
                    return false;
                  }
                })
                .catch(error => {
                  console.log(error)
                })
            } else {
              return false;
              console.log("false!!!!!");
            }
          })
        }
      }
    }
</script>

<style scoped>

</style>
<style>
  .background{
    position:fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    min-width: 1000px;
    z-index:-10;
    zoom: 1;
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
    background-image: url("../assets/pm.jpg");
  }
  .el-input{
    width: 250px;
  }
  .el-button{
    width: 250px;
  }
</style>