vue表单验证rules，及提交按钮动态设置

 

 

      :model="loginForm"
      :rules="rules"   

 <el-form-item prop="username">
          联系方式：<el-input
            style="width: 300px"
            type="text"
            v-model="loginForm.username"
            auto-complete="off"
            placeholder="账户"
          ></el-input>
        </el-form-item>

        <el-form-item prop="password">
          密码：<el-input
            style="width: 300px; margin-left: 25px"
            type="password"
            v-model="loginForm.password"
            auto-complete="off"
            placeholder="密码"
          ></el-input>
        </el-form-item>

  rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      loginForm: {
        username: "",
        password: "",
      },

 

按钮设置以及回车绑定

 

 <el-form-item style="width: 100%">
          <el-button
            type="primary"
            style="width: 75%; margin-left: 68px"
            @click="submitClick"
            @keyup.enter.native="submitClick"
            :disabled="!canSubmit"
            >登录</el-button
          >
      // 点击回车键登录
    keyDown(e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode === 13) {
        this.submitClick(); // 定义的登录方法
      }
    },



computed: {
    canSubmit() {
      const { username, password } = this.loginForm;
      return Boolean(username && password);
    },
    // account() {
    //   const { username } = this.account;
    //   this.account.required = !Boolean(username);
    //   return this.account.required;
    // },
  },

 

 

 

红色*代码

  <el-form-item label="原密码:" label-width="150px" size="medium">
          <label slot="label"
            ><span style="color: red">*</span>&nbsp;&nbsp;原密码:</label
          ><el-input v-model="form.password" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" label-width="150px" size="medium">
          <label slot="label"
            ><span style="color: red">*</span>&nbsp;&nbsp;新密码:</label
          ><el-input v-model="form.newPassword" style="width: 200px"></el-input>
        </el-form-item>

 

 
posted @ 2022-06-17 17:34  快了星球  阅读(2041)  评论(0)    收藏  举报