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">
                                                          <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/v2.0/public/images/head01.jpg),var(--load-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 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>
      
                                  <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>
                                              
    •     <script src="https://src.axui.cn/v2.0/dist/plugins/dropzone/js/dropzone.min.js" type="text/javascript"></script>
          <!--上传插件JS-->
          <script src="https://src.axui.cn/v2.0/dist/js/axValid.min.js" type="text/javascript"></script>
          <!--校验插件JS-->
          <script src="https://src.axui.cn/v2.0/dist/plugins/range/range.min.js" type="text/javascript"></script>
          <!--滑块插件JS-->
          <script src="https://src.axui.cn/v2.0/dist/js/axDate.min.js" type="text/javascript"></script>
          <!--日期插件JS-->
          //上传
          let myDropzone = new Dropzone("#upload01", {
              url: "ax-upload-script.php",
              previewTemplate: document.querySelector('#template01').innerHTML,
              paramName: "file",
              maxFilesize: 5,
              maxFiles: 5,
              addRemoveLinks: true,
              acceptedFiles: ".jpg,.png,.gif,.txt,.doc,.docx,.xsl,.xslx,.pdf",
          });
          //强度和验证
          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 = "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;
      }