jquery ---表单验证

来源：互联网发布：婴儿毯子知乎编辑：程序博客网时间：2024/06/06 09:48

表单验证分为以下几个部分：

1）不为空

2）验证数字字段

3）验证电话号码

4）验证用户ID

5)验证日期

6）验证电子邮件地址

7）验证复选框 or 单选按钮是否被选中

8）验证select元素的选项是否被选中

9）把样式应用到选项和表单按钮

10）一步勾选或取消所有的复选框

11）验证两个字段

12）验证密码和确认密码字段是否匹配

13）急用某些字段

14）验证整个表单

16）表单数据序列化

一、验证不为空

$(document).ready(function(){
   $('.error').hide();
   $('.submit').click(function(event){
    //文本框的内容：
    var data = $('.infobox').val();
    var len = data.length;
    if(len<1){
     $('.error').show();
     event.preventDefault();//禁止自动提交form表单
    }else{
     $('.error').hide();
    }
   })
});

二、验证数字字段

$('.submit').click(function(event){
    //文本框的内容：
    var data = $('.agebox').val();
    var len = data.length;
    var c;
    for(var i=0;i<len;i++)
    {
            c = data.charAt(i).charCodeAt(0);//利用charCodeAt()方法查找其ASCII值
            //alert("c="+c)
            //如果字符的ASCII值小于数字0（ASCII值48）或大于数字9（ASCII值57）就意味着不是数字
           if(c<48 || c>57){
                 $('.ageerror').show();
                 event.preventDefault();
                 break;
            }
          else{
             $('.ageerror').hide();
           }
    }
   })
parseInt(String) --- 将字符串解析为int型

三、用正则表达式验证

1、验证电话号码

function validate_phoneno(ph){
     var pattern = new RegExp(/^[0-9+-]+$/); // 文本框可以输入数字、+、- 这种形式多次   ‘+‘--多次    ^开始 $结束
     return pattern.test(ph);
    }

2、验证userid

function validate_userid(ph){
     var pattern = new RegExp(/^[0-9a-z_]+$/);
     return pattern.test(ph);
    }

3、验证电子邮箱地址：

function validate_date(date){

var pattern = new RegEXP(/ ^[\w-]+(\.[\w-]+)*@([\w-]+\.) +[a-zA-Z]+$ /);

return pattern.test(date);

}

电子邮箱的正则表达式解释如下：

/^[\w-]+ 意味着电子邮件地址的开头可以是字母、数字、下划线或连字符。^表示开始。\w表示字母数字下划线。右方括号(])之后的+号表示一次或多次。

(\.[\w-]+)* 表示模式由. (半角句号)后跟1个或多个字母数字划线或连字符组成，*号表示0次或多次

([\w-]+\.)+ 字母、数字、下划线或连字符还有句点（.）可以出现一次或是多次

[a-zA-Z]+$ 定义电子邮件的末尾，即电子邮件地址必须以大写或是小写字母（可以出现一次或多次）结尾。 $表示结束

4、验证日期：

function validate_date(date){

var pattern = new RegEXP(/ \b\d{1,2}[\ /-] \ d{1,2}[\ / -]\d{4} \ b /);

return pattern.test(date);

}

日期的正则表达式解释（某月某日某年 02/23/2012）：

\b 在正则表达式的开头和结尾，表示单词边界，也就是说，单词必须与模式完全匹配

\d{1,2} 意味出现1到2两位数字

[\ / -] 意味着出现符号/ 或 -

\d{4}意味着正好出现4位数字

四、验证复选框是否选中：

$(document).ready(function(){
  $('.error').hide();
  $('.submit').click(function(event){
    var count = 0;
    var amt=0;
     $('form').find(':checkbox').each(function(){

            if($(this).is(':checked')) {
            count++;
          amt += parseInt($(this).val());
        }

          });
     alert('count='+count)
    if(count==0){
         $('.error').show();
      $('p.result').hide();
    }else{
         $('.error').hide();
       $('p.result').show();
       $('p.result').text('the total value of you selected is '+amt);
    }
    event.preventDefault();
  })

});

五、验证下拉列表框是否被选中

$count = $('select option:checked').val();

六、全选和反选

<form >
    <div class="infobox">
            <input type="checkbox" id="checkall" >Check/Uncheck all checkboxes
        </div><br/>
        <div class="infobox">
            <input type="checkbox" id="pizza" name="pizza" value=5 >Pizza $5
        </div>
         <div class="infobox">
            <input type="checkbox" id="hotdog" name="hotdog" value=2 >hotdog $2
        </div>
         <div class="infobox">
            <input type="checkbox" id="coke" name="coke" value=1 >coke $1
        </div>
         <div class="infobox">
            <input type="checkbox" id="fries" name="fries" value=3 >French Fries $3
        </div>
    </form>
</body>

七、密码和确认密码是否一致

</body>