AddForm 创建表单
简介
创建表单的方式有两种，一种是手动创建表单域（包括文本域、文件域、下拉菜单等）；一种是通过插件以js的方式创建表单域。
提交表单的方式也大致分两种，一种是使用form自身的action参数跳转页面提交；另一种是使用ajax异步提交。当然异步提交又分get和post，或者按是否构建new FormData划分。
本页面将讲解在AXUI框架下如何创建表单和提交表单。
原始表单
form中所有的文本域都是手动创建，不使用任何插件，直接提交到服务器动态页面。需要注意两点：
1、对于checkbox和select-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"><u></u><i>男</i></label> <label class="ax-radio"><input name="gender" value="female" type="radio"><u></u><i>女</i></label> <label class="ax-radio"><input name="gender" value="other" type="radio"><u></u><i>其他</i></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"><u></u><i>读书</i></label> <label class="ax-checkbox"><input name="hobby[]" value="travel" type="checkbox"><u></u><i>旅游</i></label> <label class="ax-checkbox"><input name="hobby[]" value="fitness" type="checkbox"><u></u><i>健身</i></label> <label class="ax-checkbox"><input name="hobby[]" value="game" type="checkbox"><u></u><i>游戏</i></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"] ; ?>
原生表单域提交文件必须使用post和multipart/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中所有的文本域都可以手动创建，如果是为了方便控制文本域，可以使用插件来创建，目前可用的表单插件如下：
-
<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"><u></u><i>其他</i></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"><u></u><i>男</i></label> <label class="ax-radio"><input name="gender" value="female" type="radio"><u></u><i>女</i></label> <label class="ax-radio"><input name="gender" value="other" type="radio"><u></u><i>其他</i></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"><u></u><i>读书</i></label> <label class="ax-checkbox"><input name="hobby" value="travel" type="checkbox"><u></u><i>旅游</i></label> <label class="ax-checkbox"><input name="hobby" value="fitness" type="checkbox"><u></u><i>健身</i></label> <label class="ax-checkbox"><input name="hobby" value="game" type="checkbox"><u></u><i>游戏</i></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"><u></u><i>男</i></label> <label class="ax-radio"><input name="gender" value="female" type="radio"><u></u><i>女</i></label> <label class="ax-radio"><input name="gender" value="other" type="radio"><u></u><i>其他</i></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"><u></u><i>读书</i></label> <label class="ax-checkbox"><input name="hobby" value="travel" type="checkbox"><u></u><i>旅游</i></label> <label class="ax-checkbox"><input name="hobby" value="fitness" type="checkbox"><u></u><i>健身</i></label> <label class="ax-checkbox"><input name="hobby" value="game" type="checkbox"><u></u><i>游戏</i></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"><u></u><i>男</i></label> <label class="ax-radio"><input name="gender" value="female" type="radio"><u></u><i>女</i></label> <label class="ax-radio"><input name="gender" value="other" type="radio"><u></u><i>其他</i></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"> <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, { type: '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创建一个表单域可使用的参数有如下：
insName：表单实例名，字符串格式，填写之后将会存入axInstance，并可使用相应方法style：表单html结构风格，默认为空，可选择fit（自适应移动终端）或emulateclassName：追加表单的样式名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结构风格，三种风格各有特点。该参数默认为空，即按默认布局，可选择emulate或fit布局。
默认布局，不改变既有显示效果，基本适配移动端
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, 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"] ; ?>
监听事件
本插件有若干监听方法，以on为关键字，实例后监听和在参数中监听效果相同。格式是：instance.on('event',function(){})；具体事件说明如下：
onInit初始化后执行，支持参数output，即输出详细updated/onUpdated更新后执行，支持参数output，即输出详细
演示实例显示结果使用了console.log方法，请按下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); });