element-ui表单验证

最新推荐文章于 2025-04-15 09:48:09 发布

小小樟鱼

最新推荐文章于 2025-04-15 09:48:09 发布

阅读量1w

点赞数

本文链接：https://blog.csdn.net/web_note/article/details/78778077

版权

本文介绍了如何使用 Element UI 进行表单验证，包括HTML结构的设定，如`el-form`和`el-form-item`，以及数据对象和验证规则的设置。通过`data()`返回`user`模型和`rules`验证规则，并在`methods`中定义了表单的验证、提交和重置操作，确保在用户输入有效后进行登录操作。

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

1. html

<el-form :model="user" :rules="rules" ref="ruleForm" label-width="80px">
    <el-form-item label="用户名" prop="username" class="delu-box">
        <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密 码" prop="password" class="login-password delu-box">
        <el-input v-model="user.password" placeholder="请输入密码" type="password"
                  @keyup.native.enter="handleSubmit"></el-input>
    </el-form-item>
    <el-form-item class="delu-box">
        <el-button type="primary" @click.native.prevent="login" :loading="btnLoading"
                   style="float: left;">登录
        </el-button>
        <el-button @click.native.prevent="handleReset" style="float: right;">重置</el-button>
    </el-form-item>
</el-form>

2. 设置data（）默认数据

data () {
  return {
    user: {
      username: '',
      password: ''
    },
    rules: {
      username: [
        {required: true, message: '请输入用户名', trigger: 'blur'}
      ],
      password: [
        {required: true, message: '请输入登录密码', trigger: 'blur'}
      ]
    }
  }
3. methods验证
methods: {
login () {
  this.$refs.ruleForm.validate((valid) => {
    if (valid) {
      console.log('2222222222')
      this.user.password = Md5.md5(this.user.password)
      this.$store.dispatch('login', this.user).then(() => {
        axios({
          method: 'post',
          url: this.uploadAddr + 'public/getToken',
          data: {
            data: this.user.username + new Date().getTime()
          }
        }).then(response => {
          window.localStorage.setItem('token', response.data)
          axios.defaults.headers.common['Authorization'] = 'Bearer ' + window.localStorage.getItem('token')
        })
        this.$router.push({path: '/admin'})
      }).catch(err => {
        this.$message.error(err)
      })
    }
  })
},
handleReset () {
  this.$refs.ruleForm.resetFields()
},
handleSubmit () {
  this.login()
}

}