Fit 手机优化表单
常用表单结构
对表单可使用ax-fit-tel包裹，在已经适配基础上增强手机端的显示效果。在手机端效果如下：
- 表单头和输入框字号从原来的14px变成16px。
- 表单按钮字号从原来的14px变成16px。
- 去掉左右间隙，全屏铺满。
- 输入框将以横线分割。
自适应表单常用到的插件如下：
-
<div class="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-f"></span> </div> </div> <div class="ax-break ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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 ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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-f"></span>填写完成</div> </div> <a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a> </div> </div> <div class="ax-break ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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" clear></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/v2.0/public/images/head01.jpg);"></a><span class="ax-form-txt ax-color-brief">李创江</span> </div> </div> <div class="ax-break ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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 type="file" axUpload> </div> </div> </div> </div> <div class="ax-break ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-con"> <div class="ax-form-input"> <input type="hidden" axUpload='type:"gallery",url:"../ajax/singleAjax.php"'> </div> </div> </div> </div> <div class="ax-break ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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 axSelect> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆" selected="">重庆</option> </select> </div> </div> </div> </div> <div class="ax-break ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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"><u></u><i>军事类</i></label></div> <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="1" type="radio"><u></u><i>人物志类</i></label></div> <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="2" disabled="" type="radio"><u></u><i>娱乐类</i></label></div> <div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat-x" value="3" checked="" disabled="" type="radio"><u></u><i>其他</i></label></div> </div> </div> </div> </div> </div> <div class="ax-break ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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"><u></u><i>军事类</i></label></div> <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="1" type="checkbox"><u></u><i>人物志类</i></label></div> <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat" value="2" disabled="" type="checkbox"><u></u><i>娱乐类</i></label></div> <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="fix-cat-x" value="3" checked="" disabled="" type="checkbox"><u></u><i>其他</i></label></div> </div> </div> </div> </div> </div> <div class="ax-break ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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-amount" axAmount> <input name="username" placeholder="数量" value="2" type="text"> <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a> <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a> </div> </div> </div> </div> </div> <div class="ax-break ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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" clear></a></span></div> </div> </div> </div> <div class="ax-break ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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="输入数值" axRange value="41" type="text"></div> </div> </div> </div> <div class="ax-break-lg"></div> <div class="ax-break ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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" axDate /></div> </div> </div> </div> <div class="ax-break ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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" id="pass" /></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 ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></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> -
//强度和验证 let passDom = document.querySelector('#pass'), strDom = passDom.closest('form').querySelector('.ax-strength'), passIns = new axValid('#pass', { type: 'strong', format: 'a191#4,', mode: 'newLine', }); passIns.on('update', function (strong, state, text) { if (strong == 1) { strDom.setAttribute('class', 'ax-strength ax-strength-svg ax-weak'); } else if (strong == 2) { strDom.setAttribute('class', 'ax-strength ax-strength-svg ax-medium'); } else if (strong >= 3) { strDom.setAttribute('class', 'ax-strength ax-strength-svg ax-strong'); } }); -
//定义上传目录 $path = "filesDirectory/"; //定义上传文件类型 $extArr = array("jpg", "png", "gif", "txt", "doc", "docx", "pdf", "xsl", "xslx","mp3","mp4"); //定义上传文件大小限制（1MB） $maxSize = 1024 * 1024 * 1024; //获取文件类型后缀 function extend($file_name) { $extend = pathinfo($file_name); $extend = strtolower($extend["extension"]); return $extend; } //获得13位时间戳，与文件的lastModified位数保持一致 function getTimestamp() { list($t1, $t2) = explode(' ', microtime()); return (float)sprintf('%.0f',(floatval($t1)+floatval($t2))*1000); } $timestamp = getTimestamp(); //输出结果 function echoResult($msg='上传出错了！',$time,$flag=false,$url='',$name='') { $object = array('valid' => $flag,'message' => $msg, 'url' => $url, 'name' => $name,'time'=>$time); $result = json_encode($object); echo $result; } if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") { $file = $_FILES[array_shift(array_keys($_FILES))]; $name = $file['name']; $size = $file['size']; $tmp = $file['tmp_name']; //随机文件名 $ext = extend($name); $image_name = time() . rand(100, 999) . "." . $ext; //有必要在服务器端再做一次校验，避免绕开前端校验恶意上传攻击 if (empty($name)) { echoResult('请选择文件！',$timestamp); exit; } if (!in_array($ext, $extArr)) { echoResult('文件格式不对！',$timestamp); exit; } if ($size > $maxSize) { echoResult('文件大小不能超过1MB',$timestamp); exit; } if(!file_exists($path)){ //如果路径错误 echoResult('模拟路径上传成功!',$timestamp,true,'examples/images/uploadtest.jpg',$image_name); exit; }else{ //通过以上校验则上传文件返回文件路径{valid:true,message:'上传成功！',url:'files/xxx.jpg'} if (move_uploaded_file($tmp, $path . $image_name)) { $url = 'ajax/'.$path . $image_name; echoResult('上传成功!',$timestamp,true,$url,$image_name); exit; } } }
多种风格支持
对于其他表单风格也支持使用ax-fit-tel。可参考登录表单增强手机自适应