elementui实现登录页面效果及验证_element ui 欢迎页面-优快云博客

博客提及了当前页面和script，script在前端开发中常用于实现页面交互等功能，当前页面可能是具体操作的载体。

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

1.当前页面

<el-form :model="ruleForm"
               :rules="rules"
               ref="ruleForm">
        <el-form-item prop="account">
          <el-input type="text"
                    v-model="ruleForm.account"
                    autocomplete="off"
                    placeholder="请输入用户名">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password"
                    v-model="ruleForm.password"
                    placeholder="请输入密码"
                    autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input type="text"
                    v-model="ruleForm.mobile"
                    placeholder="请输入手机号"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="verifycode"
                      class="input_ver">
          <el-input v-model="ruleForm.verifycode"
                    placeholder="请输入验证码"></el-input>
          <v-button type="primary"
                    @click="getVerifycode">获取验证码</v-button>
        </el-form-item>
        <el-form-item>
          <v-button class="loginBtn"
                    type="primary"
                    @click="goLogin('ruleForm')">登录</v-button>
        </el-form-item>
      </el-form>

2.script

import { mapMutations } from "vuex";

export default {
  data () {
    var isvalidPhone = (rule, value, callback) => {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
      if (!value) {
        return callback(new Error(this.$t('mobile')))
      } else if (!reg.test(value)) {
        return callback(new Error(this.$t('mobileCheck')))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        account: "",
        password: "",
        mobile: "",
        verifycode: ""
      },
      rules: {
        account: [
          { required: true, message: '请输入用户名', trigger: "blur" },
          { min: 6, max: 16, message: '用户名由6-16位的英文字母数字下划线组成', trigger: "blur" }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: "blur" },
          { min: 6, max: 16, message: '密码由6-16位的字母数字下划线组成', trigger: "blur" },
        ],
        mobile: [
          { validator: isvalidPhone, trigger: 'blur' }
        ],
        verifycode: [
          {
            required: true,
            message: ''验证码错误,
            trigger: "blur"
          }
        ]
      },
      isLogin: false
    };
  },
  created () { },
  methods: {
    ...mapMutations(['setToken']),

    goLogin (formName) {//点击登录
      this.$refs[formName].validate(valid => {
          fetchPost("/login", this.ruleForm).then(res => {
            console.log(res)
            if (res.code != 1) {
              this.$message.error('登录失败')
            }
            this.loginSuccess(res.data)
            this.setToken(res.data.Token)
            this.$router.replace("/home")
          });
        } else {
          this.$message('错误'))
          return false;
        }
      });
    },
    loginSuccess (data) {
      //登录成功后的处理...
    },
    getVerifycode () {
      var mobile = this.ruleForm.mobile
      if (!mobile) {
        this.$refs.ruleForm.validateField('mobile')
      } else {
        this.getMsg(mobile)
      }
    },
    getMsg (mobile) {
      console.log(mobile) //通过手机号发送短信验证      
    }
  }
};