利用Jquery实现一个典型的form表单前端验证

最新推荐文章于 2024-06-29 14:47:07 发布

bboyjoe

最新推荐文章于 2024-06-29 14:47:07 发布

阅读量7.3k

点赞数 3

分类专栏： jQuery 文章标签： jquery 表单

本文链接：https://blog.csdn.net/bboyjoe/article/details/51813645

版权

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

前端验证有各种插件，也有各种实现方式，可谓八仙过海，各显神通，几乎看到的每个人的验证方式都有所区别，本例仅作示例，做到html、css、js的解耦合，又兼顾移开光标就显示错误信息的用户体验。

注：本例为form形式的表单提交，为更方便观察传递的input值，使用了get方式提交，实际应用中为了安全，最好用post提交的方式。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>注册表单</title>
    <style>
        table{
            border:1px solid #6699cc;
            width:600px;
            margin:0 auto;
            border-collapse: collapse;
            font-family:'微软雅黑';
        }
        th,td{
            border:1px solid #6699cc;
            padding:10px;
        }
        th{
            background-color: #090;
        }
        td{
            background-color: #0f9;
        }
        #repswSpan{
            margin-left:150px;
        }
        .error-info{
            color:#f00;
            display: none;
        }
        .focus{
            border:2px solid #6699cc;
        }
        .normal{
            border:1px solid #999;
        }
        .errror{
            border:2px solid #f00;
        }
        .submit-btn{
            display: inline-block;
            color:#fff;
            background-color: #6699cc;
            width:100px;
            height: 25px;
            line-height: 25px;
            font-size:15px;
            font-weight: 600;
            text-align: center;
            border:none;
        }
    </style>
</head>
<body>
<form action="http://www.baidu.com" method="get" id="registerForm">
    <table>
        <tr>
            <th>注册表单</th>
        </tr>
        <tr>
            <td>
                <div>用户名</div>
                <div><input type="text" name="user"/></div>
                <div class="error-info J_user_error_info">用户名错误，请按要求输入</div>
                <div>用户名必须是3-5位，由字母(a-z),数字(0-9),下划线(_)组成</div>
            </td>
        </tr>
        <tr>
            <td>
                <div><span>密码</span><span id="repswSpan">确认密码</span> </div>
                <div>
                    <input type="password" name="psw"/>
                    <input type="password" name="repsw"/>
                </div>
                <div class="error-info J_error_psw_info">密码格式错误，请按要求输入</div>
                <div class="error-info J_error_repsw_info">两次密码输入不一致</div>
                <div>密码必须是6-12位，由字母(a-z),数字(0-9)组成</div>
            </td>
        </tr>
        <tr>
            <td>
                <div>邮件地址</div>
                <div><input type="text" name="mail"/></div>
                <div class="error-info J_error_mail_info">邮箱地址错误，请按要求填写</div>
            </td>
        </tr>
        <tr>
            <th><input type="submit" class="submit-btn" value="提交数据"/></th>
        </tr>
    </table>
</form>
<script type="text/javascript" src="../jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function(){
        var $inputEle=$("input[name]");
        //页面加载时的input正常效果
        $inputEle.addClass('normal');
        //input元素获取焦点效果
        function inputColor(input){
            input.on('focus',function(e){
                $(this).addClass('focus');
            })
        }
        //将含有name属性的input元素添加获取焦点效果
        inputColor($inputEle);
        //校验各输入框的公有方法
        function checkVal(flag,$input,$errorInfo){
            if(!flag){
                $input.addClass('error');
                $errorInfo.show();
                return false;
            }
            $input.addClass('normal');
            $errorInfo.hide();
            return true;
        }
        var regUser=/^\w{3,5}$/,
            regPsw=/^[a-z0-9]{6,12}$/i,
            regMail=/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
        var $userErrorInfo=$('.J_user_error_info'),
            $pswErrorInfo=$('.J_error_psw_info'),
            $repswErrorInfo=$('.J_error_repsw_info'),
            $mailErrorInfo=$('.J_error_mail_info');
        var $user=$("input[name='user']"),
            $psw=$("input[name='psw']"),
            $repsw=$("input[name='repsw']"),
            $mail=$("input[name='mail']"),
            $submitBtn=$("input[type='submit']");
        //校验用户名
        $user.on('blur',function(e){
            var userFlag=regUser.test($(this).val());
            return checkVal(userFlag,$(this),$userErrorInfo);
        });
        //校验密码
        $psw.on('blur',function(e){
            var pswFlag=regPsw.test($(this).val());
            checkVal(pswFlag,$(this),$pswErrorInfo);
        });
        //校验确认密码
        $repsw.on('blur',function(e){
            var repswVal=$(this).val(),
                pswVal=$psw.val();
            var repswFlag=(repswVal===pswVal);
            checkVal(repswFlag,$(this),$repswErrorInfo);
        });
        //校验邮箱
        $mail.on('blur',function(e){
            var mailFlag=regMail.test($(this).val());
            checkVal(mailFlag,$(this),$mailErrorInfo);
        });
        //点击提交按钮
        $submitBtn.on('click',function(e){
            var userFlag=regUser.test($user.val()),
                pswFlag=regPsw.test($psw.val()),
                repswFlag=($repsw.val()===$psw.val()),
                mailFlag=regMail.test($mail.val());
            var checkUserResult=checkVal(userFlag,$user,$userErrorInfo),
                checkPswResult=checkVal(pswFlag,$psw,$pswErrorInfo),
                checkRepswResult=checkVal(repswFlag,$repsw,$repswErrorInfo),
                checkMailResult=checkVal(mailFlag,$mail,$mailErrorInfo);
            if(checkUserResult && checkPswResult && checkRepswResult && checkMailResult){
                $('#registerForm').submit();
            }else{
                e.preventDefault();
            }
        });

    });
</script>

</body>
</html>

bboyjoe

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
利用Jquery实现一个典型的form表单前端验证

前端验证有各种插件，也有各种实现方式，可谓八仙过海，各显神通，几乎看到的每个人的验证方式都有所区别，本例仅作示例，做到html、css、js的解耦合，又兼顾移开光标就显示错误信息的用户体验。注：本例为form形式的表单提交，为更方便观察传递的input值，使用了get方式提交，实际应用中为了安全，最好用post提交的方式。注册表单 tabl
复制链接

扫一扫

专栏目录