Javascript表单验证--输入框

表单验证是数据被送往服务器前对 HTML 表单中输入数据进行验证。

表单验证是前端Javascript重要功能之一。是网页中不可缺少的重要部分。输入框的表单验证是表单验证中的最重要部分。文本框、密码框、文本域这些控件的验证方式完全一致,下面以一个文本框作为例子,演示输入框的验证方式。

1. 基础版

单击提交按钮时进行验证,是最简单最直接的验证方式。下面是这种验证的实现方式。

1.1 基本结构

  • HTML代码
  <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>

没有真实提交的URL,暂时使用#代替。

表单三要素

  1. 表单form(必须指定属性action,必要时指定属性method)
  2. 输入input/select/textarea
  3. 提交按钮submit
  • JS基本框架
    Javascript必备结构
    // HTML文档加载完成后执行JS代码
    window.onload = function() {

    // JS代码到此为止  
    };

1.2 验证处理

  1. 获取相关的元素DOM对象
      // 获取输入框
      var txt_submit = document.getElementById("txt_submit");

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

      // 获取信息span
      var msg = document.getElementById("msg");
  1. 给提交按钮添加单击事件,并且在事件中验证输入框的值。
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;

      };

2. 升级版

现在很多验证不止在提交按钮时进行,在输入框输入时实时验证,我们把上面的版本升级一下。

  1. 把输入框的验证单独做成一个有名字的函数。
      // 输入框验证
      function check() {
        // 获取文本内容
        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;

      };
  1. 把函数的名字分别赋给提交按钮的单击事件和输入框的键盘事件。
      btn_submit.onclick = check;
      txt_submit.onkeyup = check;

以上两步升级大功告成。

友情提示
上面的两份代码代码使用对比工具对比,能够清晰看出二者差异。


如有任何疑问,欢迎下面留言

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

推荐阅读更多精彩内容