JQuery中一个简单的表单验证的实例

浏览数：28 / 时间：2015年06月09日

html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  
  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
     //<![CDATA[
     $(function(){
        //如果是必填的，则加红星标识
        $("form :input.required").each(function(){
           var $required = $("<strong class=‘high‘> *</strong>"); //创建元素
           $(this).parent().append($required); //然后将它追加到文档中
        });
        //文本框失去焦点后
        $(‘form :input‘).blur(function(){
           var $parent = $(this).parent();
           $parent.find(".formtips").remove();
           //验证用户名
           if($(this).is(‘#username‘)){
             if(this.value=="" || this.value.length < 6){
                var errorMsg = ‘请输入至少6位的用户名.‘;
                $parent.append(‘<span class="formtips onError">‘+errorMsg+‘</span>‘);
             }else{
                var okMsg = ‘输入正确.‘;
                $parent.append(‘<span class="formtips onSuccess">‘+okMsg+‘</span>‘);
             }
           }
           //验证邮件
           if($(this).is(‘#email‘)){
              if(this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)){
                  var errorMsg = ‘请输入正确的E-Mail地址.‘;
                  $parent.append(‘<span class="formtips onError">‘+errorMsg+‘</span>‘);
              }else{
                  var okMsg = ‘输入正确.‘;
                  $parent.append(‘<span class="formtips onSuccess">‘+okMsg+‘</span>‘);
              }
            }
      }).keyup(function(){
          $(this).triggerHandler("blur");
      }).focus(function(){
          $(this).triggerHandler("blur");
   });//end blur

  //提交，最终验证
  $(‘#send‘).click(function(){
    $("form :input.required").trigger(‘blur‘);
    var numError = $(‘form .onError‘).length;
    if(numError){
       return false;
    }
    alert("注册成功,密码已发到你的邮箱,请查收.");
   });