表单验证jQuery

作者: 红酒煮咖啡 | 来源:发表于2020-08-13 09:40 被阅读0次

工作中用到的前端框架插件
简介
jquery 插件
jQuery Validation Plugin - 表单验证
JQuery第三方插件---验证与瀑布流
javascript和Jquery的表单验证
表单验证
jQuery Validate验证
表单验证课堂笔记
jQuery表单验证

效果如图：

2020-08-13_093646.png

有错误信息的时候提交焦点会返回错误处，点击重置表单和提示信息都重置
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="../jquery-1.8.3.min.js"></script>
        <title></title>
        <style>
            form>p{
                font: 14px;
                color: #333;
                line-height: 30px;
            }
            span.default{
                color: #f00;
            }
            span.w{
                color: #f00;
                background: url(../img/reg3.gif) no-repeat left center;
                padding-left: 25px;
            }
            span.r{
                color: #0f0;
                background: url(../img/reg4.gif) no-repeat left center;
                padding-left: 25px;
            }
        </style>
    </head>
    <body>
        <form name="form1">
            <p>用户名：<input type="text" name="username" /><span id="namemsg" class="default">*</span><br></p>
            <p>手机号：<input type="text" name="tel" /><span id="telmsg" class="default">*</span><br></p>
            <p>邮箱：<input type="text" name="email" /><span class="default">*</span></p>
            <p><input type="submit" value="提交" name="sub" />
            <input type="reset" value="重置" name="rest"/></p>
        </form>
    </body>
    <script>
        $(function(){
            var rmsg="输入正确";
            $("input[name=username]").keyup(function(){
                var reg_name=/^\w{3,30}$/;
                if(reg_name.test($(this).val())){
                    $(this).next("span").html(rmsg).attr("class","r");
                }else{
                    $(this).next("span").html("请输入3-30位的字母数字名称").attr("class","w");
                }
            })
            
            $("input[name=tel]").keyup(function(){
                var reg_tel=/^(13|15|17|18|19)\d{9}$/;
                if(reg_tel.test($(this).val())){
                    $(this).next("span").html(rmsg).attr("class","r");
                }else{
                    $(this).next("span").html("请输入正确的手机号").attr("class","w");
                }
            })
            
            $("input[name=email]").keyup(function(){
                var reg_email=/^\w+@\w+(\.com|\.cn)$/;
                if(reg_email.test($(this).val())){
                    $(this).next("span").html(rmsg).attr("class","r");
                }else{
                    $(this).next("span").html("请输入正确的邮箱").attr("class","w");
                }
            })
            
            //提交验证
            $("form[name=form1]").submit(function(event){//js兼容性写法：e=e||window.event 
                if(!($("input[name=username]").next("span").hasClass("r"))){
                    $("input[name=username]").triggerHandler("keyup");
                    event.preventDefault();//同return false;
                }
                if(!($("input[name=tel]").next("span").hasClass("r"))){
                    $("input[name=tel]").triggerHandler("keyup");
                    return false;
                }
                if(!($("input[name=email]").next("span").hasClass("r"))){
                    $("input[name=email]").triggerHandler("keyup");
                    return false;
                }
            })
            
            //重置
            $("input[name=rest]").click(function(){
                $("input[name=username]").next("span").html("*").attr("class","default");
                $("input[name=tel]").next("span").html("*").attr("class","default");
                $("input[name=email]").next("span").html("*").attr("class","default");
            })
        })
    </script>
</html>