Emulate 模拟手机表单

常用表单结构

针对普通结构的表单可使用ax-emulate包裹,实现全宽的表单风格,模拟移动端显示效果。ax-form-label所定义的表单头在emulate模式下会将宽度自动定义为70px,用户可以根据需要写入style样式以改变宽度。

模拟手机表单常用到的插件如下:

  • 上传插件:DropZonejs,点击这里查看
  • 验证插件:axValid,点击这里查看
  • 日期插件:axDate,点击这里查看
  • 滑块插件:axRange,点击这里查看
姓名:
选择房子:
验证码:
填写完成
获取验证码
头像:
李创江
选择文件:
选择城市:
单选:
复选:
数量:
评论:
滑块:
日期选择:
密码强度:
  •                             <div class="demo">
    
                                    <div class="inner ax-emulate">
    
                                        <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-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-f"></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/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-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 type="file" axUpload>
                                                    </div>
                                                </div>
                                            </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">
                                                        <input type="hidden" axUpload='type:"gallery",url:"ajax/singleAjax.php"'>
                                                    </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 axSelect>
                                                            <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">
                                                            <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">
                                                            <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">
                                                        <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-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="输入数值" axRange value="41" 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" axDate /></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" 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-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>
                                            
  •     //强度和验证
        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;
                                                        }  
                                                    }
                                                
                                                }