表单相关事件/方法

form使用


使用aeui表单会对input[type = range,radio,checkbox] 、select 进行渲染。在你需要的地方引入 form

// 引入方法,引入完成自动对元素进行渲染,如已经引入无需二次重复引入。 aeui.use(["form"],function(name){ }); 或 aeui.use("form",function(name){ });

方法




aeui.form.rendering(type)

针对动态插入的数据进行渲染,不会重复渲染已经渲染的元素。

参数名类型可空描述
type sting(文本) 必须填写 渲染类型
type参数可使用内容:all = 渲染全部,range = 滑块条,radio = 单选框,checkbox = 复选框,select = 下拉列表

使用列子

// 注意,此方法需要引入form完成后才能使用。 aeui.form.rendering("all"); // 渲染全部 aeui.form.rendering("radio"); // 单选框 aeui.form.rendering("checkbox"); // 复选框 aeui.form.rendering("select"); // 下拉列表 aeui.form.rendering("range"); // 滑块条

aeui.form.sendCode(selector,object)

快捷发送短信验证码、邮箱验证码或其他验证码(该方法需要配合后端使用)。内部采用apicloud Ajax请求,api.ajax

参数名类型可空描述
selector sting(文本) 必须填写 选择器,元素ID、class、伪元素...任意方式都可
object object( json ) 必须填写 json 参数
object : json参数内容:

time:300 // 按钮倒计时,默认300秒,单位:秒 必须是整数类型

url:"", // 请求接口,必须填写

data:{}, // 请求参数,json 类型,可用为空 ;如:{aeui:"2.0"}

header:{}, // 请求协议头,json 类型,可用为空;如 { "Content-Type": "application/x-www-form-urlencoded" }

method:"get", // 请求方式 post、get.....

success:function(res){}, // 请求成功后返回原样数据,必须填写。

// 请求成功后需要对内部数据处理,return true;代表获取返回正确,无返回或返回其他值代表忽略,错误。

error:function(msg){} // 请求出现错误返回,接口错误、内部错误等。
具体请参考使用实例

完整示列

{    time:600,    url:"https://www.ipwas.cn/test.json",    data:{type:"code",ver:'aeui2.0'},    header:{},    method:"get",    success:[color=#9C27B0]function[/color](res){    // res 为后端返回的数据 ,后端返回什么类型的数据,这里就是什么类型的数据。原样返回。    /*根据自身接口返回状态 , true = 获取成功,false = 失败*/    if(json.code){          return true;    }else{          alert(json.msg);          return false;    }    },    error:[color=#9C27B0]function[/color](msg){       alert("获取验证码出现的错误:"+msg);    } }

完整使用实列

     
         
         
  
[color=red]<script>[/color] aeui.use("form",function(name){   aeui.form.sendCode([color=#4CAF50]"#sendcode"[/color],{     time:600,     url:"test.json",     data:{type:"code",ver:'aeui2.0'},     header:{},     method:"get",     success:function(res){       // res 为后端返回的数据 ,后端返回什么类型的数据,这里就是什么类型的数据。原样返回。       var json = JSON.parse(res);       if(json.code) return true; else alert(json.msg);       /*根据自身接口返回状态 , true = 获取成功,false = 失败*/ 只有正确返回了,内部才会处理     },     error:function(msg){       alert("获取验证码出现的错误:"+msg);     }   }); }); [color=red]</script>[/color]

事件监听




aeui.form.getFormData(name,function(data){})

对form表单提交拦截并获取元素数据

参数名类型可空描述
name sting(文本) 必须填写 监听表单
function(data){} object(function) 必须填写 返回函数
监听表单下返回的内容:
var butObj = data.butObj; // 触发按钮对象
var formObj = data.formObj; // 被拦截form对象有可能为 null ,出现null 表单出错,没有正确按aeui方式进行
var value = data.data; // 表单值

回调返回:bool(逻辑) false -> true

false = 阻止表单提交
true = 允许表单提交
aeui.form.getFormData(name,function(data){   [color=red]return false;[/color]/* false = 阻止表单提交,true = 允许提交表单*/ });

使用列子

[color=#009688]
  
         
           
  
  
       
[/color] [color=red]<script>[/color] // 注意,此方法需要引入form完成后才能使用。 aeui.use("form",function(name){  /*获取表单数据 -> submit */ 对应 属性 aeui-submit="submit"  aeui.form.getFormData("submit",function(data){   var butObj = data.butObj; // 触发按钮对象   var formObj = data.formObj; // 被拦截form对象有可能为 null ,出现null 表单出错,没有正确按aeui方式进行   var value = data.data; // 表单值   console.log(data);   console.log(value);   alert( "你输入的昵称:" +value.usernam );   return false;/* false = 阻止表单提交,true = 允许提交表单*/  }); }); [color=red]</script>[/color]

aeui.form.on(function(data){})

监控渲染的组件点击、选中事件。监控渲染后的组件

参数名类型可空描述
function(data){} object(function) 必须填写 返回函数
事件返回:
var type = data.type; // 表单组件类型;返回类型有:radio、checkbox、range、select
var value = data.value; // 表单元素值
var name = data.name; // 表单元素name ,如有多个同类型组件,使用事件时一定要判断 name
var obj = data.obj; // 操控元素对象
var checkedStatus = data.checkedStatus; // 选中或取消状态,该状态只有在 type = checkbox 才会有
aeui.form.on = [color=#9C27B0]function[/color](data){   [color=#9C27B0]var[/color] type = data.type; // 表单组件类型   [color=#9C27B0]var[/color] value = data.value; // 表单元素值   [color=#9C27B0]var[/color] name = data.name; // 表单元素name   [color=#9C27B0]var[/color] obj = data.obj; // 操控元素对象   console.log(data);   /* 如有多个同类型组件,使用事件时一定要判断 name */   [color=#9C27B0]switch[/color](type){     [color=#9C27B0]case[/color] [color=#4CAF50]"radio"[/color]:     [color=#9C27B0]break;[/color]     [color=#9C27B0]case[/color] [color=#4CAF50]"checkbox"[/color]:        // data.checkedStatus = checkbox选中或取消状态     [color=#9C27B0]break;[/color]     [color=#9C27B0]case[/color] [color=#4CAF50]"range"[/color]:     [color=#9C27B0]break;[/color]     [color=#9C27B0]case[/color] [color=#4CAF50]"select"[/color]:      [color=#9C27B0]break;[/color]   } };

使用列子

[color=#009688]
  
         
         
    
  
       
[/color] [color=red]<script>[/color] // 注意,此方法需要引入form完成后才能使用。 aeui.use("form",[color=#9C27B0]function[/color](name){ aeui.form.on = [color=#9C27B0]function[/color](data){   [color=#9C27B0]var[/color] type = data.type; // 表单组件类型   [color=#9C27B0]var[/color] value = data.value; // 表单元素值   [color=#9C27B0]var[/color] name = data.name; // 表单元素name   [color=#9C27B0]var[/color] obj = data.obj; // 操控元素对象   console.log(data);   /* 如有多个同类型组件,使用事件时一定要判断 name */   [color=#9C27B0]switch[/color](type){     [color=#9C27B0]case[/color] [color=#4CAF50]"radio"[/color]:     [color=#9C27B0]break;[/color]     [color=#9C27B0]case[/color] [color=#4CAF50]"checkbox"[/color]:        // data.checkedStatus = checkbox选中或取消状态     [color=#9C27B0]break;[/color]     [color=#9C27B0]case[/color] [color=#4CAF50]"range"[/color]:     [color=#9C27B0]break;[/color]     [color=#9C27B0]case[/color] [color=#4CAF50]"select"[/color]:         alert("value:"+value + " name:"+name);      [color=#9C27B0]break;[/color]   } }; }); [color=red]</script>[/color]

过滤




针对一些元素进行过滤 只需要你要过滤的元素上添加 class类名filter 即可
一旦过滤后不会进行渲染。

使用列子

input 过滤 select 过滤
[点击关闭]快捷面板
手机扫码访问 qrcode