ThinkPHP 3.2的原始jq表单验证

最新推荐文章于 2023-07-21 01:01:56 发布

李振磊

最新推荐文章于 2023-07-21 01:01:56 发布

阅读量560

点赞数

分类专栏： php ThinkPHP 3.23

本文链接：https://blog.csdn.net/lzl18918615216/article/details/60869391

版权

ThinkPHP 3.23 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

php

6 篇文章 0 订阅

订阅专栏

<include file="Public:header" />
<link rel="stylesheet" href="/Public/css/home/user-login.css">
<body>
<header class="weui-navbar hd-bar">
    <a class="icon"></a>
    <ul class="navbar">
        <li class="weui-navbar__item weui-bar__item_on ">个人资料</li>
    </ul>
</header>
<form id= "edit" method="post">
<div class="contain top-contain">


    <div class="loading" style="text-align: center">
        <i class="weui-loading weui-icon_toast"></i>
    </div>


    <div class="weui-cells weui-cells_form">
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd"><label class="weui-label">真实姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入真实姓名" id="true_name" name="true_name">
            </div>
            <div class="weui-cell__ft">
               <span class="weui-vcode-btn true_name_info">此为保密项</span>
            </div>
        </div>
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd"><label class="weui-label">身份证号</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" pattern="[0-9]*" placeholder="保密，仅供后台验证" id="indentity_num" name="indentity_num">
            </div>
            <div class="weui-cell__ft">
               <span class="weui-vcode-btn indentity_num_info">此为保密项</span>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text"  disabled id="sex" name="sex" value='<if condition="$data.sex eq 1"> 男<elseif condition="$data.sex eq 2"/>女<else /> 未填</if>'>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">年龄</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" value="{$data.age}" disabled id="age" name="age"> 
            </div>
        </div>


        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" pattern="[0-9]*" placeholder="保密，仅供后台验证" id="phone_num" name="phone_num">
            </div>
            <div class="weui-cell__ft">
               <span class="weui-vcode-btn" id="getcode">获取验证码</span>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">手机验证码</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入验证码">
            </div>
        </div>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">完善</a>
    </div>
</div>
</form>


</body>
<include file="Public:footer"/>
<script>




    $(function(){


        function IdCard(UUserCard,num){
           if(num==1){
               //获取出生日期
               birth=UUserCard.substring(6, 10) + "-" + UUserCard.substring(10, 12) + "-" + UUserCard.substring(12, 14);
            return birth;
           }
           if(num==2){
               //获取性别
               if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
                   //男
             return "男";
               } else {
                   //女
             return "女";
               }
           }
           if(num==3){
                //获取年龄
                var myDate = new Date();
                var month = myDate.getMonth() + 1;
                var day = myDate.getDate();
                var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
                if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
                    age++;
                }
          return age;
         }
        }


        $("#true_name").focus();
        $('#true_name').blur(function(){
            if($('#true_name').val()==""){
                $('.true_name_info').text('').text('不能为空');
                $('.true_name_info').css('color','red');
                return;
            }else{
                $('.true_name_info').text('此为保密项');
                $('.true_name_info').css('color','green');
                return;
            }
        });
        
        $("#indentity_num").blur(function(){
            if($('#indentity_num').val()==""){
                $('.indentity_num_info').text('').text('不能为空');
                $('.indentity_num_info').css('color','red');
                return;
            }else{
                var pattern = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                if(pattern.test($('#indentity_num').val()) == false){
                    $('.indentity_num_info').text('身份证号格式错误');
                    $('.indentity_num_info').css('color','red');
                    return;
                }else{
                    var iIdNo = $('#indentity_num').val();
                    $('#sex').val(IdCard(iIdNo,2));
                    $('#age').val(IdCard(iIdNo,3));
                    return;
                }
                $('.indentity_num_info').text('此为保密项'); 
                $('.indentity_num_info').css('color','green');
                return;
            }
        });
        




        $("#showTooltips").click(function(){
            $('#edit').submit();
        });
        
    })
</script>