JS之表单验证

Posted 凉白开的你

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS之表单验证相关的知识,希望对你有一定的参考价值。

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>

 


以上是关于JS之表单验证的主要内容,如果未能解决你的问题,请参考以下文章

jquery.validate.js使用之自定义表单验证规则

JS之正则表达式

js之正则表单验证dom模型

ajaxFileUpload上传带参数文件及JS验证文件大小

JS表单验证代码

js验证表单不能填数字怎么判断?