Ajax前台姓名和身份证号正则验证

最新推荐文章于 2022-11-11 16:31:52 发布

yucongyuqian

最新推荐文章于 2022-11-11 16:31:52 发布

阅读量1.1k

点赞数 1

分类专栏： AJAX 文章标签： ajax 正则

本文链接：https://blog.csdn.net/yucongyuqian/article/details/78553313

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
    <title>基本信息填写</title>
    <link rel="stylesheet" href="../../static/web/css/reset.css" th:href="@{/web/css/reset.css}" />
    <link rel="stylesheet" href="../../static/web/css/common.css" th:href="@{/web/css/common.css}" />
    <link rel="stylesheet" href="../../static/web/css/style.css" th:href="@{/web/css/style.css}" />
    <link rel="stylesheet" href="/web/css/style.css" th:href="@{/web/css/layer.css}" />
    <script src="../../static/web/js/wyrem.js" th:src="@{/web/js/wyrem.js}"></script>
    <script src="../../static/adminlte/plugins/jQuery/jquery-2.2.3.min.js" th:src="@{/adminlte/plugins/jQuery/jquery-2.2.3.min.js}"></script>
</head>
<body>
<!--有色头部-->
<header class="t-colorheader">
    <div class="t-header-header">
        <a href="javascript:history.go(-1)">
            <i class="t-back-icon"><img th:src="@{/web/image/back.png}"/></i>
        </a>
        <span class="t-header-span">我的申请</span>
    </div>
</header>
<!--内容-->
    <div class="wrapper">
        <div class="content mt20">
            <div class="select-list">
                <ul>
                    <li class="select-item">
                        <span class="select-item-text">您的姓名</span>
                        <!--<input type="hidden" id="refreshed" value="no"/>-->
                        <input type="text" class="input more_rightinput" placeholder="请输入姓名" id="user_name"/>
                    </li>
                    <li class="select-item">
                        <span class="select-item-text">证件号码</span>
                        <input type="text" class="input more_rightinput" placeholder="请输入您的身份证号码" id="idCard_number"/>
                    </li>
                    <li class="select-item">
                        <span class="select-item-text">户口所在地</span>
                        <input type="text" class="input more_rightinput" placeholder="请输入您的户口所在地" id="adddress"/>
                    </li>
                    <li class="select-item">
                        <span class="select-item-text">详细地址</span>
                        <input type="text" class="input more_rightinput" placeholder="请输入您的详细地址" id="detail_adddress" />
                    </li>
                </ul>
            </div>
            <p class="tishi mt20"></p>
            <footer class="t-footer mt40">
                <input type="button" value="下一步" class="t-footer-button" id="next_btn"/>
            </footer>
        </div>
    </div>
</body>
<script type="text/javascript"  th:src="@{/web/js/layer.js}" ></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    function isEmpty(value) {
        return (Array.isArray(value) && value.length === 0) || (Object.prototype.isPrototypeOf(value) && Object.keys(value).length === 0);
    }
    /*]]>*/
    $(function () {
        var userId = [[${session.userId}]];
        $(".select-list input").on("focus",function () {
            $(this).val("");
            $('.tishi').hide();
        })
        $("#next_btn").on("click",function(){
            var name=$("#user_name").val();
            var idCard=$("#idCard_number").val();
            var nameHometown=$("#adddress").val();
            var nameAddress=$("#detail_adddress").val();
            var nameRest=/^[\u4E00-\u9FA5]+$/;
            var IdnumberRest=/^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
            if(name=="" || name==undefined){
                $(".tishi").show().html("姓名不能为空");
                return;
            }
            if(!nameRest.test(name)){
                $(".tishi").show().html("姓名格式不正确，必须为汉字");
                return;
            }

            if(idCard==""){
                $(".tishi").show().html("身份证号不能为空");
                return;
            }
            if(!IdnumberRest.test(idCard)){
                $(".tishi").show().html("身份证号格式不正确");
                return;
            }
            //调ajax
            $.ajax({
                url:'/web/addAccount',//接口地址
                //userName,idCard,registeredAddress,detailedAddress,userId
                data:{
                    userName : name,
                    idCard : idCard,
                    registeredAddress:nameHometown,
                    detailedAddress:nameAddress,
                    userId:userId
                },//给后台传递的参数
                type:"POST",
                dataType:"json",
                success: function(data){
                    if(isEmpty(data)){
                    //判断，如果结果为空，可以注册
                        window.location.href='/bankInfor';
                    }else{
                    //不为空，提示信息
                        $(".tishi").html(data.errorInfo).show();
                    }
                },
                error:function (data) {
                    alert("错误");
                }
            });

        })
    })
</script>
</html>