博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
jQuery攻略之表单验证
阅读量：5090 次
发布时间：2019-06-13

本文共 16316 字，大约阅读时间需要 54 分钟。

 

（每一段jQuery对应一段html代码，以标记为准则,css为共用代码，每段代码需独立运行。html和css代码在文章尾部，如下例）

 

                                               

 

 

确认必须字段不能为空（d1）val()取得选择器的值(以字符串的形式) 元素属性length event.preventDefault()防止提交表单到服务器

$(document).ready(function () {
       $('.lable').text("用户名 *");     $('.error').hide();     $('.submit-d1').click(function (event) {
   var data = $('.infobox').val(); var len = data.length; if (len < 1) {
               $('.error').text("用户名不能为空").show();             event.preventDefault();         } else {
               $('.error').hide();         }     }); });

 

验证数字字段（d1） data.charAt(i).charCodeAt(0)

例子1：只允许输入数字，但不能输入负数

$(document).ready(function () {
       $('.lable').text("输入数字 *");     $('.error').hide();     $('.submit-d1').click(function (event) {
   var data = $('.infobox').val(); var len = data.length; var c; for (var i=0; i < len; i++) {
               c = data.charAt(i).charCodeAt(0); if (c < 48 || c > 57) {
                   $('.error').text("只能输入数字").show();                 event.preventDefault(); break;             } else {
                   $('.error').hide();             }         }     }); });

例子2：只允许输入数字的同时亦可输入负数,小数

$(document).ready(function () {
       $('.lable').text("输入数字 *");     $('.error').hide();     $('.submit-d1').click(function (event) {
   var data = $('.infobox').val(); var len = data.length; var c; for (var i = 0; i < len; i++) {
               c = data.charAt(i).charCodeAt(0); if (c == 45 && i == 0) {
   continue;             } //判断负数             if (c == 46) {
   if (i != 0 && i != len - 1) {
   continue;                 } else {
                       $('.error').text("输入小数错误").show();                     event.preventDefault(); break;                 }             }//判断小数             if (c < 48 || c > 57) {
                   $('.error').text("只能输入数字").show();                 event.preventDefault(); break;             } else {
                   $('.error').hide();             }//判断数字         }     }); });

例子3：限定值的范围

$(document).ready(function () {
       $('.lable').text("年龄 *");     $('.error').hide();     $('.submit-d1').click(function (event) {
   var data = $('.infobox').val(); var len = data.length; var c; var age; var flag = 0; for (var i = 0; i < len; i++) {
               c = data.charAt(i).charCodeAt(0); if (c < 48 || c > 57) {
                   $('.error').text("只能输入数字").show();                 flag = 1;                 event.preventDefault(); break;             } else {
                   $('.error').hide();             }         } if (flag == 0) {
               age = parseInt(data); if (age < 5 || age > 99) {
                   $('.error').text("请输入年龄范围在5~99岁").show();                 event.preventDefault();             }         }     }); });

 

验证电话号码（d1）RegExp()可输入正则表达式或字符串 pattern.test()进行匹配，返回值为true或false

$(document).ready(function () {
       $('.lable').text("电话号码");     $('.ready').hide();     $('.submit-d1').click(function (event) {
   var data = $('.infobox').val(); if (validate_phoneno(data)) {
               $('.error').hide();         } else {
               $('.error').text("输入号码不符合格式").show();             event.preventDefault();         }     }); }); function validate_phoneno(ph) {
   var pattern=new RegExp(/^[0-9-+]+$/); return pattern.test(ph); }

 

验证用户ID（d1）

$(document).ready(function () {
       $('.lable').text("用户ID");     $('.ready').hide();     $('.submit-d1').click(function (event) {
   var data = $('.infobox').val(); if (validate_userid(data)) {
               $('.error').hide();         } else {
               $('.error').text("输入用户ID格式错误（只能包含字母,数字和下划线）").show();             event.preventDefault();         }     }); }); function validate_userid(userid) {
   var pattern = new RegExp(/^[a-zA-Z0-9_]/); return pattern.test(userid); }

 

验证日期格式（d1）“/\d{4}[\/-]\b\d{1,2}[\/-]\d{1,2}\b/”

$(document).ready(function () {
       $('.lable').text("日期");     $('.ready').hide();     $('.submit-d1').click(function (event) {
   var data = $('.infobox').val(); if (validate_date(data)) {
               $('.error').hide();         } else {
               $('.error').text("输入时间格式错误").show();             event.preventDefault();         }     }); }); function validate_date(date) {
   var pattern = new RegExp(/\d{4}[\/-]\b\d{1,2}[\/-]\d{1,2}\b/); return pattern.test(date); }

 

验证邮箱格式（d1）“/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/”

$(document).ready(function () {
       $('.lable').text("邮箱地址");     $('.ready').hide();     $('.submit-d1').click(function (event) {
   var data = $('.infobox').val(); if (validate_email(data)) {
               $('.error').hide();         } else {
               $('.error').text("输入邮箱格式错误").show();             event.preventDefault();         }     }); }); function validate_email(email) {
   var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/); return pattern.test(email); }

 

检测复选框是否被选中（d2）find()

例子1

$(document).ready(function () {
       $('.error').hide();     $('p.result').hide();     $('.submit-d2').click(function (event) {
   var count = 0; var amt = 0;         $('form').find(':checkbox').each(function () {
   if ($(this).is(':checked')) {
                   count++;                 amt = amt + parseInt($(this).val());             }         }); if (count == 0) {
               $('.error').text("复选框不能为0").show();             $('p.result').hide();         } else {
               $('.error').hide();             $('p.result').text("总金额为" + amt).show();         }         event.preventDefault();     }); });

例子2：利用length检测 $('input:checked').length

$(document).ready(function () {
       $('.error').hide();     $('p.result').hide();     $('.submit-d2').click(function (event) {
   var count = $('input:checked').length; var amt = 0; if (count == 0) {
               $('.error').text("复选框不能为0").show();             $('p.result').hide();         } else {
               $('form').find(':checkbox').each(function () {
   if ($(this).is(':checked')) {
                       count++;                     amt = amt + parseInt($(this).val());                 }             });             $('.error').hide();             $('p.result').text("总金额为" + amt).show();         }         event.preventDefault();     }); });

 

检测单选框是否选中（d3）

$(document).ready(function () {
       $('.error').hide();     $('p.result').hide();     $('.submit-d3').click(function (event) {
   var count = 0; var amt = 0;         $('form').find(':radio').each(function () {
   if ($(this).is(':checked')) {
                   count++;                 amt = amt + parseInt($(this).val());             }         }); if (count == 0) {
               $('.error').text("选项不能为0").show();             $('p.result').hide();         } else {
               $('.error').hide();             $('p.result').text("总金额为" + amt).show();         }         event.preventDefault();     }); });

 

下拉框选项（单选）（d4） select option:selected

$(document).ready(function () {
       $('.error').hide();     $('p.result').hide();     $('.submit-d4').click(function (event) {
   var count = $('select option:selected').val(); if (count == 0) {
               $('p.result').hide();             $('.error').text("选项不能为空").show();         } else {
               $('.error').hide();             $('p.result').text('你选中了' + $('select option:selected').text()).show();         }         event.preventDefault();     }); });

 

下拉框选项（多选）（d5）multiple

$(document).ready(function () {
       $('.error').hide();     $('p.result').hide();     $('.submit-d5').click(function (event) {
   var count = $('select option:selected').val(); if (count == 0) {
               $('p.result').hide();             $('.error').text("选项不能为空").show();         } else {
               $('.error').hide();             $('p.result').html('你选中了
     
      ' + $('select option:selected').text()+'
     ').show();         }         event.preventDefault();     }); });

 

样式添加到下拉框选项（d6）$('option:odd').addClass('meal-d6')

$(document).ready(function () {
       $('.error').hide();     $('option:odd').addClass('meal-d6');     $('p.result').hide();     $('.submit-d6').click(function (event) {
   var count = $('select option:selected').val(); if (count == 0) {
               $('p.result').hide();             $('.error').text("选项不能为空").show();         } else {
               $('.error').hide();             $('p.result').html('你选中了
     
      ' + $('select option:selected').text() + '
     ').show();         }         event.preventDefault();     }); });

 

表格图像按钮（d7）<input type="image"></input>

$(document).ready(function () {
       $('.error').hide();     $('option:odd').addClass('meal-d6');     $('p.result').hide();     $('.submit-d7').click(function (event) {
   var count = $('select option:selected').val(); if (count == 0) {
               $('p.result').hide();             $('.error').text("选项不能为空").show();         } else {
               $('.error').hide();             $('p.result').html('你选中了
     
      ' + $('select option:selected').text() + '
     ').show();         }         event.preventDefault();     }); });

 

选择或取消全部复选框（d8）filter(':gt(0)')创建索引

$(document).ready(function () {
       $('#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();         $('
').insertAfter('div:eq(3)');         $('p').text('总金额是' + amt);     }); });

 

通过blur()失焦验证两个文本框不能为空（d9） parent()返回亲元素

$(document).ready(function () {
       $('.error').hide();     $('.infobox-d9').each(function () {
           $(this).blur(function () {
   var data = $(this).val(); var len = data.length; if (len < 1) {
                   $(this).parent().find('.error').show();             } else {
                   $(this).parent().find('.error').hide();             }         });     }); });

 

通过按钮验证两个文本框不能为空（d9）

$(document).ready(function () {
       $('.error').hide();     $("").insertAfter('form');     $('input:button').click(function () {
           $('.infobox-d9').each(function () {
   var data = $(this).val(); var len = data.length; if (len < 1) {
                   $(this).parent().find('.error').show();             } else {
                   $(this).parent().find('.error').hide();             }         });     }); });

 

验证密码和确认密码字段是否匹配（d10）next(selector) nextAll(selectot) selector用于匹配指定的元素

$(document).ready(function () {
       $('.error').hide();     $('.submit-d10').click(function (event) {
   var 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();     }); });

 

完善注册信息（d10）attr('disabled', true)字段禁用 removeAttr('disabled')字段解禁

$(document).ready(function () {
       $('.password').attr('disabled', true);     $('.confpass').attr('disabled', true);     $('.error').hide();     $('.userID').blur(function () {
           userIDisNull();     });     $('.submit-d10').click(function (event) {
   var data = $('.password').val(); var len = data.length;         userIDisNull(); if (len < 1) {
               $('.password').next().show();         } else {
               $('.password').next().hide(); if ($('.password').val() != $('.confpass').val()) {
                   $('.confpass').next().show();             } else {
                   $('.confpass').next().hide();                 $('
').insertAfter('.submit-d10').text('成功');             }         }         event.preventDefault();     }); }); function userIDisNull() {
   var userID = $('.userID').val(); var len = userID.length; if (len < 1) {
           $('.userID').next().show();         $('.password').attr('disabled', true);         $('.confpass').attr('disabled', true);     } else {
           $('.userID').next().hide();         $('.password').removeAttr('disabled');         $('.confpass').removeAttr('disabled');     } }

 

完整版（d11）

$(document).ready(function () {
       $('.password').attr('disabled', true);     $('.confpass').attr('disabled', true);     $('.error').hide();     $('.userID').blur(function () {
           userIDisNull();     });     $('.submit-d11').click(function (event) {
   var data = $('.password').val(); var len = data.length;         userIDisNull(); if (len < 1) {
               $('.password').next().show();         } else {
               $('.password').next().hide(); if ($('.password').val() != $('.confpass').val()) {
                   $('.confpass').next().show();             } else {
                   $('.confpass').next().hide();                 $('
').insertAfter('.submit-d11').text('成功');             }         }         event.preventDefault();     }); }); function userIDisNull() {
   var userID = $('.userID').val(); var len = userID.length; if (len < 1) {
           $('.userID').next().show();         $('.password').attr('disabled', true);         $('.confpass').attr('disabled', true);     } else {
           $('.userID').next().hide();         $('.password').removeAttr('disabled');         $('.confpass').removeAttr('disabled');     } }

 

理解表单编码（d12）$('form').serialize()查询字符串形式对所有表单元素进行编码

$(document).ready(function () {
       $('.error').hide();     $('.submit-d12').click(function (event) {
   var info = $('form').serialize();         $('.message').text('编码如下：' + info);         event.preventDefault();     }); });

 

运用数组显示编码方式（d13）$('form').serializeArray()建立数组 d.value取数组的值d.name取数组的值

$(document).ready(function () {
       $('.error').hide();     $('.submit-d13').click(function (event) {
   var select = ""; var info = $('form').serializeArray();         $.each(info, function (i, d) {
               select = select + d.value + "";         });         $('.message').text('编码如下：' + select); return false;     }); });

 

html代码

<%--d1--%> 
     
 
      
 
         
        
        
      
 
       
     
 <%--d2--%> 
     
 
      iphone
      
 
      Lumia800
      
 
      htc
      
 
      
 
      
 
       
     
 <%--d3--%> 
     
 
      iphone
      
 
      Lumia800
      
 
      htc
      
 
      
 
      
 
       
     
 <%--d4--%> 
     
 
       
      
 
      
 
       
     
 <%--d5--%> 
     
 
       
      
 
      
 
       
     
 <%--d6--%> 
     
 
       
      
 
      
 
       
     
 <%--d7--%> 
     
 
      
      
 
      
 
      
 
       
     
 <%--d8--%> 
     
 
      
       选择/取消全部
      
 
      
       iphone
      
 
      
       Lumia800
      
 
      
       htc
      
 
     
 <%--d9--%> 
     
 
      
       用户ID*
       
       用户ID不能为空
      
 
      
       密码
       
       密码不能为空
      
 
     
 <%--d10--%> 
     
 
      
       用户ID*
       
       用户ID不能为空
      
 
      
       密码
       
       密码不能为空
      
 
      
       密码
       
       确认密码于密码不匹配
      
 
       
     
 <%--d11--%> 
     
 
      
 
       请输入个人信息 
       
        用户ID*
        
        用户ID不能为空
       
 
       
        密码
        
        密码不能为空
       
 
       
        密码
        
        确认密码于密码不匹配
       
 
      
 
       
     
 <%--d12--%> 
     
 
      
 
       请输入个人信息 
       
        用户ID*
        
        用户ID不能为空
       
 
       
        密码
        
        密码不能为空
       
 
       
        密码
        
        确认密码于密码不匹配
       
 
       iphone
       
 
       Lumia800
       
 
       htc
       
 
       
       
 
      
 
       
      
 
     
 <%--d13--%> 
     
 
      
 
       请输入个人信息 
       iphone
       
 
       Lumia800
       
 
       htc

 

css代码

/*d1*/ .labal{
    float:left; width:120px;} .infobox{
    width:150px;} .error{
    color:Red; padding-left:10px; } .submit-d1{
    margin-left:50px; margin-top:10px;} /*d6*/ .meal-d6{
    background:Blue; color:red;} /*d7*/ .submit-d7{
    margin:10px; width:50px; height:40px; } /*d11*/ fieldset{
    border:1px solid #888; width:400px;} legend{
    color:Blue; font-weight:bold;} .labal-d11{
    width:70px; float:left;}

 

 

 

转载于:https://www.cnblogs.com/suguoqiang/archive/2012/02/26/2369135.html

你可能感兴趣的文章
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-11-16 20:24:01   当前IP: 3.129.45.187   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我