Vue_关于校验问题

<template>
  <div class="exam-box">
    <h3>不用UI校验,自己写校验</h3>
    <mt-field
      label="用户名"
      placeholder="请输入用户名"
      v-model="username"
      :attr="{ maxlength: 10 }"
    ></mt-field>

    <mt-field
      label="密码"
      type="password"
      placeholder="请输入用户名密码"
      v-model="password"
      :attr="{ maxlength: 10 }"
    ></mt-field>

    <mt-button type="default" size="large" @click="regClick">用户注册</mt-button>
  </div>
</template>

<script>
export default {
  name: "exam",
  data() {
    return {
      username: "",
      password:""
    };
  },

  methods: {
    regClick() {
      var regu = /^[a-z0-9][3,12]$/i;
      var rega = /^[0-9]{2}$/;

      var u = this.username
      var p = this.password
      console.log(u + p);
      if (!regu.test(u)) {
        this.$messagebox("消息","用户名格式不正确,应该是3-12位")
        return; // 停止当前函数停止执行
      }

      if (!regu.test(p)) {
        this.$messagebox("消息","用户密码格式不正确,应该是3-12位")
        return; // 停止当前函数停止执行
      }
    }
  },
  created() {},
};
</script>

<style>
</style>

实际校验截图:

image.png

数组的拷贝

数组
使用扩展运算符（...）拷贝数组。

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];
使用 Array.from 方法，将类似数组的对象转为数组。

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);