自适应2

ZZJ

2021-12-16 dff9fb32c1bac52d378a6d196f670b92610c01d3

 src/pages/index/components/formAccount.vue

@@ -1,134 +1,134 @@
<template>
  <div class="formAccount">
    <el-form ref="form" :model="form" label-width="90px" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="form.username"
          placeholder="2-10位字符，不能以数字开头，不可包含汉字"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input
          v-model="form.password"
          placeholder="至少为6位字符"
          type="password"
        ></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="repassword">
        <el-input
          v-model="form.repassword"
          placeholder="请确认密码"
          type="password"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getRegInfo } from "../api";

export default {
  data() {
    const validateName = (rule, value, callback) => {
      var reg = /^[A-Za-z][A-Za-z0-9]{0,}$/;
      if (!reg.test(value)) {
        return callback(new Error("不能以数字开头，不可包含汉字"));
      } else callback();
    };

    const validateRePass = (rule, value, callback) => {
      if (this.form.password != value) {
        return callback(new Error("两次密码不一致"));
      } else callback();
    };

    return {
      form: {
        username: "",
        password: "",
        repassword: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
          { validator: validateName, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 24,
            message: "至少为6位字符",
            trigger: "blur",
          },
        ],
        repassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { validator: validateRePass, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    getFormData() {
      const _this = this;
      let data = null;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          data = _this.form;
        } else {
          return false;
        }
      });
      return data;
    },

    async getRegInfo() {
      const res = await getRegInfo();
      console.log(res);
    },
  },
};
</script>

<style lang="scss" scoped>
.formAccount {
  .el-form-item ::v-deep {
    label {
      font-size: 14px;
      color: #fff;
      text-align: left;
    }

    .el-form-item__content {
      margin-left: 110px !important;
    }

    input {
      background-color: rgba(0, 0, 0, 0.1);
      color: #fff;
      border: none;
      caret-color: #fff !important;
    }

    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
      -webkit-text-fill-color: #fff !important;
      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
      background-color: transparent;
      background-image: none;
      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }
  }
}
<template>

  <div class="formAccount">

    <el-form ref="form" :model="form" label-width="90px" :rules="rules">

      <el-form-item label="用户名" prop="username">

        <el-input

          v-model="form.username"

          placeholder="2-10位字符，不能以数字开头，不可包含汉字"

        ></el-input>

      </el-form-item>



      <el-form-item label="密码" prop="password">

        <el-input

          v-model="form.password"

          placeholder="至少为6位字符"

          type="password"

        ></el-input>

      </el-form-item>



      <el-form-item label="确认密码" prop="repassword">

        <el-input

          v-model="form.repassword"

          placeholder="请确认密码"

          type="password"

        ></el-input>

      </el-form-item>

    </el-form>

  </div>

</template>



<script>

import { getRegInfo } from "../api";



export default {

  data() {

    const validateName = (rule, value, callback) => {

      var reg = /^[A-Za-z][A-Za-z0-9]{0,}$/;

      if (!reg.test(value)) {

        return callback(new Error("不能以数字开头，不可包含汉字"));

      } else callback();

    };



    const validateRePass = (rule, value, callback) => {

      if (this.form.password != value) {

        return callback(new Error("两次密码不一致"));

      } else callback();

    };



    return {

      form: {

        username: "",

        password: "",

        repassword: "",

      },

      rules: {

        username: [

          { required: true, message: "请输入用户名", trigger: "blur" },

          {

            min: 2,

            max: 10,

            message: "长度在 2 到 10 个字符",

            trigger: "blur",

          },

          { validator: validateName, trigger: "blur" },

        ],

        password: [

          { required: true, message: "请输入密码", trigger: "blur" },

          {

            min: 6,

            max: 24,

            message: "至少为6位字符",

            trigger: "blur",

          },

        ],

        repassword: [

          { required: true, message: "请确认密码", trigger: "blur" },

          { validator: validateRePass, trigger: "blur" },

        ],

      },

    };

  },

  methods: {

    getFormData() {

      const _this = this;

      let data = null;

      this.$refs["form"].validate((valid) => {

        if (valid) {

          data = _this.form;

        } else {

          return false;

        }

      });

      return data;

    },



    async getRegInfo() {

      const res = await getRegInfo();

      console.log(res);

    },

  },

};

</script>



<style lang="scss" scoped>

.formAccount {

  .el-form-item ::v-deep {

    label {

      font-size: 14px;

      color: #fff;

      text-align: left;

    }



    .el-form-item__content {

      margin-left: 110px !important;

    }



    input {

      background-color: rgba(0, 0, 0, 0.1);

      color: #fff;

      border: none;

      caret-color: #fff !important;

    }



    input:-webkit-autofill,

    textarea:-webkit-autofill,

    select:-webkit-autofill {

      -webkit-text-fill-color: #fff !important;

      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;

      background-color: transparent;

      background-image: none;

      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间

    }

  }

}

</style>