JS之表单验证

Posted 2020-10-20 凉白开的你

js表单验证是目前前端必不可少用到的检测方法，现在我就发一下我用到的常见的几种，用到了正则表达式,下面是一套完整的网页代码~

js代码：

window.onload = function(){
//初始化这些方法
  function init(){
        truenameFocus();
        truenameBlur();
        phoneFocus();
        phoneBlur();
        emailFocus();
        emailBlur();
        qqFocus();
        qqBlur();
        usernameFocus();
        usernameBlur();
        pwFocus();
        pwBlur();
        surepwFocus();
        surepwBlur();
        checkForm();
}

//姓名验证
    function truenameFocus() {
        var truename = document.getElementById("input_truename");
        var hinttruename = document.getElementById("hint_truename");
        truename.onfocus = function () {
            hinttruename.style.color = "#999999";
            hinttruename.innerhtml = "请输入真实姓名~";
        }
    }

    function truenameBlur() {
        var truename = document.getElementById("input_truename");
        var hinttruename = document.getElementById("hint_truename");
        var reg = /^[\u0391-\uFFE5]+$/;//只能输入中文
        truename.onblur = function () {
            if (truename.value == "") {
                hinttruename.innerHTML = "姓名不能为空";
                hinttruename.style.color = "red";
                return false;
            }
            if (reg.test(truename.value) == false) {
                hinttruename.innerHTML = "请输入中文~";
                hinttruename.style.color = "red";
                return false;
            }
            hinttruename.innerHTML = "名字格式正确";
            hinttruename.style.color = "green";
            return true;
        }
    }

    // 手机号验证
    function phoneFocus() {
        var phone = document.getElementById("input_phone");
        var hintphone = document.getElementById("hint_phone");
        phone.onfocus = function () {
            hintphone.innerHTML = "请输入11位正确的手机号码~";
            hintphone.style.color = "#999999";
        }
    }

    function phoneBlur() {
        var phone = document.getElementById("input_phone");
        var hintphone = document.getElementById("hint_phone");
        var reg = /^[0-9]+$/;//只能输入数字
        phone.onblur = function () {
            if (phone.value == "") {
                hintphone.innerHTML = "手机号码不能为空~";
                hintphone.style.color = "red";
                return false;
            }
            if (phone.value.substring(0, 1) !== "1" || reg.test(phone.value) == false) {
                hintphone.innerHTML = "请输入正确的手机号~";
                hintphone.style.color = "red";
                return false;
            }
            if (phone.value.length > 11 || phone.value.length < 11) {
                hintphone.innerHTML = "手机号码应是11位~~";
                hintphone.style.color = "red";
                return false;
            }
            hintphone.innerHTML = "手机号通过~";
            hintphone.style.color = "green";
            return true;

        }
    }

    //邮箱验证
    function emailFocus() {
        var email = document.getElementById("input_email");
        var hintemail = document.getElementById("hint_email");
        email.onfocus = function () {
            hintemail.innerHTML = "请输入您的常用邮箱~";
            hintemail.style.color = "#999999";
        }
    }

    function emailBlur() {
        var email = document.getElementById("input_email");
        var hintemail = document.getElementById("hint_email");
        var reg = /^\[email protected]\w+(\.[a-zA-Z]{2,3}){1,2}$/;//邮箱格式的检测
        email.onblur = function () {
            if (email.value == "") {
                hintemail.innerHTML = "邮箱不能为空~";
                hintemail.style.color = "red";
                return false;
            }
            if (reg.test(email.value) == false) {
                hintemail.innerHTML = "邮箱的格式不正确~";
                hintemail.style.color = "red";
                return false;
            }
            hintemail.innerHTML = "邮箱格式正确,验证通过~";
            hintemail.style.color = "green";
            return true;
        }
    }

    //qq验证
    function qqFocus() {
        var qq = document.getElementById("input_qq");
        var hintqq = document.getElementById("hint_qq");
        qq.onfocus = function () {
            hintqq.innerHTML = "请输入您的QQ号~";
            hintqq.style.color = "#999999";
        }
    }

    function qqBlur() {
        var qq = document.getElementById("input_qq");
        var hintqq = document.getElementById("hint_qq");
        // var regu = /^[1][0-9][0-9]{9}$/;//检测手机号码的表达式，以1开头
        // var reg = new RegExp(regu);
        var reg = /^\d+$/;//只能是数字
        qq.onblur = function () {
            if (qq.value == "") {
                hintqq.innerHTML = "QQ号不能为空~";
                hintqq.style.color = "red";
                return false;
            }
            if (reg.test(qq.value) == false) {
                hintqq.innerHTML = "请输入正确的QQ号~";
                hintqq.style.color = "red";
                return false;
            }
            hintqq.innerHTML = "QQ通过~";
            hintqq.style.color = "green";
            return true;
        }
    }

    //昵称验证
    function usernameFocus() {
        var username = document.getElementById("input_username");
        var hintusername = document.getElementById("hint_username");
        username.onfocus = function () {
            hintusername.innerHTML = "由汉字、字母、数字、下划线组成~";
            hintusername.style.color = "#999999";
        }
    }

    function usernameBlur() {
        var username = document.getElementById("input_username");
        var hintusername = document.getElementById("hint_username");
        //由数字，字母，或下划线组成的字符串
        var regu = "^[0-9a-zA-Z\_]+$";
        var reg = new RegExp(regu);
        var chinaReg = /[\u4e00-\u9fa5]/g;   //匹配中文字符
        username.onblur = function () {
            if (username.value == "") {
                hintusername.innerHTML = "昵称不能为空";
                hintusername.style.color = "red";
                return false;
            }
            if (reg.test(username.value) == false && chinaReg.test(username.value) == false) {
                hintusername.innerHTML = "只能由汉字、字母、数字、下划线组成";
                hintusername.style.color = "red";
                return false;
            }
            var len = username.value.replace(chinaReg, "ab").length;
            if (len > 20 || len < 4) {
                hintusername.innerHTML = "长度为4－20个字符";
                hintusername.style.color = "red";
                return false;
            }
            hintusername.innerHTML = "昵称输入正确";
            hintusername.style.color = "green";
            return true;

        }
    }

    //密码验证
    function pwFocus() {
        var pw = document.getElementById("input_pw");
        var hintpw = document.getElementById("hint_pw");
        pw.onfocus = function () {
            hintpw.innerHTML = "密码长度6~16个字符";
            hintpw.style.color = "#999999";
        }
    }

    function pwBlur() {
        var pw = document.getElementById("input_pw");
        var hintpw = document.getElementById("hint_pw");
        pw.onblur = function () {
            if (pw.value == "") {
                hintpw.innerHTML = "密码不能为空,请输入6~16位密码~";
                hintpw.style.color = "red";
                return false;
            }
            if (pw.value.length > 16 || pw.value.length < 6) {
                hintpw.innerHTML = "密码长度为6~16位";
                hintpw.style.color = "red";
                return false;
            }
            hintpw.innerHTML = "密码格式输入正确~";
            hintpw.style.color = "green";
            return true;
        }
    }

    //确认密码验证
    function surepwFocus() {
        var surepw = document.getElementById("input_surepw");
        var hintsurepw = document.getElementById("hint_surepw");
        surepw.onfocus = function () {
            hintsurepw.innerHTML = "密码长度6~16个字符";
            hintsurepw.style.color = "#999999";
        }
    }

    function surepwBlur() {
        var surepw = document.getElementById("input_surepw");
        var pw = document.getElementById("input_pw");
        var hintsurepw = document.getElementById("hint_surepw");
        surepw.onblur = function () {
            if (surepw.value == "") {
                hintsurepw.innerHTML = "确认密码不能为空,请输入6~16位密码~";
                hintsurepw.style.color = "red";
                return false;
            }
            if (surepw.value != pw.value) {
                hintsurepw.innerHTML = "两次输入的密码不一致,请重新输入~";
                hintsurepw.style.color = "red";
                return false;
            }
            hintsurepw.innerHTML = "两次密码输入正确~";
            hintsurepw.style.color = "green";
            return true;
        }
    }

//表单提交的时候验证表单内容输入的有效性
    function checkForm() {
        var flagtruename = truenameBlur();
        var flagphoneblur = phoneBlur();
        var flagemail = emailBlur();
        var flagusername = usernameBlur();
        var flagpw = pwBlur();
        var flagsurepw = surepwBlur();
        var btn_sure = document.getElementById("customer_surebtn");
        btn_sure.onclick = function () {
            if (flagtruename == true && flagphoneblur == true && flagemail == true && flagusername == true && flagpw == true && flagsurepw == true) {
                return true;
            } else {
                return false;
            }
        }

    }
init();  
}

 

css代码:

.customeradd_box{
    width: 800px;
    height: 500px;
    border: 1px solid #C7C9CA;
    position:fixed;
    top: 20%;
    left: 20%;
    text-align: center;
     font-weight: 400;
    font-family:"微软雅黑";
    font-size:20px;
    color: #187EC4;
    display: none;
    background-color: #ffffff;
    z-index: 999;
}
.customeradd_title{
    width: 800px;
    height: 70px;
    line-height: 60px;
    
} 
.customeradd_left{
    width: 350px;
    text-align: center;
    float: left;
    margin-left: 48px;
    border-right: 1px dashed #C7C9CA;
}

.customeradd_left li,.customeradd_right li{
    width:340px;
    height: 55px;
    line-height: 50px;

}
.twoul li{
    float: left;
    width: 120px;

}
.customeradd_left input,.customeradd_right input{
    width: 200px;
    height: 35px;
    font-size: 15px;
    border-radius: 3px;
    border: 1px solid #C7C9CA;
}
.customeradd_left select,.customeradd_right select{
    width: 200px;
    height: 35px;
    font-size: 15px;
    border-radius: 3px;
}
.customeradd_right{
    width: 350px;
    text-align: center;
    float: right;
    margin-right: 48px;

    
}
.customer_bottom{
    width: 340px;
    height:60px;
    text-align: center;
    line-height: 60px;
    position: relative;
    bottom: 5px;
    left: 220px;

}
button{
    width: 68px;
    height: 40px;
    background-color:#00A1E7;
    color: #ffffff;
    font-size: 17px;
    border: none;
    margin: 20px;
    cursor: pointer;
}
button:focus{
    outline: none;
}
button:hover{
    background-color: #0986BC;
}

 

 

 

html:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客服设置</title>
    <link rel="stylesheet" href="../static/css/common/reset.css">
    <link rel="stylesheet" href="../static/css/ymr/customersetting.css">
</head>
<body>
<!--添加客服账号-->
<div class="customeradd_box" id="customeradd_boxx">
    <div class="customeradd_title">
        <span>添加客服</span>
    </div><!--customeradd-title结束-->
    <div class="customeradd_left">
        <!--<span>基本信息</span>-->
        <ul>
            <li>
                <ul class="twoul"><li></li><li>基本信息</li></ul>
            </li>
            <li>
                <ul class="twoul"><li >姓名</li><li><input type="text" id="input_truename"></li></ul>
            </li>
            <li class="customeradd_hint" id="hint_truename">请输入您的真实姓名</li>
            <li>
                <ul class="twoul"><li>性别</li><li><select><option>男</option><option>女</option></select></li></ul>
            </li>
            <li class="customeradd_hint"></li>
            <li>
                <ul class="twoul"><li>手机号</li><li><input type="text" id="input_phone"></li></ul>
            </li>
            <li class="customeradd_hint" id="hint_phone">请输入你的11位真实手机号~</li>
            <li>
                <ul class="twoul"><li>邮箱</li><li><input type="text" id="input_email"></li></ul>
            </li>
            <li class="customeradd_hint" id="hint_email">请输入您的QQ邮箱~</li>
            <li>
                <ul class="twoul"><li>QQ</li><li><input type="text" id="input_qq"></li></ul>
            </li>
            <li class="customeradd_hint" id="hint_qq">请输入您的QQ~</li>
        </ul>
    </div>
    <div class="customeradd_right">
        <!--<span>其他信息</span>-->
        <ul>
            <li>
                <ul class="twoul"><li></li><li>其他信息</li></ul>
            </li>
            <li>
                <ul class="twoul"><li>昵称</li><li><input type="text" id="input_username"></li></ul>
            </li>
            <li class="customeradd_hint" id="hint_username">包含汉字、字母、数字、下划线</li>
            <li>
                <ul class="twoul"><li>工号</li><li><input type="text"></li></ul>
            </li>
            <li class="customeradd_hint"></li>
            <li>
                <ul class="twoul"><li>密码</li><li ><input type="password" id="input_pw" ></li></ul>
            </li>
            <li class="customeradd_hint" id="hint_pw">6~18个字符，可使用字母、数字、下划线</li>
            <li>
                <ul class="twoul"><li>确认密码</li><li ><input type="password" id="input_surepw" ></li></ul>
            </li>
            <li class="customeradd_hint" id="hint_surepw"></li>
            <li>
                <ul class="twoul"><li>服务类别</li><li><select>
                    <option>维修类</option>
                    <option>造船类</option>
                    <option>救助类</option>
                    <option>法律类</option>
                    <option>技术类</option>
                    <option>订单类</option>
                </select></li>
                    <li class="customeradd_hint" ></li>
            </ul>
            </li>
        </ul>
    </div>
    <div style="clear: both"></div>
    <div class="customer_bottom">
        <button class="customer_sure" id="customer_surebtn">确认</button>
        <button class="customer_canel" id="customer_quxiao">取消</button>
    </div>
</div><!--customeradd_box结束-->

<script src="../static/js/common/common.js"></script>
<script src="../static/js/ymr/customersetting.js"></script>
</body>