jquery 校验是否今日 jquery验证

转载

误会一场 2024-02-05 03:39:47

文章标签 jquery 校验是否今日 ide 字段正则表达式 文章分类 jQuery 前端开发

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

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();

六、全选和反选

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript">
       $(document).ready(function(){
   
     //全选 or 反选
     $('#checkall').click(function(){
           
          $("input[type='checkbox']").attr('checked', $('#checkall').is(':checked'));       
    });
     
     $('form').find(':checkbox').click(function(){
               
           var amt=0;
     $('div').filter(':gt(0)').find(':checkbox').each(function(){
                     
       //if($('div:gt(0)')){
                if($(this).is(':checked'))
          {
           amt = amt +parseInt($(this).val()); 
          }
       //}
                     
     });
     $('p').remove();
     $('<p>').insertAfter('div:eq(4)');
     $('p').text('your bill is $'+amt);
     })
  })
  
 </script>
 <body> <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>

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

<script type="text/javascript">
       $(document).ready(function(){
     $('.error').hide();
     $('.submit').click(function(event){
      data = $('.password').val();          
      var len = data.length;
      if(len <1){
       $('.password').next().show();
      }else
      {
          $('.password').next().hide(); 
      }
      if($('.password').val() != $('.confpass').val())
      {
       $('.confpass').next().show();
      }
      else
      {
          $('.confpass').next().hide();
      }
      event.preventDefault();
    })
   
  })
  
 </script>
 <body>
  <form>
        <div>
             <span class="label" >User Id</span> <input type="text" class="userid" name="userid" />
        </div>
        <div>
          <span class="label" >Password</span> <input type="password" class="password" name="password" />
             <span class="error" > Password can not be blank1</span>
        </div>
        <div>
          <span class="label" >Confirm Password</span> <input type="password" class="confpass" name="confpass" />
             <span class="error" > Password and Confirm password don't match </span>
        </div>
        
        <input type="submit" class="submit" value="submit" />
     </form> </body>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。