Fit 手机优化表单
常用表单结构
对表单可使用ax-fit-tel包裹，在已经适配基础上增强手机端的显示效果。在手机端效果如下：
- 表单头和输入框字号从原来的14px变成16px。
- 表单按钮字号从原来的14px变成16px。
- 去掉左右间隙，全屏铺满。
- 输入框将以横线分割。
自适应表单常用到的插件如下：
-
<script src="src/plugins/rangeSlider/ion.rangeSlider.min.js" type="text/javascript"></script><!--滑块插件JS--> <link href="src/plugins/rangeSlider/ion.rangeSlider.css" rel="stylesheet" type="text/css" /><!--滑块插件CSS--> <script src="src/plugins/dropzone/js/dropzone.js" type="text/javascript"></script><!--上传插件JS--> <link href="src/plugins/mobiscroll/css/mobiscroll.jquery.css" rel="stylesheet" type="text/css" ><!--日期选择CSS--> <script src="src/plugins/mobiscroll/js/mobiscroll.jquery.min.js" type="text/javascript"></script><!--日期选择JS--> <script src="src/plugins/input-spinner/input-spinner.min.js" type="text/javascript"></script><!--计数器插件JS--> <script src="src/plugins/jquery.validate/jquery.validate.min.js" type="text/javascript"></script><!--表单验证插件JS--> <script type='text/javascript'> $(document).ready(function () { //滑块 $("#slider03").ionRangeSlider({ skin: "ax", grid:true, }); //上传 $("#upload01").dropzone({ url: "ax-upload-script.php", previewTemplate: $('#template01').html(), paramName: "file", maxFilesize: 5, maxFiles: 5, addRemoveLinks:true, acceptedFiles: ".jpg,.png,.gif,.txt,.doc,.docx,.xsl,.xslx,.pdf", }); //日期 $('#datepicker01').mobiscroll().calendar({ theme: 'ax', lang:'zh', onBeforeShow:function(event, inst){ $('#'+this.id).addClass('ax-focus'); }, onClose: function (event, inst) { $('#'+this.id).removeClass('ax-focus'); }, display: 'bubble', }); //强度和验证 var chaVal = 0; var upVal = 0; var lowVal = 0; var numVal = 0; var speVal = 0; var upperCase= new RegExp('[A-Z]'); var lowerCase= new RegExp('[a-z]'); var numbers = new RegExp('[0-9]'); var specialchars = new RegExp('[^a-zA-Z0-9]'); $("#vali06").each(function(){ var thisForm = $(this); $.validator.addMethod('passwordCheck06', function (value, element) { if (value.length >= 12) { chaVal = 1; } else { chaVal = 0; }; if (value.match(upperCase)) { upVal = 1} else { upVal = 0; }; if (value.match(lowerCase)) { lowVal = 1} else { lowVal = 0; }; if (value.match(numbers)) { numVal = 1} else { numVal = 0; }; if (value.match(specialchars)) { speVal = 1} else { speVal = 0; }; var total = chaVal + upVal + lowVal + numVal + speVal; if (total == 0) { thisForm.find(".ax-strength-svg").removeClass("ax-weak ax-medium ax-strong"); $(element).data('error-msg','<div class="ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span> 请输入密码</div>'); return false; } else if (value.length < 6 ){ thisForm.find(".ax-strength-svg").removeClass("ax-medium ax-strong"); thisForm.find(".ax-strength-svg").addClass("ax-weak"); $(element).data('error-msg','<div class="ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span> 密码长度不能小于 6 个字母</div>'); return false; }else if (total <= 1 && value.length >= 6) { thisForm.find(".ax-strength-svg").removeClass("ax-medium ax-strong"); thisForm.find(".ax-strength-svg").addClass("ax-weak"); return true; } else if (total == 2 || total == 3 && value.length >= 6){ thisForm.find(".ax-strength-svg").removeClass("ax-weak ax-strong"); thisForm.find(".ax-strength-svg").addClass("ax-medium"); return true; } else if(total >= 4 && value.length >= 6){ thisForm.find(".ax-strength-svg").removeClass("ax-weak ax-medium"); thisForm.find(".ax-strength-svg").addClass("ax-strong"); return true; } else { thisForm.find(".ax-strength-svg").removeClass("ax-weak ax-medium"); thisForm.find(".ax-strength-svg").addClass("ax-strong"); return true; } return true; }, function(params, element) { return $(element).data('error-msg'); }); thisForm.validate({ errorPlacement: function(error, element) { error.appendTo(element.parent().parent()); }, debug:true, errorClass: "ax-valid", rules: { password: { passwordCheck06:true, } }, success: function(label) { label.removeClass("ax-color-danger").html('<div class="ax-color-primary"><span class="ax-iconfont ax-icon-check-o-fill"></span> 通过验证<span></span></div>'); } }); }); }); </script> -
<div class="inner ax-fit-tel"> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">姓名：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div> </div> <span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-fill"></span> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">选择房子：</div> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-row"> <div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text"><span class="ax-pos-right">室</span></div> <span class="ax-gutter-md"></span> <div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div> <span class="ax-gutter-md"></span> <div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div> </div> </div> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">验证码：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text"></div> <div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-fill"></span>填写完成</div> </div> <a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">头像：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><span class="ax-iconfont ax-icon-me"></span></span></div> </div> <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></a><span class="ax-form-txt ax-color-des">李创江</span> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">选择文件：</div> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件"> <input type="file"> </div> </div> </div> <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head01.jpg),url(../src/images/loading.gif);"></a> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-dropzone-outer"> <div class="ax-grid ax-space-md"> <ul class="ax-grid-inner ax-dropzone" id="upload01"></ul> </div> </div> </div> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">选择城市：</div> <div class="ax-form-con"> <div class="ax-form-input"> <select class="ax-select"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆" selected="">重庆</option> </select> </div> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">单选：</div> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-row ax-split-2"> <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="0" checked="" type="radio"><span>军事类</span></label></div> <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="1" type="radio"><span>人物志类</span></label></div> <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="2" disabled="" type="radio"><span>娱乐类</span></label></div> <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div> </div> </div> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">复选：</div> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-row ax-split-2"> <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="0" checked="" type="checkbox"><span>军事类</span></label></div> <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="1" type="checkbox"><span>人物志类</span></label></div> <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="2" disabled="" type="checkbox"><span>娱乐类</span></label></div> <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat-x" value="3" checked="" disabled="" type="checkbox"><span>其他</span></label></div> </div> </div> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">数量：</div> <div class="ax-form-con"> <div class="ax-form-input" data-trigger="spinner"><div class="ax-increase"><input name="username" placeholder="数量" value="1" type="text"><a href="###" class="ax-minus" data-spin="down"><i class="ax-iconfont ax-icon-minus"></i></a><a href="###" class="ax-plus" data-spin="up"><i class="ax-iconfont ax-icon-plus"></i></a></div></div> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">评论：</div> <div class="ax-flex-block"> <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-break-lg"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">滑块：</div> <div class="ax-flex-block"> <div class="ax-form-input"><input name="username" placeholder="输入数值" id="slider03" type="text"></div> </div> </div> </div> <div class="ax-break-lg"></div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">日期选择：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="date" placeholder="选择日期" type="text" id="datepicker01"></div> </div> </div> </div> <div class="ax-break-line"></div> <form id="vali06"> <div class="ax-form-group" > <div class="ax-flex-row"> <div class="ax-form-label">密码验证：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="password" type="password"></div> </div> <div class="ax-strength ax-strength-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6986 86.6986"><path class="svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path></svg></div> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-flex-block"> <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full">提交button</button></div> </div> </div> </div> </form> </div> <div id="template01" style="display: none;"> <li class="ax-grid-block ax-col-6"> <div class="ax-item"> <div class="ax-operate"><a href="###" data-fancybox="upload" target="_blank"><i class="ax-iconfont ax-icon-eye"></i></a></div> <div class="ax-preview"> <div class="ax-image" data-image=""> <div class="ax-progress" data-progress=""></div> <div class="ax-percent" data-percent=""></div> <div class="ax-success-mark"><i class="ax-iconfont ax-icon-check"></i></div> <div class="ax-error-mark"><i class="ax-iconfont ax-icon-close"></i></div> <div class="ax-error-message" data-errormessage=""></div> </div> <div class="ax-details"> <div class="ax-size" data-size=""></div> <div class="ax-filename" data-name=""></div> </div> </div> </div> </li> </div> -
$path = "upload/"; //上传目录 $extArr = array("jpg", "png", "gif", "txt", "doc","docx","pdf","xsl","xslx"); if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){ $name = $_FILES['file']['name']; $size = $_FILES['file']['size']; if(empty($name)){ echo '请选择要上传的图片'; exit; } $ext = extend($name); if(!in_array($ext,$extArr)){ echo '图片格式错误！'; exit; } if($size>(100*1024)){ echo '图片大小不能超过100KB'; exit; } $image_name = time().rand(100,999).".".$ext; $tmp = $_FILES['file']['tmp_name']; if(move_uploaded_file($tmp, $path.$image_name)){ echo 'ok'; }else{ echo '上传出错了！'; } exit; } //获取文件类型后缀 function extend($file_name){ $extend = pathinfo($file_name); $extend = strtolower($extend["extension"]); return $extend; }
多种风格支持
对于其他表单风格也支持使用ax-fit-tel。可参考登录表单增强手机自适应