JQuery表单验证--输入框--升级版代码

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>JQuery表单验证</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 src="js/jquery.js"></script>
  <script>
    // HTML DOM加载完成后执行JS代码
    $(function() {

      // 输入框验证
      function check() {
        var strText = $("#txt_submit").val();

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

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

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

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

        // 错误信息清空   
        $("#msg").html("");
        return true;

      }

      // 提交时验证
      $("#btn_submit").click(check);

      // 输入时验证
      $("#txt_submit").keyup(check);

      // JS代码到此为止 
    });

  </script>

</body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容