6miu盘搜

ThinkPHP 3.2的原始jq表单验证

xiaoxiao2021-03-25 131

<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-navbaritem weui-baritem_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-cellhd"><label class="weui-label">真实姓名</label></div> <div class="weui-cellbd"> <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-cellhd"><label class="weui-label">身份证号</label></div> <div class="weui-cellbd"> <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-cellhd"><label class="weui-label">性别</label></div> <div class="weui-cellbd"> <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-cellhd"><label class="weui-label">年龄</label></div> <div class="weui-cellbd"> <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-cellhd"><label class="weui-label">手机号码</label></div> <div class="weui-cellbd"> <input class="weui-input" type="number" pattern="[0-9]" placeholder="保密，仅供后台验证" id="phone_num" name="phone_num"> </div> <div class="weui-cellft"> <span class="weui-vcode-btn" id="getcode">获取验证码</span> </div> </div> <div class="weui-cell"> <div class="weui-cellhd"><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>

转载请注明原文地址: https://ju.6miu.com/read-880.html

技术

最新回复(0)