一、Element-UI之表单

案例

<template>
  <div>
    <!-- 在使用表单验证时,需要注意:
    1.必须给表单对象绑定一个对象::model="loginForm",而且不能写成:v-model="loginForm"
    2.所有的子控件的绑定对象必须是表单对象的内部对象,比如:v-model="loginForm.username",否则总是验证失败
     -->
    <el-form class="login-container" :model="loginForm" ref="loginForm" 
    :rules="rules" label-position="left">
      <h3 class="login-title">系统登录</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-checkbox class="login-remember" v-model="checked">记住密码</el-checkbox>
      <el-form-item>
        <el-button class="login-button" type="primary" @click="submitClick('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      rules: {
          username: [
              { required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
              { required: true, message: '请输入密码', trigger: 'blur'}
          ]
      },
      loginForm: {
        username: "admin",
        password: "123"
      },
      checked: true
    };
  },
  methods: {
    submitClick(formName) {
        // 表单验证
        this.$refs[formName].validate(valid => {
            if(valid) {
                alert('提交成功!')
            } else {
                console.log("error submit!")
                return false
            }
        })
    }
  }
};
</script>
<style lang="stylus" scoped>
    .login-container
        width 350px
        margin 130px auto
        background-clip padding-box
        padding 35px 35px 15px 35px
        border 1px solid #eaeaea
        border-radius 15px
        box-shadow 0 0 25px #cac6c6
        background #fff
        .login-title
            margin 0 auto 40px auto
            text-align center
            color #505458
        .login-remember
            margin 0 0 35px 0
            text-align center
        .login-button
            width 100%
</style>

注意事项

1.<el-form-item>一定要写在<el-form>

2.在使用表单验证时,需要注意:

(1)必须给表单对象绑定一个对象::model=“loginForm”,而且不能写成:v-model=“loginForm”
(2)所有的子控件的绑定对象必须是表单对象的内部对象,比如:v-model=“loginForm.username”,否则总是验证失败
参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

咸鱼最牛逼

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值