表单验证身份证

2021-10-28 19:59:09 阅读：110 来源： 互联网

标签：background form 验证 color height width 身份证表单 margin

1.实现失去焦点时验证身份证是否正确

实现代码如下：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>居民身份证号码验证</title>
    <link href="./css/style.css" rel="stylesheet" type="text/css">
    <script src="js/jquery.js"></script>
</head>

<body class="body">

    <div class="warp">

        <form>
            <div class="form" id="form" name="myform" action="#" method="get">
                <div class="form-title">
                    <span>居民身份证号码验证</span>
                </div>
                <div class="form-main">
                    <div class="form-list">
                        <span>身份证号码</span>
                        <div class="form-text">
                            <input type="text" id="idcard" />
                        </div>
                        <b id="idcard_msg"></b>
                    </div>
                    <div class="submit">
                        <input type="submit" id="submit" value="验证" />
                        <input type="reset" id="reset" value="重置" />
                    </div>
                </div>
        </form>
    </div>
    </div>
</body>
<script>
    $(function () {
        $("#idcard").blur(function () {
            var str=$(this).val();
            var reg=/^\d{17}[0-9xX]$/
            if(str==''||str==null){
                $("#idcard_msg").html("*身份证格式不正确")
            }else if (!reg.test(str)){
                $("#idcard_msg").html("*身份证格式不正确")
            }
            else {
                $("#idcard_msg").html("")
            }
        })
    })
</script>

</html>

@charset "utf-8";
/* CSS Document */
/***初始化样式***/
div, h1, h2, h3, h4, h5, h6, ul, li, ol, p, dl, dt, dd, span, strong, i, em, a, img {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font: 12px/22px "Microsoft YaHei", "SimSun", "arial";
    color: #666666;
    background-size: 45%;
    margin: 0;
}

li, ol {
    list-style: none;
}

a {
    text-decoration: none;
    font: 14px/22px "Microsoft YaHei", "SimSun";
    color: #666666;
}

a:hover {
    color: #cd0200;
    text-decoration: underline
}

input, button, select, textarea {
    outline: none
}

body a {
    outline: none;
}

/*去除低版本浏览器 a焦点虚框*/
.center {
    width: 1000px;
    margin: 0 auto;
}

.center1 {
    width: 600px;
    margin: 50px auto;
}

.clear {
    clear: both;
}

input {
    background: #e7f3fd;
}

.form-text input:focus {
    background: #fff;
    border: 1px solid #0b90e5;
}

.form-text input.er {
    background: #fff6b7;
    border: 1px solid #f00;
}

b {
    color: red;
    margin-left: 20px;
}

.body {
    background: #efefef;
}

.warp {
    width: 700px;
    margin: 50px auto;
    border: 1px solid #ddd;
    background: #fff;
    padding: 40px;
}


.form {
    width: 650px;
    margin: 0 auto;
}

.form-title {
    margin: 10px 0;
    border-bottom: 1px solid #ddd;
}

.form-title span {
    font-size: 18px;
    color: #616161;
    height: 25px;
    line-height: 25px;
    border-left: 3px solid #59AfE4;
    padding: 0 0 0 10px;
    display: inline-block;
    margin: 5px 0;
}

.form-main {
    overflow: hidden;
}

.form-list {
    margin: 0px auto;
    position: relative;
}

.form-list span {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    font-size: 14px;
    color: #333;
    width: 90px;
    text-align: right;
    line-height: 46px;
}

.form-text {
    margin: 0 0 0 100px;
    width: 340px;
    line-height: 46px;
    display: inline-block;
}

.form-text input, .code input {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #ccc;
    line-height: 30px;
    text-indent: 6px;
    color: #333;
    box-shadow: 1px 1px 3px #ddd inset;
}

.ortherinput {
    margin: 0 0 0 100px;
    width: 340px;
    line-height: 46px;
    display: inline-block;
}

.pwsbox {
    display: none;
    width: 1760px;
    overflow: hidden;
    height: 40px;
    margin: -10px 0 0 0;
}

.pwsbox h6 {
    width: 150px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    color: #666;
    font-size: 12px;
    margin: 0;
    padding: 0;
}

.form-list .pwsbox h6 span {
    display: inline-block;
    width: 70px;
    height: 10px;
    margin: 4px;
    float: left;
    background: url(../images/pwd_sprite.png) no-repeat 0 0;
    background-position: 0 -102px;
    position: static
}

.form-list .pwsbox h6.bg1, .form-list .pwsbox h6.bg2 {
    color: #61d01c;
}

.form-list .pwsbox h6.bg1 span {
    background-position: 0 -144px;
}

.form-list .pwsbox h6.bg2 span {
    background-position: 0 -190px;
}

.pwsbox p {
    font-size: 12px;
    line-height: 16px;
    margin: 0 4px;
}

#belong i {
    background: none;
    float: left;
    display: inline-block;
    font-style: normal;
    width: auto;
    padding: 0 10px 0 0;
    line-height: 20px;
}

#code {
    display: none;
}

.form-text div {
    float: left;
    margin: 0 10px 0 0;
    position: relative;
}

.gender, .gender .form-text, .gender span {
    height: 26px;
    line-height: 26px;
}

.gender label input {
    width: 13px;
    height: 13px;
    float: left;
    margin: 6px;
}

.gender label {
    display: inline-block;
    margin-right: 10px;
}

.form-text div ul {
    display: none;
}

.prompt {
    padding: 5px 0 5px 100px;
}

.prompt p {
    line-height: 20px;
    color: #666;
}

.prompt p a {
    line-height: 20px;
    color: #4099d6;
    font-size: 12px;
    margiN: 0 10px;
}


.code {
    padding: 5px 0 5px 100px;
    width: 340px;
    line-height: 46px;
    overflow: hidden;
    height: 46px;
    display: none;
}

.code input {
    width: 170px;
    text-index: 10px;
    float: left;
}

.code span {
    float: left;
    width: 150px;
    text-align: center;
    display: inline-block;
    line-height: 34px;
    border-radius: 3px;
    background: #fff;
    color: #444;
    font-size: 15px;
    border: 1px solid #d0dae3;
    padding: 0;
    float: right;
    cursor: pointer;
}

.submit {
    text-align: center;
    width: 340px;
    margin: 0 0 0 100px;
}

.submit input {
    float: left;
    margin-right: 10%;
    color: #fff;
    background: #69b946;
    border: 1px solid #69b946;
    border-radius: 3px;
    line-height: 40px;
    width: 40%;
    height: 40px;
    font-size: 18px;
    font-family: "微软雅黑";
}

.submit input.no {
    cursor: pointer;
    background: #f4f9fd;
    color: #888;
    cursor: default;
    border: 1px solid #d0dae3;
}

#reset {
    background-color: #888;
    border: 1px solid #888;
}

.deal {
    width: 340px;
    margin: 40px 0 0 100px;
    position: relative;
}

.deal p {
    line-height: 25px;
    color: #666;
    font-size: 12px;
}

.deal p input {
    width: 15px;
    height: 15px;
    float: left;
}

标签：background,form,验证,color,height,width,身份证,表单,margin
来源： https://blog.csdn.net/lu__lala/article/details/121021768

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

表单验证身份证