vue的注册验证

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单验证</title>
    <script src="js/vue.js"></script>
    <style>
      .success {
        color: green !important;
      }

      .error {
        color: red;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="item">
        用户名<input v-model="username" @input="checkusername" />
        <span :class="usernameclass">{{usernametip}}</span>
      </div>
      <div class="item">
        密码<input v-model="userpwd" @input="checkuserpwd" />
        <span :class="userpwdclass" v-html="userpwdtip"></span>
      </div>
      <div class="item">
        手机号<input v-model="usertel" @input="checkusertel" />
        <span :class="usertelclass">{{userteltip}}</span>
      </div>
      <button @click="submit">验证</button>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        username: "",
        usernametip: "用户名的提示",
        usernamereg: /^[a-z_$][0-9a-z_$]{5,9}$/i,
        usernameclass: "error",

        userpwd: "",
        userpwdtip: "密码的提示",
        userpwdreg: /^[0-9a-z]{6,12}$/i,
        userpwdclass: "error",

        usertel: "",
        userteltip: "手机号的提示",
        usertelreg: /^1[3-9][0-9]{9}$/i,
        usertelclass: "error",
      },
      methods: {
        submit() {
          //所有的验证是否都通过
          if (
            this.usernameclass == "success" &&
            this.userpwdclass == "success" &&
            this.usertelclass == "success"
          ) {
            alert("验证通过");
          } else {
            alert("请检查红色的错误提示");
          }
        },

        checkusername() {
          //检查用户名
          //正则表达式的验证
          if (this.usernamereg.test(this.username)) {
            this.usernametip = "√";
            this.usernameclass = "success";
          } else {
            this.usernametip =
              "用户名只能数字字母_$组成并且不能以数字开头 长度6到10位";
            this.usernameclass = "error";
          }
        },
        checkusertel() {
          //检查手机号
          if (this.usertelreg.test(this.usertel)) {
            this.userteltip = "√";
            this.usertelclass = "success";
          } else {
            this.userteltip = "请输入常用的11位手机号";
            this.usertelclass = "error";
          }
        },

        checkuserpwd() {
          //验证密码
          //第一步  验证格式是否合法
          if (this.userpwdreg.test(this.userpwd)) {
            //  this.userpwdtip="√";
            //  this.userpwdclass="success";
            //这里都是格式合法的
            let numCount = /[0-9]/.test(this.userpwd); //测试出里面有数字结果就是true
            let lowerCount = /[a-z]/.test(this.userpwd); //测试是否有小写
            let uppwerCount = /[A-Z]/.test(this.userpwd); //测试是否有大写

            switch (
              numCount +
              lowerCount +
              uppwerCount //求三个的和
            ) {
              case 1:
                this.userpwdtip = `<button style="width:50px;">弱</button>`;
                break;
              case 2:
                this.userpwdtip = `<button style="width:100px;">中</button>`;
                break;
              case 3:
                this.userpwdtip = `<button style="width:150px;">强</button>`;
                break;
            }
            this.userpwdclass = "success";
          } else {
            this.userpwdtip = "密码只能数字字母组成长度6到12位";
            this.userpwdclass = "error";
          }
        },
      },
    });
  </script>
</html>
posted @ 2021-05-18 11:00  干饭吧  阅读(183)  评论(0)    收藏  举报