Fit 手机优化表单

常用表单结构

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

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

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

  • 滑块插件:ion.rangeSlider,点击这里查看
  • 上传插件:DropZonejs,点击这里查看
  • 日期插件:MobiScroll,点击这里查看
  • 计数器插件:input-spinner,点击这里查看
  • 验证插件:jquery.validate,点击这里查看
  • <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/examples/images/head01.jpg),url(https://src.axui.cn/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/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。可参考登录表单增强手机自适应