AddForm 创建表单

简介

创建表单的方式有两种,一种是手动创建表单域(包括文本域、文件域、下拉菜单等);一种是通过插件以js的方式创建表单域。

提交表单的方式也大致分两种,一种是使用form自身的action参数跳转页面提交;另一种是使用ajax异步提交。当然异步提交又分get和post,或者按是否构建new FormData划分。

本页面将讲解在AXUI框架下如何创建表单和提交表单。

原始表单

form中所有的文本域都是手动创建,不使用任何插件,直接提交到服务器动态页面。需要注意两点:

1、对于checkboxselect-multiple需要对name使用[]作为后缀才能提交所有值到服务器,类似name="hobby[]",否则只能提交第一个值。

2、如果需要提交file文件,method需要为post,另外enctype属性需要为multipart/form-data

姓名:
性别:
爱好:
生日:
座右铭:
综合得分:
年龄:
所在城市:
科目:
头像:
简介:
  •                                                 <form action="ajax/commform.php" target="_blank" method="get" enctype="application/x-www-form-urlencoded">
                                                                
                                                        <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>
                                                            </div>
                                                        </div>
                        
                                                        <div class="ax-break-md"></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">
                                                                        <label class="ax-radio"><input name="gender" value="male" type="radio"><span>男</span></label>
                                                                        <label class="ax-radio"><input name="gender" value="female" type="radio"><span>女</span></label>
                                                                        <label class="ax-radio"><input name="gender" value="other" type="radio"><span>其他</span></label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                        
                                                        <div class="ax-break-md"></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">
                                                                        <label class="ax-checkbox"><input name="hobby[]" value="read" type="checkbox"><span>读书</span></label>
                                                                        <label class="ax-checkbox"><input name="hobby[]" value="travel" type="checkbox"><span>旅游</span></label>
                                                                        <label class="ax-checkbox"><input name="hobby[]" value="fitness" type="checkbox"><span>健身</span></label>
                                                                        <label class="ax-checkbox"><input name="hobby[]" value="game" type="checkbox"><span>游戏</span></label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                         
                                                        <div class="ax-break-md"></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="birthday" placeholder="选择日期" type="date" class="ax-input"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                        
                                                        <div class="ax-break-md"></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="motto" placeholder="请输入..." type="search" class="ax-input"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                         
                                                        <div class="ax-break"></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="score" type="range" value="80"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                        
                                                        <div class="ax-break"></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="age" placeholder="请输入..." value="18" type="number" class="ax-input"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                        
                                                        <div class="ax-break-md"></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 name="city">
                                                                            <option value="">请选择..</option>
                                                                            <option value="Beijing">北京</option>
                                                                            <option value="Shanghai">上海</option>
                                                                            <option value="Chongqing">重庆</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                         
                                                        <div class="ax-break-md"></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 name="subject[]" multiple>
                                                                            <option value="">请选择..</option>
                                                                            <option value="chinese">语文</option>
                                                                            <option value="mathematics">数学</option>
                                                                            <option value="physics">物理</option>
                                                                            <option value="chemistry">化学</option>
                                                                            <option value="music">音乐</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                        
                                                        <div class="ax-break"></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="avatar" type="file">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                         
                                                        <div class="ax-break"></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">
                                                                        <textarea  name="introduce" placeholder="请输入..."></textarea>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                        
                                                        <div class="ax-break"></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="submit" value="提交" class="ax-btn ax-primary">
                                                                        <input type="reset" value="重置" class="ax-btn">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                    </form>
                                            
  •                                             <?php
                                                //hobby和subject传来的可能是数组
                                                if(empty($_GET["hobby"])) {
                                                    $hobby = '';
                                                }else{
                                                    if(is_array($_GET["hobby"])){
                                                        $hobby = join(',',$_GET["hobby"]);
                                                    }else{
                                                        $hobby = $_GET["hobby"];
                                                    }
                                                }
                                                if(empty($_GET["subject"])) {
                                                    $subject = '';
                                                }else{
                                                    if(is_array($_GET["subject"])){
                                                        $subject = join(',',$_GET["subject"]);
                                                    }else{
                                                        $subject = $_GET["subject"];
                                                    }
                                                }
                                                echo "提交成功!

    姓名:".$_GET["username"] ."
    性别:".$_GET["gender"] ."
    爱好:".$hobby ."
    生日:".$_GET["birthday"] ."
    座右铭:".$_GET["motto"] ."
    综合得分:".$_GET["score"] ."
    年龄:".$_GET["age"] ."
    所在城市:".$_GET["city"] ."
    科目:".$subject ."
    头像:".$_GET["avatar"] ."
    简介:".$_GET["introduce"] ; ?>

原生表单域提交文件必须使用postmultipart/form-data参数,而且如果是多选需要给name加上[]后缀,举例如下:

单选头像:
多选文件:
  •                                             <form action="ajax/commfile.php" target="_blank" method="post" enctype="multipart/form-data">
    
                                                    <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="avatar" type="file">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
            
                                                    <div class="ax-break"></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="documentation[]" type="file" multiple>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
            
            
                                                    <div class="ax-break"></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="submit" value="提交" class="ax-btn ax-primary">
                                                                    <input type="reset" value="重置" class="ax-btn">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
            
                                                </form>
                                                   
                                            
  • <?php
    	echo "<pre>";
    	print_r($_FILES);
    	echo "<pre>";
    ?>
                                            

混合插件的表单

form中所有的文本域都可以手动创建,如果是为了方便控制文本域,可以使用插件来创建,目前可用的表单插件如下:

  • axInput:可创建大部分的input和textarea,详见这里
  • axCheckbox:可创建checkbox和radio,详见这里
  • axRange:可创建range滑块范围选择,详见这里
  • axSelect:可创建select下拉单选和多选,详见这里
  • axDate:可创建datepicker日期和时间,详见这里
  • axAmount:可创建amount步进,详见这里
  • axUpload:可创建步upload文件上传,详见这里
姓名:
性别:
爱好:
生日:
座右铭:
综合得分:
年龄:
所在城市:
科目:
头像:
简介:
  •                                         <form action="ajax/commform.php" target="_blank" method="get" enctype="application/x-www-form-urlencoded">
    
                                                <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>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break-md"></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">
                                                                <label class="ax-radio"><input name="gender" value="male" type="radio"><span>男</span></label>
                                                                <label class="ax-radio"><input name="gender" value="female" type="radio"><span>女</span></label>
                                                                <label class="ax-radio"><input name="gender" value="other" type="radio"><span>其他</span></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break-md"></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="hobby" type="hidden" axCheckbox='children:[{value:"read",label:"读书"},{value:"fitness",label:"健身"},{value:"travel",label:"旅游"},{value:"game",label:"游戏"}]'>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
        
                                                <div class="ax-break-md"></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="birthday" placeholder="选择日期" type="text" axDate></div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break"></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" id="limit">
                                                                <input name="motto" placeholder="少于10个字..." type="text" axInput='limit:10,clearShow:true'>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break"></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="score" axRange value="80"></div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break"></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="age" placeholder="请输入..." value="18" 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-md"></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 name="city" axSelect>
                                                                    <option value="">请选择..</option>
                                                                    <option value="Beijing">北京</option>
                                                                    <option value="Shanghai">上海</option>
                                                                    <option value="Chongqing">重庆</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break-md"></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 name="subject[]" multiple axSelect>
                                                                    <option value="">请选择..</option>
                                                                    <option value="chinese">语文</option>
                                                                    <option value="mathematics">数学</option>
                                                                    <option value="physics">物理</option>
                                                                    <option value="chemistry">化学</option>
                                                                    <option value="music">音乐</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break-md"></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="hidden" name="avatar" axUpload='type:"gallery",columns:2,url:"ajax/singleAjax.php"'>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break"></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">
                                                                <textarea name="introduce" placeholder="请输入..."></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break"></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="submit" value="提交" class="ax-btn ax-primary">
                                                                <input type="reset" value="重置" class="ax-btn">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                            </form>
                                            
  •                                             <?php
                                                //hobby和subject传来的是数组
                                                //hobby和subject传来的可能是数组
                                                if(empty($_GET["hobby"])) {
                                                    $hobby = '';
                                                }else{
                                                    if(is_array($_GET["hobby"])){
                                                        $hobby = join(',',$_GET["hobby"]);
                                                    }else{
                                                        $hobby = $_GET["hobby"];
                                                    }
                                                }
                                                if(empty($_GET["subject"])) {
                                                    $subject = '';
                                                }else{
                                                    if(is_array($_GET["subject"])){
                                                        $subject = join(',',$_GET["subject"]);
                                                    }else{
                                                        $subject = $_GET["subject"];
                                                    }
                                                }
                                                echo "提交成功!

    姓名:".$_GET["username"] ."
    性别:".$_GET["gender"] ."
    爱好:".$hobby ."
    生日:".$_GET["birthday"] ."
    座右铭:".$_GET["motto"] ."
    综合得分:".$_GET["score"] ."
    年龄:".$_GET["age"] ."
    所在城市:".$_GET["city"] ."
    科目:".$subject ."
    头像:".$_GET["avatar"] ."
    简介:".$_GET["introduce"] ; ?>

异步原始表单

手动创建的原始表单使用异步提交需要做两件事:

第一步:将表单输入元素的值全部获取

第二步:使用axAjax函数将值发送到服务器

第三步:使用a标签或其他非submit/button标签提交表单

需要注意的是axAjax接收的数据类型有三种:一是以&拼接的字符串, 二是类似{name:'',age:''}的json对象,三是FormData类型数据。

表单值序列化需要用到axSerialize函数,该函数参数说明如下:

  • elem:将要序列化的form节点
  • type:序列化之后的数据类型,可以填string、json或array,类型举例如下:
    • string:&name=Lily&age=18&city=Beijing
    • json:{name:'Lily',age:18,city:'Beijing'}
    • array:[{name:'name',value:'Lily'},{name:'age',value:18},{name:'city',value:'Beijing'},]
  • separator:多值转成字符串之后的分隔符,默认是英文逗号
姓名:
性别:
爱好:
生日:
座右铭:
综合得分:
年龄:
所在城市:
科目:
头像:
简介:
  •                                         <form id="commajax">
    
                                                <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>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break-md"></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">
                                                                <label class="ax-radio"><input name="gender" value="male" type="radio"><span>男</span></label>
                                                                <label class="ax-radio"><input name="gender" value="female" type="radio"><span>女</span></label>
                                                                <label class="ax-radio"><input name="gender" value="other" type="radio"><span>其他</span></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break-md"></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">
                                                                <label class="ax-checkbox"><input name="hobby" value="read" type="checkbox"><span>读书</span></label>
                                                                <label class="ax-checkbox"><input name="hobby" value="travel" type="checkbox"><span>旅游</span></label>
                                                                <label class="ax-checkbox"><input name="hobby" value="fitness" type="checkbox"><span>健身</span></label>
                                                                <label class="ax-checkbox"><input name="hobby" value="game" type="checkbox"><span>游戏</span></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break-md"></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="birthday" placeholder="选择日期" type="date" class="ax-input"></div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break-md"></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="motto" placeholder="请输入..." type="search" class="ax-input"></div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break"></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="score" type="range" value="80"></div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break"></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="age" placeholder="请输入..." value="18" type="number" class="ax-input"></div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break-md"></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 name="city">
                                                                    <option value="">请选择..</option>
                                                                    <option value="Beijing">北京</option>
                                                                    <option value="Shanghai">上海</option>
                                                                    <option value="Chongqing">重庆</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break-md"></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 name="subject" multiple>
                                                                    <option value="">请选择..</option>
                                                                    <option value="chinese">语文</option>
                                                                    <option value="mathematics">数学</option>
                                                                    <option value="physics">物理</option>
                                                                    <option value="chemistry">化学</option>
                                                                    <option value="music">音乐</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break"></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="avatar" type="file">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break"></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">
                                                                <textarea name="introduce" placeholder="请输入..."></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break"></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">
                                                                <a href="###" class="ax-btn ax-primary">提交</a>
                                                                <input type="reset" value="重置" class="ax-btn">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                            </form>
                                            
  •             let commajax = document.querySelector('#commajax'),
                commBtn = commajax.querySelector('.ax-btn');
                commBtn.onclick = ()=>{
                    //默认使用&拼接字符串,如此type使用get和post都可以
                    axAjax({
                        url:'ajax/ajaxform.php',
                        //type:'get',
                        data:axSerialize(commajax),
                        success:(content)=>{
                            console.log(content);
                        }
                    });
                }
                                            
  • <?php
    if($_SERVER["REQUEST_METHOD"] =="GET") {
    	$TYPE = $_GET;
    } elseif($_SERVER["REQUEST_METHOD"] == "POST") {
    	$TYPE = $_POST;
    }
    echo "提交成功!
    姓名:".$TYPE["username"]."
    性别:".$TYPE["gender"]."
    爱好:".$TYPE["hobby"]."
    生日:".$TYPE["birthday"]."
    座右铭:".$TYPE["motto"]."
    综合得分:".$TYPE["score"]."
    年龄:".$TYPE["age"]."
    所在城市:".$TYPE["city"]."
    科目:".$TYPE["subject"]."
    头像:".$TYPE["avatar"]."
    简介:".$TYPE["introduce"]
    ;
    ?>
                                            

如果原始表单需要发送file文件,此时应该构建FormData数据,以json或数组的方式序列化表单值append到FormData里,以post的方式发送数据。

姓名:
性别:
爱好:
生日:
座右铭:
综合得分:
年龄:
所在城市:
科目:
头像:
简介:
  •                                     <form id="fileajax">
    
                                            <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>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></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">
                                                            <label class="ax-radio"><input name="gender" value="male" type="radio"><span>男</span></label>
                                                            <label class="ax-radio"><input name="gender" value="female" type="radio"><span>女</span></label>
                                                            <label class="ax-radio"><input name="gender" value="other" type="radio"><span>其他</span></label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></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">
                                                            <label class="ax-checkbox"><input name="hobby" value="read" type="checkbox"><span>读书</span></label>
                                                            <label class="ax-checkbox"><input name="hobby" value="travel" type="checkbox"><span>旅游</span></label>
                                                            <label class="ax-checkbox"><input name="hobby" value="fitness" type="checkbox"><span>健身</span></label>
                                                            <label class="ax-checkbox"><input name="hobby" value="game" type="checkbox"><span>游戏</span></label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></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="birthday" placeholder="选择日期" type="date" class="ax-input"></div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></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="motto" placeholder="请输入..." type="search" class="ax-input"></div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break"></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="score" type="range" value="80"></div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break"></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="age" placeholder="请输入..." value="18" type="number" class="ax-input"></div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></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 name="city">
                                                                <option value="">请选择..</option>
                                                                <option value="Beijing">北京</option>
                                                                <option value="Shanghai">上海</option>
                                                                <option value="Chongqing">重庆</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></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 name="subject" multiple>
                                                                <option value="">请选择..</option>
                                                                <option value="chinese">语文</option>
                                                                <option value="mathematics">数学</option>
                                                                <option value="physics">物理</option>
                                                                <option value="chemistry">化学</option>
                                                                <option value="music">音乐</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break"></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="avatar" type="file">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break"></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">
                                                            <textarea name="introduce" placeholder="请输入..."></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break"></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">
                                                            <a href="###"  class="ax-btn ax-primary">提交</a>
                                                            <input type="reset" value="重置" class="ax-btn">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                        </form>
                                            
  •                                             let fileajax = document.querySelector('#fileajax'),
                                                fileBtn = fileajax.querySelector('.ax-btn');
                                                fileBtn.onclick = ()=>{
                                                    //表单值以array序列化,追加进FormData,以post方式提交表单
                                                    let data = new FormData;
                                                    axSerialize(fileajax,'array').forEach(i=>{
                                                        data.append(i.name,i.value);
                                                    });
                                                    axAjax({
                                                        url:'ajax/ajaxform.php',
                                                        data:data,
                                                        success:(content)=>{
                                                            console.log(content);
                                                        }
                                                    });
                                                    //在php动态页面,可以以$_FILES获取文件
                                                }
                                            
  • <?php
    if($_SERVER["REQUEST_METHOD"] =="GET") {
    	$TYPE = $_GET;
    } elseif($_SERVER["REQUEST_METHOD"] == "POST") {
    	$TYPE = $_POST;
    }
    echo "提交成功!
    姓名:".$TYPE["username"]."
    性别:".$TYPE["gender"]."
    爱好:".$TYPE["hobby"]."
    生日:".$TYPE["birthday"]."
    座右铭:".$TYPE["motto"]."
    综合得分:".$TYPE["score"]."
    年龄:".$TYPE["age"]."
    所在城市:".$TYPE["city"]."
    科目:".$TYPE["subject"]."
    头像:".$TYPE["avatar"]."
    简介:".$TYPE["introduce"]
    ;
    ?>
                                            

异步插件表单

表单的诸多元素均可用插件创建,插件所生成的值会存在文本域或隐藏域中:以字符串序列化表单后可用普通的get方式提交。

姓名:
性别:
爱好:
生日:
座右铭:
综合得分:
年龄:
所在城市:
科目:
头像:
简介:
  •                                     <form id="pluginsajax">
    
                                            <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>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></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">
                                                            <label class="ax-radio"><input name="gender" value="male" type="radio"><span>男</span></label>
                                                            <label class="ax-radio"><input name="gender" value="female" type="radio"><span>女</span></label>
                                                            <label class="ax-radio"><input name="gender" value="other" type="radio"><span>其他</span></label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></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">
                                                            <label class="ax-checkbox"><input name="hobby" value="read" type="checkbox"><span>读书</span></label>
                                                            <label class="ax-checkbox"><input name="hobby" value="travel" type="checkbox"><span>旅游</span></label>
                                                            <label class="ax-checkbox"><input name="hobby" value="fitness" type="checkbox"><span>健身</span></label>
                                                            <label class="ax-checkbox"><input name="hobby" value="game" type="checkbox"><span>游戏</span></label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></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="birthday" placeholder="选择日期" type="date" class="ax-input"></div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></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="motto" placeholder="请输入..." type="search" class="ax-input"></div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break"></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="score" type="range" value="80"></div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break"></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="age" placeholder="请输入..." value="18" type="number" class="ax-input"></div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></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 name="city">
                                                                <option value="">请选择..</option>
                                                                <option value="Beijing">北京</option>
                                                                <option value="Shanghai">上海</option>
                                                                <option value="Chongqing">重庆</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></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 name="subject" multiple>
                                                                <option value="">请选择..</option>
                                                                <option value="chinese">语文</option>
                                                                <option value="mathematics">数学</option>
                                                                <option value="physics">物理</option>
                                                                <option value="chemistry">化学</option>
                                                                <option value="music">音乐</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break"></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="avatar" type="file">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break"></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">
                                                            <textarea name="introduce" placeholder="请输入..."></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break"></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">
                                                            <a href="###"  class="ax-btn ax-primary">提交</a>
                                                            <input type="reset" value="重置" class="ax-btn">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
    
                                        </form>
                                            
  •                                         let pluginsajax = document.querySelector('#pluginsajax'),
                                                pluginsBtn = pluginsajax.querySelector('.ax-btn');
                                            pluginsBtn.onclick = () => {
                                                //插件已经将值写入input了,使用字符串get方式提交即可
                                                axAjax({
                                                    url: 'ajax/ajaxform.php',
                                                    type: 'get',
                                                    data: axSerialize(pluginsajax),
                                                    success: (content) => {
                                                        console.log(content);
                                                    }
                                                });
                                            }
                                            
  • <?php
    if($_SERVER["REQUEST_METHOD"] =="GET") {
    	$TYPE = $_GET;
    } elseif($_SERVER["REQUEST_METHOD"] == "POST") {
    	$TYPE = $_POST;
    }
    echo "提交成功!
    姓名:".$TYPE["username"]."
    性别:".$TYPE["gender"]."
    爱好:".$TYPE["hobby"]."
    生日:".$TYPE["birthday"]."
    座右铭:".$TYPE["motto"]."
    综合得分:".$TYPE["score"]."
    年龄:".$TYPE["age"]."
    所在城市:".$TYPE["city"]."
    科目:".$TYPE["subject"]."
    头像:".$TYPE["avatar"]."
    简介:".$TYPE["introduce"]
    ;
    ?>
                                            

axForm自动创建表单

我们通常在页面直接写上form表单和input控件,但是对于职业前端开发者而言并不是很友好,特别是往其他插件创建表单或临时使用一个或几个表单域,几行js创建一个表单是很有必要的。本框架根据自身的表单元素特点开发了可迅速创建表单的axForm插件。

特点

  • 1、支持所有原生表单域,包括input、textarea和select
  • 2、支持本框架的所有表单相关插件,包括axInput、axRange、axSelect、axDate、axAmount、axUpload和axCheckbox
  • 3、支持创建其他表单内容,包括button、a和html
  • 3、支持同步提交表单和异步提交表单
  • 4、支持表单填充和数据导出
  • 5、支持表单校验和回调函数
  • 6、支持三种自适应布局
  • 7、支持表单域横向和纵向混合排列
除了type=text之外的行输入表单域请追加ax-input样式;如果是a或button类型,value值即是其文本;如果是html类型,value值即是其文本。
  •                                             <div id="all"></div>
                                            
  •                                             new axForm('#all', {
                                                    rows: [
                                                        {
                                                            type: 'text',
                                                            name: 'tx',
                                                            title: {
                                                                show: true,
                                                                text: '普通文本',
                                                            },
                                                        },
                                                        {
                                                            type: 'password',
                                                            name: 'pw',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '密码',
                                                            },
                                                        },
                                                        {
                                                            type: 'number',
                                                            name: 'nb',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '数字',
                                                            },
                                                        },
                                                        {
                                                            type: 'select',
                                                            name: 'se',
                                                            title: {
                                                                show: true,
                                                                text: '单选',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '选项一',
                                                                    value: 'val01',
                                                                },
                                                                {
                                                                    label: '选项二',
                                                                    value: 'val02',
                                                                },
                                                                {
                                                                    label: '选项三',
                                                                    value: 'val03',
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            type: 'select',
                                                            name: 'sm',
                                                            props: { multiple: '' },
                                                            title: {
                                                                show: true,
                                                                text: '多选',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '选项一',
                                                                    value: 'val01',
                                                                },
                                                                {
                                                                    label: '选项二',
                                                                    value: 'val02',
                                                                },
                                                                {
                                                                    label: '选项三',
                                                                    value: 'val03',
                                                                },
                                                                {
                                                                    label: '选项四',
                                                                    value: 'val04',
                                                                },
                                                                {
                                                                    label: '选项五',
                                                                    value: 'val05',
                                                                },
                                                                {
                                                                    label: '选项六',
                                                                    value: 'val06',
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            type: 'file',
                                                            name: 'fl',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '单选文件',
                                                            },
                                                        },
                                                        {
                                                            type: 'file',
                                                            name: 'fm',
                                                            className: 'ax-input',
                                                            props: { multiple: '' },
                                                            title: {
                                                                show: true,
                                                                text: '多选文件',
                                                            },
                                                        },
                                                        {
                                                            type: 'color',
                                                            name: 'cl',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '颜色',
                                                            },
                                                        },
                                                        {
                                                            type: 'range',
                                                            name: 'rg',
                                                            title: {
                                                                show: true,
                                                                text: '范围',
                                                            },
                                                        },
                                                        {
                                                            type: 'date',
                                                            name: 'de',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '日期',
                                                            },
                                                        },
                                                        {
                                                            type: 'datetime',
                                                            name: 'dt',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '时间',
                                                            },
                                                        },
                                                        {
                                                            type: 'time',
                                                            name: 'tm',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '时分秒',
                                                            },
                                                        },
                                                        {
                                                            type: 'month',
                                                            name: 'mt',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '月份',
                                                            },
                                                        },
                                                        {
                                                            type: 'week',
                                                            name: 'wk',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '第几周',
                                                            },
                                                        },
                                                        {
                                                            type: 'datetime-local',
                                                            name: 'tl',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '当地时间',
                                                            },
                                                        },
                                                        {
                                                            type: 'tel',
                                                            name: 'tel',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '手机号',
                                                            },
                                                        },
                                                        {
                                                            type: 'email',
                                                            name: 'em',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '邮箱',
                                                            },
                                                        },
                                                        {
                                                            type: 'url',
                                                            name: 'url',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '链接',
                                                            },
                                                        },
                                                        {
                                                            type: 'search',
                                                            name: 'sc',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '搜索',
                                                            },
                                                        },
                                                        {
                                                            type: 'textarea',
                                                            name: 'ta',
                                                            title: {
                                                                show: true,
                                                                text: '多行文本',
                                                            },
                                                        },
                                                        {
                                                            type: 'radio',
                                                            name: 'rd',
                                                            title: {
                                                                show: true,
                                                                text: '单选',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '选项一',
                                                                    value: 'val01',
                                                                },
                                                                {
                                                                    label: '选项二',
                                                                    value: 'val02',
                                                                },
                                                                {
                                                                    label: '选项三',
                                                                    value: 'val03',
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            type: 'checkbox',
                                                            name: 'ck',
                                                            title: {
                                                                show: true,
                                                                text: '多选',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '选项一',
                                                                    value: 'val01',
                                                                },
                                                                {
                                                                    label: '选项二',
                                                                    value: 'val02',
                                                                },
                                                                {
                                                                    label: '选项三',
                                                                    value: 'val03',
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            title: {
                                                                show: true,
                                                                text: 'submit和reset',
                                                            },
                                                            cols: [
                                                                {
                                                                    type: 'submit',
                                                                    value: '提交',
                                                                    className: 'ax-btn ax-primary',
                                                                    suffix: '',
                                                                },
                                                                {
                                                                    type: 'reset',
                                                                    value: '重置',
                                                                    className: 'ax-btn',
                                                                },
                                                            ]
                                                        },
                                                        {
                                                            title: {
                                                                show: true,
                                                                text: 'a和button',
                                                            },
                                                            cols: [
                                                                {
                                                                    type: 'a',
                                                                    value: 'A按钮',
                                                                    className: 'ax-btn ',
                                                                    props: { href: '###' },
                                                                    suffix: '',
                                                                },
                                                                {
                                                                    type: 'button',
                                                                    value: 'BUTTON按钮',
                                                                    className: 'ax-btn',
                                                                },
                                                            ]
                                                        },
                                                        {
                                                            type: 'html',
                                                            value: '中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。',
                                                            title: {
                                                                show: true,
                                                                text: 'html',
                                                            },
                                                        },
                                                    ]
                                    
                                                });
                                            

自动创建插件表单

每一个表单域都支持callback回调函数,回调函数支持一个参数,该参数是一个对象:

  • name:表单域名称
  • value:表单域值
  • parent:表单域父层节点
  • field:表单域本身节点

在回调函数中对field应用插件即可将该表单域插件化。

本实例演示axInput、axRange、axSelect、axDate、axAmount、axUpload和axCheckbox在axForm里的用法。axUpload和axCheckbox的表单域请用type=hidden类型,以隐藏域接收插件返回的字符串。

在axForm中使用axCheckbox之后,复选的input本身的name会自动带上_ax_alt后缀以区分将要赋值的隐藏域name值。

  •                                             <div id="pluginsfield"></div>
                                            
  •                                             new axForm('#pluginsfield', {
                                                    onInit: function () {
                                                        console.log(this.output)
                                                    },
                                                    rows: [
                                                        {
                                                            type: 'text',
                                                            name: 'te',
                                                            placeholder: '请输入...',
                                                            title: {
                                                                show: true,
                                                                text: '单行输入限制',
                                                            },
                                                            callback: (obj) => {
                                                                new axInput(obj.field, {
                                                                    clearShow: true,
                                                                    limit: 10,
                                                                });
                                                            }
                                    
                                                        },
                                                        {
                                                            type: 'textarea',
                                                            name: 'ta',
                                                            placeholder: '请输入...',
                                                            title: {
                                                                show: true,
                                                                text: '多行输入限制',
                                                            },
                                                            callback: (obj) => {
                                                                new axInput(obj.field, {
                                                                    typ: 'textarea',
                                                                    clearShow: true,
                                                                    limit: 10,
                                                                });
                                                            }
                                                        },
                                                        {
                                                            type: 'text',
                                                            name: 'am',
                                                            title: {
                                                                show: true,
                                                                text: '步进',
                                                            },
                                                            callback: (obj) => {
                                                                new axAmount(obj.field);
                                                            }
                                    
                                                        },
                                                        {
                                                            type: 'text',
                                                            name: 'rg',
                                                            title: {
                                                                show: true,
                                                                text: '范围',
                                                            },
                                                            callback: (obj) => {
                                                                new axRange(obj.field);
                                                            }
                                    
                                                        },
                                                        {
                                                            type: 'text',
                                                            name: 'dt',
                                                            placeholder: '请输入...',
                                                            title: {
                                                                show: true,
                                                                text: '日期',
                                                            },
                                                            callback: (obj) => {
                                                                new axDate(obj.field);
                                                            }
                                    
                                                        },
                                                        {
                                                            type: 'hidden',
                                                            name: 'ul',
                                                            title: {
                                                                show: true,
                                                                text: '上传文件',
                                                            },
                                                            callback: (obj) => {
                                                                 new axUpload(obj.field, {
                                                                    type: 'gallery',
                                                                    url: 'ajax/singleAjax.php',
                                                                    columns: 2,
                                                                })
                                                            }
                                                        },
                                                        {
                                                            type: 'hidden',
                                                            name: 'rd',
                                                            title: {
                                                                show: true,
                                                                text: '单选',
                                                            },
                                                            callback: (obj) => {
                                                                new axCheckbox(obj.field, {
                                                                    type: 'radio',
                                                                    children: [
                                                                        {
                                                                            label: '选项一',
                                                                            value: 'val01',
                                                                        },
                                                                        {
                                                                            label: '选项二',
                                                                            value: 'val02',
                                                                        },
                                                                        {
                                                                            label: '选项三',
                                                                            value: 'val03',
                                                                        }
                                    
                                                                    ]
                                                                })
                                                            }
                                                        },
                                                        {
                                                            type: 'hidden',
                                                            name: 'ck',
                                                            title: {
                                                                show: true,
                                                                text: '多选',
                                                            },
                                                            callback: (obj) => {
                                                                new axCheckbox(obj.field, {
                                                                    children: [
                                                                        {
                                                                            label: '选项一',
                                                                            value: 'val01',
                                                                        },
                                                                        {
                                                                            label: '选项二',
                                                                            value: 'val02',
                                                                        },
                                                                        {
                                                                            label: '选项三',
                                                                            value: 'val03',
                                                                        },
                                                                        {
                                                                            label: '选项四',
                                                                            value: 'val04',
                                                                        },
                                                                        {
                                                                            label: '选项五',
                                                                            value: 'val05',
                                                                        },
                                                                        {
                                                                            label: '选项六',
                                                                            value: 'val06',
                                                                        }
                                    
                                                                    ]
                                                                })
                                                            }
                                                        },
                                                        {
                                                            type: 'select',
                                                            name: 'sl',
                                                            title: {
                                                                show: true,
                                                                text: '下拉单选',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '选项一',
                                                                    value: 'val01',
                                                                },
                                                                {
                                                                    label: '选项二',
                                                                    value: 'val02',
                                                                },
                                                                {
                                                                    label: '选项三',
                                                                    value: 'val03',
                                                                },
                                                                {
                                                                    label: '选项四',
                                                                    value: 'val04',
                                                                },
                                                                {
                                                                    label: '选项五',
                                                                    value: 'val05',
                                                                },
                                                                {
                                                                    label: '选项六',
                                                                    value: 'val06',
                                                                }
                                    
                                                            ],
                                                            callback: (obj) => {
                                                                new axSelect(obj.field);
                                                            }
                                                        },
                                                        {
                                                            type: 'select',
                                                            name: 'sm',
                                                            props: { multiple: '' },
                                                            title: {
                                                                show: true,
                                                                text: '下拉多选',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '选项一',
                                                                    value: 'val01',
                                                                },
                                                                {
                                                                    label: '选项二',
                                                                    value: 'val02',
                                                                },
                                                                {
                                                                    label: '选项三',
                                                                    value: 'val03',
                                                                },
                                                                {
                                                                    label: '选项四',
                                                                    value: 'val04',
                                                                },
                                                                {
                                                                    label: '选项五',
                                                                    value: 'val05',
                                                                },
                                                                {
                                                                    label: '选项六',
                                                                    value: 'val06',
                                                                }
                                    
                                                            ],
                                                            callback: (obj) => {
                                                                new axSelect(obj.field);
                                                            }
                                                        },
                                                        {
                                                            title: {
                                                                show: true,
                                                                text: 'submit和reset',
                                                            },
                                                            cols: [
                                                                {
                                                                    type: 'submit',
                                                                    value: '提交',
                                                                    className: 'ax-btn ax-primary',
                                                                    suffix: '',
                                                                },
                                                                {
                                                                    type: 'reset',
                                                                    value: '重置',
                                                                    className: 'ax-btn',
                                                                },
                                                            ]
                                                        },
                                                    ]
                                                });
                                                
                                            

了解参数

在axForm创建一个表单域可使用的参数有如下:

  • style:表单html结构风格,默认为空,可选择fit(自适应移动终端)或emulate
  • className:追加表单的样式名
  • props:表单的其他属性,比如props:{action:'',method:'',enctype:''}
  • rows:表单域section数组,每一项的参数如下:
    • type:表单域类型,可使用的类型有:select、textarea、checkbox、radio、text、hidden、button、a、html还有其他(date、datetime、url等)
    • name:表单域name名称,必填项
    • value:初始值
    • placeholder:表单域提示,input和textarea可用
    • className:表单域的样式,比如className:'myform youform'
    • readonly:设置表单域可读状态,默认false,可选择true
    • disabled:设置表单域禁用状态,默认false,可选择true
    • props:表单域的其他属性,比如props:{multiple:'',size:'md'}
    • before:表单域section之前的html内容,html格式
    • after:表单域section之后的html内容,html格式
    • callback:回调函数,支持参数item,是一个对象有属性:name、value、field(表单域节点自身)和parent(父节点)
    • display:一行多列或一行多子元素时表单域的布局方式,可选择grid或flex
    • columns:在display:grid时一行几列,数字类型,默认四列
    • gap:在display:grid时列之间的间距,写法如下:
      • gap:'1.4rem 1.4rem',表示横纵间距都是1.4rem
      • gap:'1.4rem 0',表示横向间距是1.4rem,纵向间距是0
      • gap:'0 1.4rem',表示横向间距是0,纵向间距是1.4rem
    • tools:在section右侧的工具,html格式,可以是注释也可以是一个按钮
    • title:在section左侧的标题,有两个参数:
      • show:是否显示标题,默认true显示,可选择false不显示
      • text:标题文字
    • options:表单域的子选项,特指radio、checkbox和select类型,是一个数组,数组每一项参数如下:
      • label:选项的文字
      • value:选项值
      • checked:是否已经选中,默认false不选中,可选择true选中状态
      • disabled:是否禁用,默认false不禁用,可选择true禁用
      • callback:选项的回调函数,支持两个参数,field选项节点自身和opt选项参数
    • cols:一行section的列数据,是一个数组,每一项的参数如下:
      • type:同上
      • name:同上
      • value:同上
      • placeholder:同上
      • className:同上
      • readonly:同上
      • disabled:同上
      • props:同上
      • prefix:前缀,以便于让列与列之间分隔开,html格式
      • suffix:后缀,以便于让列与列之间分隔开,html格式
      • options:子项,同上,子项的子项也同上
      • callback:同上

以下实例展示参数组合效果。

三种布局

通过style参数可设置html结构风格,三种风格各有特点。该参数默认为空,即按默认布局,可选择emulatefit布局。

默认布局,不改变既有显示效果,基本适配移动端

emulate布局,模拟移动端布局,不管屏幕多大都是相同布局

fit布局,自适应移动终端变形布局(将浏览器缩小至手机大小)

  •                                     <p>默认布局,不改变既有显示效果</p>
                                        <div id="style01"></div>
                                        <div class="ax-break"></div>
                                        <p>emulate布局,不管屏幕多大都是相同布局</p>
                                        <div id="style02"></div>
                                        <div class="ax-break"></div>
                                        <p>fit布局,自适应移动终端(将浏览器缩小至手机大小)</p>
                                        <div id="style03"></div>
                                            
  •                                             new axForm('#style01', {
                                                    rows: [
                                                        {
                                                            type: 'text',
                                                            placeholder: '请输入...',
                                                            title: {
                                                                show: true,
                                                                text: '姓名:',
                                                            },
                                                        },
                                                        {
                                                            type: 'text',
                                                            placeholder: '请输入...',
                                                            tools:`获取验证码`,
                                                            title: {
                                                                show: true,
                                                                text: '手机号:',
                                                            },
                                                        },
                                                        {
                                                            type: 'text',
                                                            placeholder: '请输入...',
                                                            tools:``,
                                                            title: {
                                                                show: true,
                                                                text: '年龄:',
                                                            },
                                                        },
                                                    ]
                                                });
                                                new axForm('#style02', {
                                                    style:'emulate',
                                                    rows: [
                                                        {
                                                            type: 'text',
                                                            placeholder: '请输入...',
                                                            title: {
                                                                show: true,
                                                                text: '姓名:',
                                                            },
                                                        },
                                                        {
                                                            type: 'text',
                                                            placeholder: '请输入...',
                                                            tools:`获取验证码`,
                                                            title: {
                                                                show: true,
                                                                text: '手机号:',
                                                            },
                                                        },
                                                        {
                                                            type: 'text',
                                                            placeholder: '请输入...',
                                                            tools:``,
                                                            title: {
                                                                show: true,
                                                                text: '年龄:',
                                                            },
                                                        },
                                                    ]
                                                });
                                                new axForm('#style03', {
                                                    style:'fit',
                                                    rows: [
                                                        {
                                                            type: 'text',
                                                            placeholder: '请输入...',
                                                            title: {
                                                                show: true,
                                                                text: '姓名:',
                                                            },
                                                        },
                                                        {
                                                            type: 'text',
                                                            placeholder: '请输入...',
                                                            tools:`获取验证码`,
                                                            title: {
                                                                show: true,
                                                                text: '手机号:',
                                                            },
                                                        },
                                                        {
                                                            type: 'text',
                                                            placeholder: '请输入...',
                                                            tools:``,
                                                            title: {
                                                                show: true,
                                                                text: '年龄:',
                                                            },
                                                        },
                                                    ]
                                                });
                                            

一行多列

通过dispay参数、columns参数、gap参数,以及cols数组可设置一行多列布局。

默认行内布局

grid布局

flex布局

  •                                             <p>默认行内布局</p>
                                                <div id="col01"></div>
                                                <div class="ax-break"></div>
                                                <p>grid布局</p>
                                                <div id="col02"></div>
                                                <div class="ax-break"></div>
                                                <p>flex布局</p>
                                                <div id="col03"></div>
                                            
  •                                             new axForm('#col01', {
                                                    rows: [
                                                        {
                                                            type: 'checkbox',
                                                            title: {
                                                                show: true,
                                                                text: '行内的checkbox',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '选项一',
                                                                    value: 'val01',
                                                                },
                                                                {
                                                                    label: '选项二',
                                                                    value: 'val02',
                                                                },
                                                                {
                                                                    label: '选项三',
                                                                    value: 'val03',
                                                                },
                                                                {
                                                                    label: '选项四',
                                                                    value: 'val04',
                                                                },
                                                                {
                                                                    label: '选项五',
                                                                    value: 'val05',
                                                                },
                                                                {
                                                                    label: '选项六',
                                                                    value: 'val06',
                                                                }
                                                            ],
                                                        },
                                                        {
                                                            title: {
                                                                show: true,
                                                                text: '行内的input',
                                                            },
                                                            cols: [
                                                                {
                                                                    type: 'text',
                                                                    placeholder:'请输入...',
                                                                    suffix:'
    ', }, { type: 'text', placeholder:'请输入...', suffix:'
    ', }, { type: 'text', placeholder:'请输入...', }, ], }, ] }); new axForm('#col02', { rows: [ { type: 'checkbox', display:'grid', title: { show: true, text: 'grid的checkbox', }, options: [ { label: '选项一', value: 'val01', }, { label: '选项二', value: 'val02', }, { label: '选项三', value: 'val03', }, { label: '选项四', value: 'val04', }, { label: '选项五', value: 'val05', }, { label: '选项六', value: 'val06', } ], }, { display:'grid', gap:'1.4rem 1.4rem', columns:2, title: { show: true, text: 'grid的input', }, cols: [ { type: 'text', placeholder:'请输入...', }, { type: 'text', placeholder:'请输入...', }, { type: 'text', placeholder:'请输入...', }, { type: 'text', placeholder:'请输入...', }, { type: 'text', placeholder:'请输入...', }, { type: 'text', placeholder:'请输入...', }, ], }, ] }); new axForm('#col03', { rows: [ { type: 'checkbox', display:'flex', title: { show: true, text: 'flex的checkbox', }, options: [ { label: '选项一', value: 'val01', }, { label: '选项二', value: 'val02', }, { label: '选项三', value: 'val03', }, ], }, { display:'flex', title: { show: true, text: 'flex的input', }, cols: [ { type: 'text', placeholder:'请输入...', suffix:'' }, { type: 'text', placeholder:'请输入...', suffix:'' }, { type: 'text', placeholder:'请输入...', }, ], }, ] });

校验插件表单

使用axForm创建表单,在回调函数中可使用axValid插件进行表单校验。关于axValid的用法请点击这里查看详细。

回调函数的参数是output,是一个对象,具体属性如下:

  • name:字段名
  • value:字段值
  • field:字段节点
  • parent:字段父层
  • instance:字段所使用的插件实例,默认为null

事实上,只要掌握了回调函数的参数,就可以对表单域进行各种操作,值校验只是一种应用。

  •                                             <div id="valid"></div>
                                            
  •                                             new axForm('#valid', {
                                                    props: {
                                                        method: 'get',
                                                        action:'http://www.axui.cn'
                                                    },
                                                    rows: [
                                                        {
                                                            type: 'text',
                                                            name: 'tx',
                                                            title: {
                                                                show: true,
                                                                text: '姓名',
                                                            },
                                                            tools: `必填`,
                                                            callback: function (obj) {
                                                                new axValid(obj.field, {
                                                                    //使用parent,将校验结果放到其名下便于submit时再次校验
                                                                    //this指向axForm实例本身,this.form指插件自动创建的表单节点
                                                                    parent: this.form,
                                                                    type: 'required'
                                                                });
                                                            }
                                                        },
                                                        {
                                                            type: 'password',
                                                            name: 'pw',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '密码',
                                                            },
                                                            tools: `必填`,
                                                            callback: function (obj) {
                                                                new axValid(obj.field, {
                                                                    //使用parent,将校验结果放到其名下便于submit时再次校验
                                                                    //this指向axForm实例本身,this.form指插件自动创建的表单节点
                                                                    parent: this.form,
                                                                    type: 'strong',
                                                                    format: 'a1A191~1#6,12'
                                                                });
                                                            }
                                                        },
                                                        {
                                                            title: {
                                                                show: true,
                                                            },
                                                            cols: [
                                                                {
                                                                    type: 'submit',
                                                                    value: '提交',
                                                                    className: 'ax-btn ax-primary',
                                                                    suffix: '',
                                                                    callback: function (obj) {
                                                                        //this指向axForm实例本身,this.form指插件自动创建的表单节点
                                                                        this.form.addEventListener("submit",  (e)=> {
                                                                            axPreventDefault(e);
                                                                            //使用重复校验函数,在阻止submit事件后逐一再次校验,全部通过再执行submit事件
                                                                            axValidRepeat(e, axValids, this.form,  ()=> {
                                                                                this.form.submit();
                                                                            });
                                                                        });
                                                                    }
                                                                },
                                                                {
                                                                    type: 'reset',
                                                                    value: '重置',
                                                                    className: 'ax-btn',
                                                                },
                                                            ]
                                                        },
                                                    ]
                                    
                                                });
                                    
                                            

窗口插件表单

除了页面使用表单之外,窗口插件也经常需要使用表单以方便用户快速录入数据。

axPopup、axDialog和axDrawer是常用的窗口插件,在这些插件中快速创建表单是很有必要的。

  •                                     <a href="###" class="ax-btn" id="formDialog">打开axDialog表单</a>
                                            
  •                                             let btnDialog = document.querySelector('#formDialog'),
                                                formDialog = new axForm('', {
                                                    style: 'emulate',
                                                    rows: [
                                                        {
                                                            type: 'text',
                                                            name: 'tx',
                                                            title: {
                                                                show: true,
                                                                text: '账号',
                                                            },
                                                            tools: `填"李雷"或"韩梅梅"`,
                                                            callback: function (obj) {
                                                                new axValid(obj.field, {
                                                                    //使用parent,将校验结果放到其名下便于submit时再次校验
                                                                    //this指向axForm实例本身,this.form指插件自动创建的表单节点
                                                                    parent: this.form,
                                                                    url: 'ajax/name.php',
                                                                });
                                                            }
                                                        },
                                                        {
                                                            type: 'password',
                                                            name: 'pw',
                                                            className: 'ax-input',
                                                            title: {
                                                                show: true,
                                                                text: '密码',
                                                            },
                                                            tools: `填123456`,
                                                            callback: function (obj) {
                                                                new axValid(obj.field, {
                                                                    //使用parent,将校验结果放到其名下便于submit时再次校验
                                                                    //this指向axForm实例本身,this.form指插件自动创建的表单节点
                                                                    parent: this.form,
                                                                    url: 'ajax/pass.php',
                                                                });
                                                            }
                                                        },
                                                    ]
                                                }),
                                                insDialog = new axDialog({
                                                    title: '伟大的中国',
                                                    titleBreak:true,
                                                    padding:false,
                                                    footerType:"right",
                                                    //将表单节点作为content
                                                    content: formDialog.form,
                                                    confirm: {
                                                        //使用异步提交(再次校验)
                                                        type: 'async',
                                                        url: 'ajax/login.php',
                                                    }
                                                });
                                            btnDialog.onclick = () => {
                                                insDialog.show();
                                            }
                                            
  • //name.php
    <?php
    header("Content-Type:text/plain;charset=utf-8");
    //定义user变量,是被检索内容
    $values = array(
    	array("value" => "李雷"),
    	array("value" => "韩梅梅"),
    );
    $arr_success = array('verified' => true, 'text' => '系统中有此人!');
    $arr_error = array('verified' => false, 'text' => '系统没有此人!');
    $success = json_encode($arr_success);
    $error = json_encode($arr_error);
    $result = '';
    foreach ($values as $item) {
    	if (($item["value"] == $_POST["value"])) {
        $result = $success;
    		break;
    	} else if (($item["value"] !== $_POST["value"])) {
    		$result = $error;
    	}
    }
    echo $result;
    ?>
    //pass.php
    <?php
    header("Content-Type:text/plain;charset=utf-8");
    $arr_success = array('verified' => true, 'text' => '密码正确!');
    $arr_error = array('verified' => false, 'text' => '密码错误!');
    $success = json_encode($arr_success);
    $error = json_encode($arr_error);
    $result = '';
    if($_POST["value"] == "123456"){
    	$result = $success;
    }else{
    	$result = $error;
    }
    echo $result;
    ?>
    //login.php
    <?php
    header("Content-Type:text/plain;charset=utf-8");
    //定义user变量,是被检索内容
    $user = array
     (
     	array("name" => "李雷","pass" => "123456"),
     	array("name" => "韩梅梅","pass" => "123456"),
     );
    //判断出结果
    if(!isset($_POST["name"]) || empty($_POST["name"]) || !isset($_POST["pass"]) || empty($_POST["pass"])) {
    	echo "信息不完整,请重填!";
    	return;
    }
    $result = "登录失败,没有此账户!";
    forEach($user as $value) {
    	if(($value["name"] !== $_POST["name"]) || ($value["pass"] !== $_POST["pass"])){
    		$result = "登录失败!账户或密码错误";
    	}else if(($value["name"] == $_POST["name"]) & ($value["pass"] == $_POST["pass"]) ) {
    		$result = "登录成功!账户:".$_POST["name"].",密码:".$_POST["pass"];
    		break;
    	}
    }
    echo $result; 
    ?>
                                            

操作方法

实例内置了若干变量和操作方法。

  • 内置变量
    • this.form:表单节点
    • this.output:输出值,是个对象数组,子项属性如下:
      • name:表单域name名
      • value:表单域value值
      • field:表单域节点本身
      • parent:表单域父节点
      • instance:表单域使用插件后的new实例
  • 操作方法
    • this.get:表单的序列值,支持两个参数:
      • type:输出值类型,默认string,可选择json或array,与axSerialize的type参数一致
      • separator:多值表单域输出文本时的分隔字符,默认为英文逗号
    • this.update:根据参数重新生成表单,支持两个参数:
      • obj:参数,与axForm参数一致
      • callback:回调函数,支持一个参数即输出值output
  •                                             <div id="method"></div>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn" id="get">获取输出值</a>
                                                <a href="###" class="ax-btn" id="update">根据参数重新生成</a>
                                            
  •                                             let methodIns = new axForm('#method', {
                                                    rows: [
                                                        {
                                                            type: 'checkbox',
                                                            title: {
                                                                show: true,
                                                                text: 'checkbox',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '选项一',
                                                                    value: 'val01',
                                                                },
                                                                {
                                                                    label: '选项二',
                                                                    value: 'val02',
                                                                },
                                                                {
                                                                    label: '选项三',
                                                                    value: 'val03',
                                                                },
                                                            ],
                                                        },
                                                        {
                                                            type: 'text',
                                                            placeholder:'请输入...',
                                                            title: {
                                                                show: true,
                                                                text: '一个input',
                                                            },
                                                        },
                                                    ]
                                                }),
                                                getBtn = document.querySelector('#get'),
                                                updateBtn = document.querySelector('#update');
                                                getBtn.onclick = ()=>{
                                                    console.log(methodIns.output)
                                                }
                                                updateBtn.onclick = ()=>{
                                                    methodIns.update({
                                                        rows: [
                                                        {
                                                            type: 'radio',
                                                            name:'rd',
                                                            title: {
                                                                show: true,
                                                                text: 'radio',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '选项一',
                                                                    value: 'val01',
                                                                },
                                                                {
                                                                    label: '选项二',
                                                                    value: 'val02',
                                                                },
                                                            ],
                                                        },
                                                    ] 
                                                    });
                                                }
                                            

同步提交表单

使用axForm插件既能创建表单也能提交表单,支持同步提交也只是ajax异步提交。

同步提交表单需要使用props参数传入action、method和enctype参数。

  •                                             <div id="submit"></div>
                                            
  •                                             new axForm('#submit', {
                                                    props: {
                                                        action: 'ajax/commform.php',
                                                        method: 'get',
                                                        enctype: 'application/x-www-form-urlencoded',
                                                        target:'_blank'
                                                    },
                                                    rows: [
                                                        {
                                                            type: 'text',
                                                            name: 'username',
                                                            placeholder: '输入真实姓名',
                                                            title: {
                                                                show: true,
                                                                text: '姓名',
                                                            },
                                    
                                                        },
                                                        {
                                                            type: 'radio',
                                                            name: 'gender',
                                                            title: {
                                                                show: true,
                                                                text: '性别:',
                                                                className: '',
                                                                html: '',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '男',
                                                                    value: 'male',
                                                                },
                                                                {
                                                                    label: '女',
                                                                    value: 'female',
                                                                },
                                                                {
                                                                    label: '其他',
                                                                    value: 'other',
                                                                },
                                                            ],
                                                        },
                                                        {
                                                            type: 'checkbox',
                                                            name: 'hobby[]',
                                                            title: {
                                                                show: true,
                                                                text: '爱好:',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '读书',
                                                                    value: 'book',
                                                                },
                                                                {
                                                                    label: '健身',
                                                                    value: 'fitness',
                                                                },
                                                                {
                                                                    label: '旅游',
                                                                    value: 'travel',
                                                                },
                                                                {
                                                                    label: '游戏',
                                                                    value: 'game',
                                                                },
                                                            ],
                                                        },
                                                        {
                                                            type: 'text',
                                                            name: 'birthday',
                                                            placeholder: '选择日期',
                                                            title: {
                                                                show: true,
                                                                text: '生日:',
                                                            },
                                                            callback: (obj) => {
                                                                new axDate(obj.field);
                                                            }
                                                        },
                                                        {
                                                            type: 'text',
                                                            name: 'motto',
                                                            placeholder: '少于10个字...',
                                                            title: {
                                                                show: true,
                                                                text: '座右铭:',
                                                            },
                                                            callback: (obj) => {
                                                                new axInput(obj.field, {
                                                                    clearShow: true,
                                                                    limit: 10,
                                                                });
                                                            }
                                                        },
                                                        {
                                                            type: 'text',
                                                            name: 'score',
                                                            value: 80,
                                                            title: {
                                                                show: true,
                                                                text: '综合得分:',
                                                            },
                                                            callback: (obj) => {
                                                                new axRange(obj.field);
                                                            }
                                                        },
                                                        {
                                                            type: 'text',
                                                            name: 'age',
                                                            placeholder: '请输入...',
                                                            value: 0,
                                                            title: {
                                                                show: true,
                                                                text: '年龄:',
                                                            },
                                                            callback: (obj) => {
                                                                new axAmount(obj.field);
                                                            }
                                                        },
                                                        {
                                                            type: 'select',
                                                            name: 'city',
                                                            title: {
                                                                show: true,
                                                                text: '城市:',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '请选择',
                                                                    value: '',
                                                                },
                                                                {
                                                                    label: '北京',
                                                                    value: 'Beijing',
                                                                },
                                                                {
                                                                    label: '重庆',
                                                                    value: 'Chongqing',
                                                                },
                                                                {
                                                                    label: '上海',
                                                                    value: 'Shanghai',
                                                                },
                                                            ],
                                                            callback: (obj) => {
                                                                new axSelect(obj.field);
                                                            }
                                                        },
                                                        {
                                                            type: 'select',
                                                            name: 'subject[]',
                                                            props: { multiple: true },
                                                            title: {
                                                                show: true,
                                                                text: '科目:',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '请选择',
                                                                    value: '',
                                                                },
                                                                {
                                                                    label: '语文',
                                                                    value: 'chinese',
                                                                },
                                                                {
                                                                    label: '数学',
                                                                    value: 'mathematics',
                                                                },
                                                                {
                                                                    label: '物理',
                                                                    value: 'physics',
                                                                },
                                                                {
                                                                    label: '化学',
                                                                    value: 'chemistry',
                                                                },
                                                                {
                                                                    label: '音乐',
                                                                    value: 'music',
                                                                },
                                                            ],
                                                            callback: (obj) => {
                                                                new axSelect(obj.field);
                                                            }
                                                        },
                                                        {
                                                            type: 'hidden',
                                                            name: 'avatar',
                                                            title: {
                                                                show: true,
                                                                text: '头像:',
                                                            },
                                                            callback: (obj) => {
                                                                new axUpload(obj.field, {
                                                                    type: 'gallery',
                                                                    url: 'ajax/singleAjax.php',
                                                                    columns: 2,
                                                                });
                                                            }
                                                        },
                                                        {
                                                            type: 'textarea',
                                                            name: 'introduce',
                                                            placeholder: '请输入...',
                                                            title: {
                                                                show: true,
                                                                text: '简介:',
                                                            },
                                                        },
                                                        {
                                                            title: {
                                                                show: true,
                                                            },
                                                            cols: [
                                                                {
                                                                    type: 'submit',
                                                                    value: '提交',
                                                                    className: 'ax-btn ax-primary',
                                                                },
                                    
                                                            ]
                                                        },
                                                    ]
                                                
                                                });
                                            
  • <?php
    //hobby和subject传来的可能是数组
    if(empty($_GET["hobby"])) {
        $hobby = '';
    }else{
        if(is_array($_GET["hobby"])){
            $hobby = join(',',$_GET["hobby"]);
        }else{
            $hobby = $_GET["hobby"];
        }
    }
    if(empty($_GET["subject"])) {
        $subject = '';
    }else{
        if(is_array($_GET["subject"])){
            $subject = join(',',$_GET["subject"]);
        }else{
            $subject = $_GET["subject"];
        }
    }
    echo "提交成功!

    姓名:".$_GET["username"] ."
    性别:".$_GET["gender"] ."
    爱好:".$hobby ."
    生日:".$_GET["birthday"] ."
    座右铭:".$_GET["motto"] ."
    综合得分:".$_GET["score"] ."
    年龄:".$_GET["age"] ."
    所在城市:".$_GET["city"] ."
    科目:".$subject ."
    头像:".$_GET["avatar"] ."
    简介:".$_GET["introduce"] ; ?>

异步提交表单

ajax异步提交的前提是通过instance.get()方法获得表单的序列化数据,使用axAjax函数提交到服务器后台。

  •                                             <div id="ajaxsubmit"></div>
                                            
  •                                             new axForm('#ajaxsubmit', {
                                                    rows: [
                                                        {
                                                            type: 'text',
                                                            name: 'username',
                                                            placeholder: '输入真实姓名',
                                                            title: {
                                                                show: true,
                                                                text: '姓名',
                                                            },
                                    
                                                        },
                                                        {
                                                            type: 'radio',
                                                            name: 'gender',
                                                            title: {
                                                                show: true,
                                                                text: '性别:',
                                                                className: '',
                                                                html: '',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '男',
                                                                    value: 'male',
                                                                },
                                                                {
                                                                    label: '女',
                                                                    value: 'female',
                                                                },
                                                                {
                                                                    label: '其他',
                                                                    value: 'other',
                                                                },
                                                            ],
                                                        },
                                                        {
                                                            type: 'checkbox',
                                                            name: 'hobby',
                                                            title: {
                                                                show: true,
                                                                text: '爱好:',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '读书',
                                                                    value: 'book',
                                                                },
                                                                {
                                                                    label: '健身',
                                                                    value: 'fitness',
                                                                },
                                                                {
                                                                    label: '旅游',
                                                                    value: 'travel',
                                                                },
                                                                {
                                                                    label: '游戏',
                                                                    value: 'game',
                                                                },
                                                            ],
                                                        },
                                                        {
                                                            type: 'text',
                                                            name: 'birthday',
                                                            placeholder: '选择日期',
                                                            title: {
                                                                show: true,
                                                                text: '生日:',
                                                            },
                                                            callback: (obj) => {
                                                                new axDate(obj.field);
                                                            }
                                                        },
                                                        {
                                                            type: 'text',
                                                            name: 'motto',
                                                            placeholder: '少于10个字...',
                                                            title: {
                                                                show: true,
                                                                text: '座右铭:',
                                                            },
                                                            callback: (obj) => {
                                                                new axInput(obj.field, {
                                                                    clearShow: true,
                                                                    limit: 10,
                                                                });
                                                            }
                                                        },
                                                        {
                                                            type: 'text',
                                                            name: 'score',
                                                            value: 80,
                                                            title: {
                                                                show: true,
                                                                text: '综合得分:',
                                                            },
                                                            callback: (obj) => {
                                                                new axRange(obj.field);
                                                            }
                                                        },
                                                        {
                                                            type: 'text',
                                                            name: 'age',
                                                            placeholder: '请输入...',
                                                            value: 0,
                                                            title: {
                                                                show: true,
                                                                text: '年龄:',
                                                            },
                                                            callback: (obj) => {
                                                                new axAmount(obj.field);
                                                            }
                                                        },
                                                        {
                                                            type: 'select',
                                                            name: 'city',
                                                            title: {
                                                                show: true,
                                                                text: '城市:',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '请选择',
                                                                    value: '',
                                                                },
                                                                {
                                                                    label: '北京',
                                                                    value: 'Beijing',
                                                                },
                                                                {
                                                                    label: '重庆',
                                                                    value: 'Chongqing',
                                                                },
                                                                {
                                                                    label: '上海',
                                                                    value: 'Shanghai',
                                                                },
                                                            ],
                                                            callback: (obj) => {
                                                                new axSelect(obj.field);
                                                            }
                                                        },
                                                        {
                                                            type: 'select',
                                                            name: 'subject',
                                                            props: { multiple: true },
                                                            title: {
                                                                show: true,
                                                                text: '科目:',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '请选择',
                                                                    value: '',
                                                                },
                                                                {
                                                                    label: '语文',
                                                                    value: 'chinese',
                                                                },
                                                                {
                                                                    label: '数学',
                                                                    value: 'mathematics',
                                                                },
                                                                {
                                                                    label: '物理',
                                                                    value: 'physics',
                                                                },
                                                                {
                                                                    label: '化学',
                                                                    value: 'chemistry',
                                                                },
                                                                {
                                                                    label: '音乐',
                                                                    value: 'music',
                                                                },
                                                            ],
                                                            callback: (obj) => {
                                                                new axSelect(obj.field);
                                                            }
                                                        },
                                                        {
                                                            type: 'hidden',
                                                            name: 'avatar',
                                                            title: {
                                                                show: true,
                                                                text: '头像:',
                                                            },
                                                            callback: (obj) => {
                                                                new axUpload(obj.field, {
                                                                    type: 'gallery',
                                                                    url: 'ajax/singleAjax.php',
                                                                    columns: 2,
                                                                });
                                                            }
                                                        },
                                                        {
                                                            type: 'textarea',
                                                            name: 'introduce',
                                                            placeholder: '请输入...',
                                                            title: {
                                                                show: true,
                                                                text: '简介:',
                                                            },
                                                        },
                                                        {
                                                            title: {
                                                                show: true,
                                                            },
                                                            cols: [
                                                                {
                                                                    type: 'a',
                                                                    value: 'A标签提交',
                                                                    props: { href: '###' },
                                                                    className: 'ax-btn ax-primary',
                                                                    callback: function (obj) {
                                                                        obj.field.onclick = () => {
                                                                            //this指向实例
                                                                            axAjax({
                                                                                url: 'ajax/ajaxform.php',
                                                                                //type:'get',
                                                                                data: this.get(),
                                                                                success: (content) => {
                                                                                    console.log(content);
                                                                                }
                                                                            });
                                                                        }
                                    
                                                                    }
                                                                },
                                    
                                                            ]
                                                        },
                                                    ]
                                    
                                                });
                                            
  • <?php
    if($_SERVER["REQUEST_METHOD"] =="GET") {
    	$TYPE = $_GET;
    } elseif($_SERVER["REQUEST_METHOD"] == "POST") {
    	$TYPE = $_POST;
    }
    echo "提交成功!
    姓名:".$TYPE["username"]."
    性别:".$TYPE["gender"]."
    爱好:".$TYPE["hobby"]."
    生日:".$TYPE["birthday"]."
    座右铭:".$TYPE["motto"]."
    综合得分:".$TYPE["score"]."
    年龄:".$TYPE["age"]."
    所在城市:".$TYPE["city"]."
    科目:".$TYPE["subject"]."
    头像:".$TYPE["avatar"]."
    简介:".$TYPE["introduce"]
    ;
    ?>
                                            
                                            

监听事件

借鉴jQuery的写法,本插件有若干监听方法,格式是:instance.on('event',function(){});具体事件说明如下:

  • onInit 初始化后执行,支持参数output,即输出详细
  • updated/onUpdated 更新后执行,支持参数output,即输出详细

演示实例使用console方法,请用F12打开浏览器控制台查看监听结果。

  •                                     <div id="on"></div>
                                        <div class="ax-break"></div>
                                        <a href="###" class="ax-btn" id="onupdate">根据参数重新生成</a>
                                            
  •                                             let onIns = new axForm('#on', {
                                                    onInit: (obj) => {
                                                        console.log('初始化完成!');
                                                        console.log(obj);
                                                    },
                                                    rows: [
                                                        {
                                                            type: 'checkbox',
                                                            title: {
                                                                show: true,
                                                                text: 'checkbox',
                                                            },
                                                            options: [
                                                                {
                                                                    label: '选项一',
                                                                    value: 'val01',
                                                                },
                                                                {
                                                                    label: '选项二',
                                                                    value: 'val02',
                                                                },
                                                                {
                                                                    label: '选项三',
                                                                    value: 'val03',
                                                                },
                                                            ],
                                                        },
                                                        {
                                                            type: 'text',
                                                            placeholder: '请输入...',
                                                            title: {
                                                                show: true,
                                                                text: '一个input',
                                                            },
                                                        },
                                                    ]
                                                }),
                                                    onupdateBtn = document.querySelector('#onupdate');
                                                onupdateBtn.onclick = () => {
                                                    onIns.update({
                                                        rows: [
                                                            {
                                                                type: 'radio',
                                                                name: 'rd',
                                                                title: {
                                                                    show: true,
                                                                    text: 'radio',
                                                                },
                                                                options: [
                                                                    {
                                                                        label: '选项一',
                                                                        value: 'val01',
                                                                    },
                                                                    {
                                                                        label: '选项二',
                                                                        value: 'val02',
                                                                    },
                                                                ],
                                                            },
                                                        ]
                                                    });
                                                }
                                                onIns.on('updated', (obj) => {
                                                    console.log('更新完成!');
                                                    console.log(obj);
                                                });