Fit 手机优化表单

常用表单结构

对表单可使用ax-fit-tel包裹,在已经适配基础上增强手机端的显示效果。在手机端效果如下:

  • 表单头和输入框字号从原来的14px变成16px。
  • 表单按钮字号从原来的14px变成16px。
  • 去掉左右间隙,全屏铺满。
  • 输入框将以横线分割。

自适应表单常用到的插件如下:

  • 上传插件:DropZonejs,点击这里查看
  • 验证插件:axValid,点击这里查看
  • 日期插件:axDate,点击这里查看
  • 滑块插件:axRange,点击这里查看
  •                                     <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 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/v2.0/public/images/head01.jpg),var(--load-gif);"></a><span class="ax-form-txt ax-color-des">李创江</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"><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 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"><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 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 ax-val-none"></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。可参考登录表单增强手机自适应