jQuery表单验证

这一节介绍一下jQuery对表单元素的验证，表单验证是很重要也很常见的一块，几乎所有的系统网站都要用到，我们将使用jQuery强大的选择器和灵活的方法来完成这些功能。
需求是对用户注册模块进行输入合法性的验证，用户名：非空，6位以上；密码：非空，8位以上，数字字母组合；Email：合法的邮箱地址。这三个都是必须项目，用一个小红星来代表必须。可以使用append方法来追加，追加到当前的required项目的父元素parent下面。

  "formcheck" : function(){
    $(".required").each(function(){
      $(this).parent().append("<span class='mark'>*</span>");
    });
  }

当光标移出文本框时，需要及时判断输入是否合法，而不要等到提交时在验证，这样的话就要给三个表单入力元素添加失去焦点blur事件，及时出力的提示信息输入到当前元素的父元素的后面，也是用append实现：

  "formcheck" : function(){
    $("input.required").blur(function(){
      $(this).parent().find(".msg_add").remove();
      //Username
      if($(this).is("#username")){
        if($(this).val() == "" || $(this).val().length < 6){
          var errMsg = "Username is less than 6bytes!";
          $(this).parent().append("<span class='msg_add'>" + errMsg + "</span>");
        } else {
          var msg = "Username is right!";
          $(this).parent().append("<span class='msg_add'>" + msg + "</span>");
        }
      }
      //Password
      if($(this).is("#password")){
        if($(this).val() == "" || $(this).val().length < 8){
          var errMsg = "Password is less than 8bytes!";
          $(this).parent().append("<span class='msg_add'>" + errMsg + "</span>");
        } else if(($(this).val() != "" && !/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/.test($(this).val()))){
            var errMsg1 = "Password is must number and character!";
            $(this).parent().append("<span class='msg_add'>" + errMsg1 + "</span>");
	        } else {
	          var msg = "Password is right!";
	          $(this).parent().append("<span class='msg_add'>" + msg + "</span>");
	        }
      }
      //Email
      if($(this).is("#email")){
        if($(this).val() == "" || ($(this).val() != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($(this).val()))){
          var errMsg = "Email address is not rightful!";
          $(this).parent().append("<span class='msg_add'>" + errMsg + "</span>");
        } else {
          var msg = "Email is right!";
          $(this).parent().append("<span class='msg_add'>" + msg + "</span>");
        }
      }
    });
  }

这里用到了两个正则表达式，验证邮箱和密码的数字字母组合。
邮箱地址：/.+@.+\.[a-zA-Z]{2,4}$/
数字字母组合：/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/
当然我们还可以在用户输入的过程中就检查合法性，这就要求当按键松开时就检查，要绑定keyup事件，每次松开按键时触发，类似于一下的链式结构：blur().keyup(triggerHandler("blur")).focus(triggerHandler("blur"))，triggerHandler是触发元素的blur事件，但是不会触发浏览器的该事件，所以可以讲光标定位到元素上。
表单验证内容很丰富，这里只是举例说明，以后慢慢深入学习。