【HTML】用户名、身份证号、邮箱、出生日期的格式验证

最新推荐文章于 2024-07-14 14:30:45 发布
.WNB
最新推荐文章于 2024-07-14 14:30:45 发布
阅读量965
点赞数 3
分类专栏： HTML 文章标签： html bootstrap 前端经验分享
本文链接：https://blog.csdn.net/qq_51237779/article/details/127695760
版权
HTML 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
直接上代码，如需要格式验证，直接找对应的就可以！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
//为了使页面不是那么突兀，特地导入了这俩个bootstrap框架相关的包
    <link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.7-dist/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.7-dist/js/bootstrap.js"/>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 "></div>
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
            <h3 style="font-family: youyuan;color: blue;text-align: center"><strong>表单验证</strong></h3>
            <hr/>
            <form name="form">
                <span style="color: blue">用户名</span>
                <input type="text" id="name" name="name" required="required" class="form-control" placeholder="用户名（6-14位）"/>
                <span id="namespan" style="color: red"></span>
                <br/>
                <span style="color: blue">密码</span>
                <input type="password" id="pwd"name="pwd" required="required" class="form-control"onclick="checkname()" placeholder="密码（4-16位）"/>
                <span id="pwdspan"style="color: red"></span>
                <br/>
                <span style="color: blue">确认密码</span>
                <input type="password" id="repwd"name="repwd" required="required" class="form-control"onclick="checkpassword()" placeholder="确认密码"/>
                <span id="repwdspan"style="color: red"></span>
                <br/>
                <span style="color: blue">邮箱</span>
                <input type="email" id="email" required="required" class="form-control"onclick="same()" placeholder="邮箱"/>
                <span id="emailspan" style="color: red"></span>
                <br/>
                <span style="color: blue">身份证号</span>
                <input type="text"name="number" id="id" required="required" class="form-control"onclick="checkemail()" placeholder="身份证号"/>
                <span id="idspan" style="color: red"></span>
                <br/>
                <span style="color: blue">出生日期</span>
                <input name="sDate" type="text" id="sDate" required="required" class="form-control"onclick="check(form)" placeholder="出生日期"/>
                <span id="datespan" style="color: red"></span>
                <br/>
                <input type="button" value="检查出生日期" class="btn btn-primary"onclick="checkdate(form)"/>
                <input type="reset" value="重置" class="btn btn-primary"/>
                <input type="submit" value="提交" class="btn btn-primary"/>
            </form>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
        </div>
    </div>
</div>
</body>
</html>
<script language="javascript">
    //检验用户名格式
    function checkname(){
        var name1 = document.form.name.value;
        if (name1 == "") {
            document.getElementById("namespan").innerHTML = "用户名不能为空！";
            document.form.name.focus();
            return false;
        }
        if (name1.length < 6 || name1.length > 14) {
            document.getElementById("namespan").innerHTML = "格式错误，长度6-14个字符";
            document.form.name.focus();
            // document.form.name.select();
            return false;
        }
        var charname1 = name1.toLowerCase();
        for (var i = 0; i < name1.length; i++) {
            var charname = charname1.charAt(i);
            if (!(charname >= 0 && charname <= 9) && (!(charname >= 'a' && charname <= 'z')) && (charname != '_')) {
                document.getElementById("namespan").innerHTML  = "用户名包含非法字符";
                // document.form.name.select();
                document.form.name.focus();
                return false;
            }
        }
        document.getElementById("namespan").innerHTML  = "用户名正确";
        return true;
    }
 
    //检查密码格式
        function checkpassword(){
            var div = document.getElementById("pwdspan");
            div.innerHTML = "";
            var password = document.form.pwd.value;
            if (password == "") {
                div.innerHTML = "密码不能为空";
                document.form.pwd.focus();
                return false;
            }
            if (password.length < 4 || password.length > 16) {
                div.innerHTML = "格式错误，密码长度为4-16位";
                document.form.pwd.select();
                return false;
            }
            div.innerHTML = "密码格式正确";
            return true;
        }
 
    //检查密码是否一样
    function same() {
        var d=document.getElementById("repwdspan");
        d.innerHTML="";
        var pValue=document.getElementById("pwd").value;
        if(pValue==""){
            //注意空的表示方法
            d.innerHTML="密码不能为空";
            return false;
        }
        /** 校验确认密码*/
        var rpValue=document.getElementById("repwd").value;
        if(rpValue!=pValue){
            d.innerHTML="两次密码输入不一致";
            return false;
        }
        d.innerHTML="输入一致";
        return true;
 
    }
 
    //检验邮箱
    function checkemail() {
        var d=document.getElementById("emailspan");
        d.innerHTML="";
        var eValue=document.getElementById("email").value;
        if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
            d.innerHTML="邮箱格式错误！";
        }else
            d.innerHTML="邮箱格式正确"
    }
 
 
    // 检验身份证号格式
    function checkeNO(NO){
        var str=NO;
        //在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
        var Expression=/^\d{17}[\d|X]$|^\d{15}$/;
        var objExp=new RegExp(Expression);
        if(objExp.test(str)==true){
            return true;
        }else{
            return false;
        }
    }
    function check(form){
        var d=document.getElementById("idspan");
        d.innerHTML="";
        if(form.number.value==""){
            d.innerHTML="请输入身份证号码!";
            form.number.focus();return;
        }
        if(!checkeNO(form.number.value)){
            d.innerHTML="身份证号码格式错误!!";
            form.number.focus();
            return;
        }
        if(checkeNO(form.number.value)){
            d.innerHTML="身份证号码格式正确!!";
        }
    }
 
    //判断输入的日期是否正确
    function CheckDate(INDate){
        if (INDate==""){return true;}
        if(INDate.indexOf('-',0)!=-1){	separate="-"}
        else{
            if(INDate.indexOf('/',0)!=-1){separate="/"}
            else {return true;}
        }
        area=INDate.indexOf(separate,0)
        //获取年份
        subYY=INDate.substr(0,area)
        if(isNaN(subYY) || subYY<=0){
            return true;
        }
        //转换月份
        subMM=INDate.substr(area+1,INDate.indexOf(separate,area+1)-(area+1))
        if(isNaN(subMM) || subMM<=0){
            return true;
        }
        if(subMM.length<2){subMM="0"+subMM}
        //转换日
        area=INDate.lastIndexOf(separate)
        subDD=INDate.substr(area+1,INDate.length-area-1)
        if(isNaN(subDD) || subDD<=0){
            return true;
        }
        if(eval(subDD)<10){subDD="0"+eval(subDD)}
        NewDate=subYY+"-"+subMM+"-"+subDD
        if(NewDate.length!=10){return true;}
        if(NewDate.substr(4,1)!="-"){return true;}
        if(NewDate.substr(7,1)!="-"){return true;}
        var MM=NewDate.substr(5,2);
        var DD=NewDate.substr(8,2);
        if((subYY%4==0 && subYY%100!=0)||subYY%400==0){ //判断是否为闰年
            if(parseInt(MM)==2){
                if(DD>29){return true;}
            }
        }else{
            if(parseInt(MM)==2){
                if(DD>28){return true;}
            }
        }
        var mm=new Array(1,3,5,7,8,10,12); //判断每月中的最大天数
        for(i=0;i< mm.length;i++){
            if (parseInt(MM) == mm[i]){
                if(parseInt(DD)>31){
                    return true;
                }else{
                    return false;
                }
            }
        }
        if(parseInt(DD)>30){return true;}
        if(parseInt(MM)>12){return true;}
        return false;
    }
function checkdate(myform){
        var d=document.getElementById("datespan");
        d.innerHTML="";
    if(myform.sDate.value==""){
        d.innerHTML="请输入日期";
        myform.sDate.focus();return;
    }
    if(CheckDate(myform.sDate.value)){
        d.innerHTML="您输入的日期不正确！\n 请注意日期格式（如：2007/07/17或2007-07-17）以及二月是否为闰年！";
        myform.sDate.focus();return;
    }
    if(!CheckDate(myform.sDate.value)){
        d.innerHTML="您输入的日期是正确的";
    }
}
</script>