在输入框中输入用户名和密码当鼠标失去焦点时检测用户名长度至少6位, 且只能为数字和字母；检测密码长度至少8位 给登录按钮添加点击事件: 点击后弹出用户名和密码

如下图, 在输入框中输入用户名和密码,

当鼠标失去焦点时: 检测用户名长度至少6位, 且只能为数字和字母;

检测密码长度至少8位

给登录按钮添加点击事件: 点击后弹出用户名和密码

 

 

 html/css代码:

<style>
    #msg{
      height: 30px;
      line-height: 30px;
    }
</style>
<form>
    <p>
    <div id="msg"></div>
    </p>
    <p>
      <input name="uname" placeholder="用户名" />
    </p>
    <p>
      <input name="upwd" placeholder="密码" />
    </p>
    <p>
      <button>登录</button>
    </p>
</form>

script代码:

var userFlag = false; //用户名默认是没有通过
    var pwdFlag = false; //密码没有通过校验
    var oForm = document.forms[0];
    var oMsg = document.querySelector("#msg");
    // 当鼠标失去焦点时: 检测用户名长度至少6位, 且只能为数字和字母;
    oForm.uname.onblur = function () {
      oMsg.innerHTML = ""
      var str = this.value.trim();
      if (!(str.length >= 6)) {
        userFlag = false;
        oMsg.innerHTML = "检测用户名长度至少6位"
        return;
      }
      for (var i = 0; i < str.length; i++) {
        if (!(str[i] >= 0 && str[i] <= 9
          || str[i] >= 'a' && str[i] <= 'z'
          || str[i] >= 'A' && str[i] <= 'Z')) {
          userFlag = false;
          oMsg.innerHTML = "只能为数字和字母"
          return;
        }
      }
      userFlag = true;
    }


    //检测密码长度至少8位
    oForm.upwd.onblur = function () {
      oMsg.innerHTML = ""
      var str = this.value.trim();
      if (!(str.length >= 8)) {
        pwdFlag = false;
        oMsg.innerHTML = "检测密码长度至少8位"
        return;
      }
      pwdFlag = true;

    }

    oForm.onsubmit = function () {
      if (userFlag && pwdFlag) {
        alert("登录成功!")
      } else {
        alert("用户名或密码不合法")
      }
      return false;
    }