最近做一个后台项目,用到了layui,需要设计一个单选按钮并且添加点击事件。 参考了下官方文档 https://www.layui.com/doc/modules/form.html#onradio ,最终还是实现了这个效果。给layui一个好评,用layui来做后台管理系统确实不错。
html代码
<div class="layui-form-item" > <label class="layui-form-label"><span style="color: red">*</span>选择: </label> <div class="layui-input-inline" > <input type="radio" lay-filter="testRadio" lay-verify="required" name="state" value="pass" title="通过" > <input type="radio" lay-filter="testRadio" lay-verify="required" name="state" value="reject" title="驳回"> </div> </div>
js代码
form.on('radio(testRadio)', function(data){ if(data.value == 'reject'){ $("#resonDiv").css("display", "block"); } else { $("#resonDiv").css("display", "none"); } });
文档中还有
初始赋值form.val('lay-filter的值', object);
表单验证
form.verify({ username: function(value, item){ //value:表单的值、item:表单的DOM对象 if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){ return '用户名不能有特殊字符'; } if(/(^\_)|(\__)|(\_+$)/.test(value)){ return '用户名首尾不能出现下划线\'_\''; } if(/^\d+\d+\d$/.test(value)){ return '用户名不能全为数字'; } } //我们既支持上述函数式的方式,也支持下述数组的形式 //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字] ,pass: [ /^[\S]{6,12}$/ ,'密码必须6到12位,且不能出现空格' ] });
表单提交 form.on('submit(go)', callback);
复选框 form.on('checkbox(filter)', function(data){ doSomething(); });
等等。