Javascript表单验证--输入框--基础版代码

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Javascript表单验证</title>
</head>

<body>

  <form action="#">
    <input id="txt_submit" type="text" name="test" placeholder="请输入6~10个字符的中文"><span id="msg"></span>
    <button id="btn_submit" type="submit">提交</button>
  </form>

  <script>
    // HTML文档加载完成后执行JS代码
    window.onload = function() {
      // 获取输入框
      var txt_submit = document.getElementById("txt_submit");

      // 获取提交按钮
      var btn_submit = document.getElementById("btn_submit");

      // 获取信息span
      var msg = document.getElementById("msg");

      btn_submit.onclick = function() {
        // 获取文本内容
        var strText = txt_submit.value;

        // 必填项验证
        if ("" == strText) {
          msg.innerHTML = "该输入项不能为空";
          return false;
        }

        // 最小长度验证
        if (strText.length < 6) {
          msg.innerHTML = "输入长度不能小于6";
          return false;
        }

        // 最大长度验证
        if (strText.length > 10) {
          msg.innerHTML = "输入长度不能大于10";
          return false;
        }

        // 汉字验证
        if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
          msg.innerHTML = "必须输入汉字";
          return false;
        }

        // 错误信息清空   
        msg.innerHTML = "";
        return true;

      };

      // JS代码到此为止  
    };

  </script>
</body>

</html>
Javascript表单验证--输入框--基础版代码

推荐阅读更多精彩内容
