Javascript表單驗(yàn)證--輸入框--基礎(chǔ)版代碼

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Javascript表單驗(yàn)證</title>
</head>

<body>

  <form action="#">
    <input id="txt_submit" type="text" name="test" placeholder="請輸入6~10個(gè)字符的中文"><span id="msg"></span>
    <button id="btn_submit" type="submit">提交</button>
  </form>

  <script>
    // HTML文檔加載完成后執(zhí)行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() {
        // 獲取文本內(nèi)容
        var strText = txt_submit.value;

        // 必填項(xiàng)驗(yàn)證
        if ("" == strText) {
          msg.innerHTML = "該輸入項(xiàng)不能為空";
          return false;
        }

        // 最小長度驗(yàn)證
        if (strText.length < 6) {
          msg.innerHTML = "輸入長度不能小于6";
          return false;
        }

        // 最大長度驗(yàn)證
        if (strText.length > 10) {
          msg.innerHTML = "輸入長度不能大于10";
          return false;
        }

        // 漢字驗(yàn)證
        if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
          msg.innerHTML = "必須輸入漢字";
          return false;
        }

        // 錯(cuò)誤信息清空   
        msg.innerHTML = "";
        return true;

      };

      // JS代碼到此為止  
    };

  </script>
</body>

</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容