简单表单验证

迷南。 2021-07-04 17:14 470阅读 0赞

## 简单的表单验证 ##

index.js

$(document).ready(function() { 
        var check = { 
            regs: { 
                name: /\b(^['A-Za-z0-9]{4,20}$)\b/,
                phone: /^1[3,4,5,6,7,8,9]{1}[0-9]{9}$/,
                activecode: /^[\u4E00-\u9FA5A-Za-z0-9]{6,20}$/,
                captcha: /^\d{6}$/
            },
            wait: 40,
            get: { 
                name: $("input[name='name']"),
                cphone: $("input[name='cphone']"),
                activecode: $("input[name='active-code']"),
                captcha: $("input[name='captcha']")
            },
            checkblur: function(obj, reg, msg, msg2) { 
                if ($(obj).val() == '') { 
                    $(obj).siblings().addClass("show");
                    $(obj).siblings().text(msg);
                    $(obj).removeClass("border-green");
                    $(obj).addClass("border-red");
                } else if (!reg.test($(obj).val())) { 
                    $(obj).siblings().addClass("show");
                    $(obj).siblings().text(msg2);
                    $(obj).removeClass("border-green");
                    $(obj).addClass("border-red");
                } else { 
                    $(obj).removeClass("border-green");
                }
            },
            checkfoucs: function(obj, reg) { 
                $(obj).siblings().removeClass("show");
                $(obj).removeClass("border-red");
                if (reg.test($(obj).val())) { 
                    $(obj).addClass("border-green");
                } else { 
                    $(obj).removeClass("border-green");
                }
            },
            checksubmit: function(id, reg, msg, msg2) { 
                if ($("input[name='" + id + "']").val() == '') { 
                    $("input[name='" + id + "']").siblings().addClass("show");
                    $("input[name='" + id + "']").siblings().text(msg);
                    $("input[name='" + id + "']").addClass("border-red");
                    return;
                }
                if (!reg.test($("input[name='" + id + "']").val())) { 
                    $("input[name='" + id + "']").siblings().addClass("show");
                    $("input[name='" + id + "']").siblings().text(msg2);
                    $("input[name='" + id + "']").addClass("border-red");
                    return;
                }
    
            },
            timer: function(obj) { 
                if (check.wait == 0) { 
                    obj.removeAttribute("disabled");
                    obj.value = "获取验证码";
                    check.wait = 40;
                } else { 
                    obj.setAttribute("disabled", true);
                    obj.value = "重新发送 " + check.wait + "S";
                    check.wait--;
                    setTimeout(function() { 
                        check.timer(obj);
                    },
                    1000)
                }
            }
        }
        // Check if the form loses focus
        $("input:not('[type='button']')").on("blur",
        function() { 
            switch ($(this).attr("name")) { 
            case "name":
                check.checkblur(this, check.regs.name, "姓名不能为空", "请输入正确名字");
                break;
            case "cphone":
                check.checkblur(this, check.regs.phone, "手机不能为空", "请输入正确手机号");
                break;
            case "active-code":
                check.checkblur(this, check.regs.activecode, "激活码不能为空", "请输入正确激活码");
                break;
            case "captcha":
                check.checkblur(this, check.regs.captcha, "验证码不能为空", "请输入正确验证码");
                break;
    
            }
        });
        // Check if the form gets focus
        $("input:not('[type='button']')").on("focus",
        function() { 
            switch ($(this).attr("name")) { 
            case "name":
                check.checkfoucs(this, check.regs.name);
                break;
            case "cphone":
                check.checkfoucs(this, check.regs.phone);
                break;
            case "active-code":
                check.checkfoucs(this, check.regs.activecode);
                break;
            case "captcha":
                check.checkfoucs(this, check.regs.captcha);
                break;
            }
        });
    
        // Check when the form submit
        $(".form-submit").click(function() { 
            if (check.regs.name.test(check.get.name.val()) && check.regs.phone.test(check.get.cphone.val()) && check.regs.activecode.test(check.get.activecode.val()) && check.regs.captcha.test(check.get.captcha.val())) { 
                $(this).attr("value", "");
                $(".loading").css("display", "block");
                setTimeout(function() { 
                    window.location.href = "https://www.baidu.com";
                },
                2000);
    
            } else { 
                check.checksubmit("name", check.regs.name, "姓名不能为空", "请输入正确名字");
                check.checksubmit("cphone", check.regs.phone, "手机不能为空", "请输入正确手机号");
                check.checksubmit("active-code", check.regs.activecode, "激活码不能为空", "请输入正确激活码");
                check.checksubmit("captcha", check.regs.captcha, "验证码不能为空", "请输入正确验证码");
    
            }
        });
        // Check when obtaining the verification code
        $(".captcha-btn").click(function() { 
            if (check.get.cphone.val() != '' && check.regs.phone.test(check.get.cphone.val()) && check.get.activecode.val() != '' && check.regs.activecode.test(check.get.activecode.val())) { 
                check.timer(this);
            } else { 
                check.checksubmit("cphone", check.regs.phone, "手机不能为空", "请输入正确手机号");
                check.checksubmit("active-code", check.regs.activecode, "激活码不能为空", "请输入正确激活码");
            }
        });
        // dialog alert
        $(".dialog-alert-del").on("click",
        function() { 
            $(".dialog-alert").css("display", "none");
        });
    });

index.html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="tutorabc-form">
            <div class="form-wrap">
                
                <div class="form-card">
                    <form>
                        <div class="form-items">
                            <div class="item">
                                <input name="name" type="text" placeholder="姓名">
                                <p class="error-msg"></p>
                            </div>
                            <div class="item">
                                <input name="cphone" type="text" placeholder="手机">
                                <p class="error-msg"></p>
                            </div>
                            <div class="item">
                                <input name="active-code" type="text" placeholder="激活码">
                                <p class="error-msg"></p>
                            </div>
                            <div class="item item-captcha">
                                <div class="item-captcha-text">
                                    <input name="captcha" type="text" placeholder="验证码">
                                    <p class="error-msg captcha-error"></p>
                                </div>
                                <div class="item-captcha-btn">
                                    <input name="captcha-btn" class="btn captcha-btn" type="button" value="发送验证码">
                                </div>
                            </div>
                            <div class="item">
                                <input name="submit" class="btn form-submit" type="button" value="提交">
                                <div class="loading">
                                    <img src="./img/loading.gif" alt="">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                
                
                <div class="dialog-alert">
                    <div class="dialog-alert-bg"></div>
                    <div class="dialog-alert-wrap">
                        <div class="dialog-alert-top">
                            <p>提示</p>
                            <span class="dialog-alert-del" title="关闭"></span>
                        </div>
                        <div class="dialog-alert-content">
                            <p>
                                您的信息有错
                            </p>
                        </div>
                        <div class="dialog-alert-bottom">
                            <div class="dialog-alert-del alert-bottom-btn">确定</div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/index.js"></script>
    </body>
    
    </html>

style.css

body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, hr, input, li, ol, p, td, textarea, th, ul { 
        margin: 0;
        padding: 0;
    }
    
    ul { 
        list-style-type: none;
    }
    
    a { 
        text-decoration: none;
    }
    
    ::-webkit-input-placeholder { 
        color: #999;
    }
    
    .error-msg { 
        display: none;
        position: absolute;
        top: 24%;
        right: 12px;
        color: #f74c4c;
        font-size: 14px;
        text-align: right;
    }
    
    .captcha-error { 
        right: 110px;
    }
    
    .show { 
        display: block;
    }
    
    .form-wrap { 
        max-width: 1000px;
        margin: 0 auto;
    }
    
    .form-card { 
        display: inline-block;
        padding: 50px;
        border-radius: 4px;
        background-color: #fff;
        -webkit-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .2);
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .2);
    }
    
    .form-item { 
        width: 240px
    }
    
    .form-items .item { 
        width: 100%;
        margin-bottom: 30px;
        position: relative;
    }
    
    .form-items .item:nth-child(4) { 
        position: relative;
    }
    
    .form-items input { 
        box-sizing: border-box;
        padding: 12px 0 12px 10px;
        background: #fff;
        border: 1px solid #dcdcdc;
        width: 100%;
        border-radius: 5px;
        color: #484848;
        outline: none;
    
    }
    
    .form-items input.border-red { 
        border: 1px solid #f74c4c;
    }
    
    .form-items input.border-green { 
        border: 1px solid green;
    }
    
    .form-items .item-captcha { 
        font-size: 0;
    }
    
    .form-items .item-captcha .item-captcha-text { 
        display: inline-block;
        font-size: 14px;
        width: 60%;
        margin-right: 5%;
    }
    
    .form-items .item-captcha .item-captcha-btn { 
        display: inline-block;
        font-size: 14px;
        width: 35%;
    
    }
    
    .form-items input.btn { 
        padding: 12px 0 12px 0;
        background: #f74c4c;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .form-items .item-captcha-btn .captcha-btn { 
        width: 90px;
    }
    
    .form-items input.btn:hover { 
        background: #f11313;
    }
    
    .form-items .loading { 
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
        margin-left: -14px;
        width: 28px;
    }
    
    .form-items .loading img { 
        width: 100%;
    }
    
    .tutorabc-form .dialog-alert { 
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
    }
    .tutorabc-form .dialog-alert-bg{ 
        width: 100%;
        height: 100%;
        background: #000;
        filter: alpha(opacity=50);
        opacity: .5;
    }
    .tutorabc-form .dialog-alert-wrap{ 
        max-width: 580px;
        position: absolute;
        left: 50%;
        top: 15%;
        margin-left: -290px;
        background: #fff;
        border-radius: 5px;
        width: 100%;
    }
    .tutorabc-form .dialog-alert-top{ 
        position: relative;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #EDEDED;
        padding-left: 30px;
    }
    .tutorabc-form .dialog-alert-top p{ 
        color: #444;
        font-size: 16px;
    }
    .tutorabc-form .dialog-alert-top .dialog-alert-del{ 
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        width: 40px;
        height: 40px;
        background: url("../img/tiny-delete.png") no-repeat center center;
    }
    .tutorabc-form .dialog-alert-content{ 
        box-sizing: border-box;
        width: 100%;
        padding: 20px 30px 40px 50px;
        border-bottom: 1px solid #EDEDED;
    }
    .tutorabc-form .dialog-alert-bottom{ 
        box-sizing: border-box;
        padding: 36px 0;
        background: #fafafa;          
        position: relative;
        width: 100%;
    }
    .tutorabc-form .dialog-alert-bottom .alert-bottom-btn{ 
        position: absolute;
        right: 30px;
        top: 50%;
        margin-top: -18px;
        width: 70px;
        height: 36px;
        line-height: 37px;
        background-color: #F34D37;
        text-align: center;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
    }

如图:  
![在这里插入图片描述][20200310232916688.png]![在这里插入图片描述][20200310233103431.png]

--------------------

## 简单表单字符验证 ##

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>task29</title>
    </head>
    <body>
    	<div id="content">
    		<label>名称 <input id="txt" type="text" autofocus="autofocus" /></label>
    		<input type="button" id="submit" value="验证">
    	</div>
    	<p id="mes">必填，长度为4~16个字符</p>
    </body>
    </html>

--------------------

## 表单简单验证 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单内容</title>
        <style> .wrong{ background:#fff; font-weight:bold; border:1px solid red; } .right{ background:#fff; font-weight:bold; border:1px solid forestgreen; } .smallMsg{ font-size:12px; } </style>
        <script src="formValidate.js"></script>
    </head>
    <body>
    <form action="yanzheng.html" method="post">
        请输入你的邮箱：<input type="text" id="email" name="email" value="">
        <span id="emailMsg" class="smallMsg"></span><br>
        <button type="submit">显示邮箱地址</button>
        <br>
        请输入你的密码：<input type="password" name="pwd" id="pwd" value="">
        <span id="pwdMsg" class="smallMsg"></span><br>
        确认密码：<input type="password" name="conf" id="conf" value="">
        <span id="confMsg" class="smallMsg"></span><br>
        
        请选择你最喜欢的运动：
        <input type="radio" name="sport" id="sport1" value="网球">网球 
        <input type="radio" name="sport" id="sport2" value="羽毛球">羽毛球 
        <input type="radio" name="sport" id="sport3" value="足球">足球<br>
        <button type="submit" name="sportButton" id="sport">显示所选运动</button>
        <br>
    
        
        请选择你的课程：
        <input type="checkbox" value="语文" name="course">语文 
        <input type="checkbox" value="数学" name="course">数学 
        <input type="checkbox" value="英语" name="course">英语 
        <input type="checkbox" value="物理" name="course">物理<br>
        <input type="checkbox" value="全选" name="courseAll" id="courseAll"> 全选
        <button type="submit" name="manyCheck" id="course">显示所选课程</button>
        <br>
        
        你的家乡：<select name="city" id="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="沈阳">沈阳</option>
    </select><br>
    
        
        描述：<textarea id="note" name="note" cols="50" rows="10">hello!</textarea><br>
        <span id="noteMsg" class="smallMsg"></span><br>
        <button type="submit" name="textArea" id="textArea">保存</button>
        <br>
        
        <a href="xxx" onclick="return deleteConfirm()">删除邮件</a><br>
        
        <a href="888" onclick="return usePrompt()">提示</a>
    
        
        <select id="url" name="url" onchange="go(this.value)">
            <option >===请选择要显示的页面===</option>
            <option value="yanzheng.html">SHOW</option>
            <option value="http://www.baidu.com">BAIDU</option>
        </select>
    </form>
    </body>
    </html>

formValidate.js

// var valueForm = document.getElementById("username");
    // alert("内容：" + valueForm.value); 获得表单内容
    //验证表单，用正则，需要开始和结束标记 /^正则$/.test(要检测的数据)
    
    window.onload = function(){ 
        document.getElementById("pwd").addEventListener("blur",validatePwd,false);
        document.getElementById("conf").addEventListener("blur",validateConf,false);
        document.getElementById("email").addEventListener("blur",validateE,false);
        document.getElementById("sport").addEventListener("click",paraSingle,false);
        document.getElementById("course").addEventListener("click",paraManyCheck,false);
        document.getElementById("courseAll").addEventListener("click",paraSelectAllCheck,false);
        document.getElementById("city").addEventListener("change",paraSelectBox,false);
        document.getElementById("note").addEventListener("keypress",paraTextArea,false);
        document.getElementById("note").addEventListener("keydown",paraTextArea,false);
    };
    //验证邮箱格式
    function validateEmail(objName){ 
        var objElement = document.getElementById(objName);
        var msgElement = document.getElementById(objName + "Msg");
        if(/^\w+@\w+\.\w+$/.test(objElement.value)){ 
            objElement.className = "right";
            msgElement.innerHTML = "邮箱输入正确！";
            msgElement.style.color = "green";
            return true;
        }else{ 
            objElement.className = "wrong";
            msgElement.innerHTML = "邮箱格式错误！";
            msgElement.style.color = "red";
            return false;
        }
    }
    function validateE(){ 
        return validateEmail("email");
    }
    //密码和确认密码是否一致
    
    
    function validateEmpty(elementName){ 
        var objElement = document.getElementById(elementName);
        var msgElement = document.getElementById(elementName + "Msg");
        if(objElement.value != ""){ 
            objElement.className = "right";
            msgElement.style.color = "green";
            msgElement.innerHTML = "正确！";
            return true;
        }else{ 
            objElement.className = "wrong";
            msgElement.innerHTML = "请输入密码！";
            msgElement.style.color = "red";
            return false;
        }
    }
    function validateRepeat(orgName,tarName){ 
        var orgElement = document.getElementById(orgName);
        var tarElement = document.getElementById(tarName);
        var msgElement = document.getElementById(tarName + "Msg");
        if(orgElement.value == tarElement.value){ 
            msgElement.style.color = "green";
            msgElement.innerHTML = "与初次密码一致！";
            tarElement.className = "right";
            return true;
        }else{ 
            tarElement.className = "wrong";
            msgElement.innerHTML = "与初次密码不一致，请重新输入！";
            msgElement.style.color = "red";
            return false;
        }
    }
    function validatePwd(){ 
        return validateEmpty("pwd");
    }
    function validateConf(){ 
        if(validateEmpty("conf")){ 
            return validateRepeat("pwd","conf");
        }
        return false;
    }
    
    // 单选框
    function singleCheck(objName){ 
        var single = document.getElementsByName(objName);
        for(var i = 0;i < single.length;i ++){ 
            if(single[i].checked){ 
                alert("最喜欢的运动是：" + single[i].value);
            }
        }
    }
    function paraSingle(){ 
        return singleCheck("sport");
    }
    
    // 复选框
    function manyCheck(objName){ 
        var manyCheckElement = document.getElementsByName(objName);
        var str = "所选课程：";
        for(var i = 0;i < manyCheckElement.length;i ++){ 
            if(manyCheckElement[i].checked){ 
                str += manyCheckElement[i].value + "、";
            }
        }
        alert(str);
    }
    function selectAllCheck(objName,objId){ 
        var allCheck = document.getElementsByName(objName);
        for(var i = 0;i < allCheck.length;i ++){ 
            allCheck[i].checked = document.getElementById(objId).checked;
        }
    }
    function paraSelectAllCheck(){ 
        return selectAllCheck("course","courseAll");
    }
    function paraManyCheck(){ 
        return manyCheck("course");
    }
    
    // 下拉列表框
    function selectBox(objId){ 
        var objElement = document.getElementById(objId);
        alert("你的家乡：" + objElement.value);
    }
    function paraSelectBox(){ 
        return selectBox("city");
    }
    
    //文本域
    function textArea(objId,submitId){ 
        var objElement = document.getElementById(objId);
        var msgElement = document.getElementById(objId + "Msg");
        var len = objElement.value.length;
        var submitElement = document.getElementById(submitId);
        if(len <= 10){ 
            msgElement.innerHTML = "您还可以输入:" + (10 - len) + "个字";
            submitElement.disabled = "";
        }else{ 
            msgElement.innerHTML = "您输入的字数超过限制！";
            msgElement.style.color = "red";
            submitElement.disabled = true;
        }
    }
    function paraTextArea(){ 
        return textArea("note","textArea");
    }
    
    // 警告框
    function deleteConfirm(){ 
        return window.confirm("确定删除邮件吗？");
    }
    //用户输入框
    function usePrompt(){ 
        var str = window.prompt("请输入你的名字：","姓名是：");
        document.write(str);
    }
    // 弹框Open
    window.open("yanzheng.html","AD页","width=200;height:10;scrollBars=yes;resizeable=no");
    // 重定向location
    function go(url){ 
        window.location = url;
    }

[20200310232916688.png]: https://img-blog.csdnimg.cn/20200310232916688.png
[20200310233103431.png]: /images/20210704/0cabc73145b3445788b19d32579767fb.png