JQuery表单验证--输入框

JQuery的简洁易用使它在很多场合完全取代了Javascript，下面演示一下JQuery实现表单验证。

1. 基础版

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

1.1 基本结构

• HTML代码

  

    
    提交
  

• JQuery基本框架
  引入JQuery库之后，需要加上如下JQuery代码结构。

    // HTML DOM加载完成后执行JS代码
    $(function() {

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

1.2 验证处理

与Javascript的处理有所不同，JQuery获取元素的方式非常简洁。所以，在获取后通常直接添加事件。
(注意：JQuery获取的是JQuery对象，DOM获取是DOM对象，二者是有区别的，所以，属性和方法不能混用)

    $("#btn_submit").click(function() {
        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;
    });

注意一下Javascript与JQuery添加事件的区别

• 点击查看完整代码

2. 升级版

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

1. 把输入框的验证单独做成一个有名字的函数。

      // 输入框验证
      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;

      }

2. 把函数的名字分别赋给提交按钮的单击事件函数和输入框的键盘事件函数。

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

以上两步升级大功告成。

• 点击查看完整代码

友情提示
上面的两份代码代码使用对比工具对比，能够清晰看出二者差异。
可以与之前的Javascript代码对比，会发现与Javascript处理流程完全一样，只是对象属性方法不一样。

---

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