您好,欢迎来到北京美业网! 北京网站建设咨询热线:13521800010
技术交流
您当前位置:美业网 >> 最新资讯 >> 技术交流 >> 浏览文章

【实例】实现jquery表单验证

时间:2017/4/13 10:16:58     信息来源:http://www.jswzjs.com     点击:
jQuery简单的表单验证
【实例】实现jquery表单验证

做网站的时候经常会使用jquery表单验证,比如在登录账号需要验证账号密码或者手机号等,留言表单需要手机、邮箱验证格式。下面美业网就用一个实例简单介绍一下如何使用jquery验证表单。

思路大概是这样,
1.点击输入框触发验证事件并提示错误。
2.验证姓名,如果姓名为空或者姓名不是2到4位汉字(正则表达式验证),则提示错误。
3.验证电话,如果手机号码为空或者手机号码格式错误(正则表达式验证),则提示错误。
4.最后如果姓名和手机号码都验证成功,则显示提示窗口。
下面贴上代码供大家参考,注释都很详细,希望大家能看得懂。

HTML部分

<form method="post" action="">
    <input name="lytext" type="hidden" id="lytext" value="" />
    <div class="formItem">
        <input name="name" type="text" id="name" class="userName" placeholder="姓名">
        <span class="error-tag"></span>
    </div>
    <div class="formItem">
        <input name="mycall" type="text" id="mycall" class="userPhoneNumber" maxlength="11" placeholder="手机号">
        <span class="error-tag"></span>
    </div>
    <input type="submit" name="Submit3" value="立即预约" id="immediate"/>
</form>


jQuery部分

  var immediate = '<div class="common-pop">'+                   //定义一个变量immediate
                       '<div class="pop-con">'+
                        '<h3>提示</h3>'+
                        '<p class="txt">提交成功我们尽快会联系您!</p>'+
                        '<a href="javascript:" class="know-btn">知道了</a>'+
                        '<a href="javascript:" class="pop-close"></a>'+
                        '</div>'+'</div>';
        $(immediate).appendTo($('.club-appointment'));          //把变量添加到类为club-appointment的标签里

$('.userName').on({                                            
            "blur":function(){username();},                     //鼠标点击姓名框触发验证姓名的函数事件
            "focus":function(){$('.userName').siblings('span').text("");} //将错误信息添加到错误提示框
        });
$(".userPhoneNumber").on({
            "blur":function(){phonenumber();},                  //鼠标点击手机号框触发验证手机号的函数事件
            "focus":function(){$('.userPhoneNumber').siblings('span').text("");}//将错误信息添加到错误提示框
        });

        function username(){
            var username=$('.userName').val();                  //获取用户提交的姓名
            var testUsername = /^[\u4e00-\u9fa5]{2,4}$/i.test(username);  //正则表达式验证姓名为2-4位数汉字               
            if(username==""){                                    //判断姓名是否为空
                 $('.userName').siblings('span').text('*姓名不能为空'); //如果姓名为空则提示错误
                return false;
            }else if (!testUsername) {          
               $('.userName').siblings('span').text('*姓名输入有误');//如果姓名格式不符合则提示错误
                return false;
            }else{
                return true;
            }
        }

        function phonenumber(){
            var phonenumber=$('.userPhoneNumber').val();       //获取用户提交的手机号
            var testPhonenumber=/^1[3-578]\d{9}$/.test(phonenumber);  //正则表达式验证手机号格式   
            if(phonenumber==""){
                $('.userPhoneNumber').siblings('span').text('*手机号不能为空'); //如果手机号为空则提示错误
                return false;
            }else if (!testPhonenumber) {           
               $('.userPhoneNumber').siblings('span').text('*手机号输入有误');  //如果手机号不符合则提示错误
                return false;
            } else{
                return true;
            }
        }

        $('#immediate').click(function(){     //点击提交按钮,如果验证成功,则显示提示提交成功窗口
            if(username() && phonenumber()){
            $('.common-pop').show();
            }else{
             return false;
            }    
       })
       $('.pop-close,.know-btn').click(function(){     //关闭提示窗口
            $('.common-pop').hide();
            $('.userName').val('');
            $('.userPhoneNumber').val('');
       })
本文由北京网站建设北京网站建设公司、美业网收集整理发布,如有转载请注明出处。
北京网站建设公司_北京网站设计公司