用layUI框架来进行我们的页面速写,还是非常不错的,虽然2016年诞生,在我使用的过程中,觉得比bootstrap更轻盈点,总结下用的最多的组件.
form表单下拉框:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>layui前端框架学习(一)表单</title> 6 <link rel="stylesheet" href="./layui/css/layui.css"> 7 </head> 8 <body> 9 <div id="wrap"> 10 <div class="layui-form"> 11 <div class="layui-form-item"> 12 <div class="layui-input-block"> 13 <select name="city" lay-verify="required" lay-filter="test"> 14 <option value=""></option> 15 <option value="0">北京</option> 16 <option value="1">上海</option> 17 <option value="2">广州</option> 18 <option value="3">深圳</option> 19 <option value="4">杭州</option> 20 </select> 21 </div> 22 </div> 23 </div> 24 </div> 25 </div> 26 <div id="box"></div> 27 </body> 28 <script src="./layui/layui.js"></script> 29 <script src="./layui/layer/layer.js"></script> 30 <script src="jquery-1.8.3.min.js"></script> 31 <script> 32 layui.use('form', function(){ 33 var form = layui.form; 34 form.on('select(test)', function(data){ 35 console.log(data.elem); //得到select原始DOM对象 36 console.log(data.value); //得到被选中的值 37 console.log(data.othis); //得到美化后的DOM对象 38 var value=(data.value==0)?'北京':((data.value==1)?'上海':((data.value==2)?'广州':((data.value==3)?'深圳':'杭州'))); 39 $('#box').html(value); 40 }); 41 }); 42 </script> 43 </html>
以上代码是form表单中的下拉框为主角,js代码表示依赖form组件,并监听lay-filter="test"这个下拉框,当选择哪个值时,获得对应的值.
form表单switch开关:
1 <div class="layui-form"> 2 <div class="layui-form-item"> 3 <label class="layui-form-label">开关</label> 4 <div class="layui-input-block" lay-filter="test"> 5 <input type="checkbox" name="switch" lay-skin="switch" lay-filter="test"> 6 </div> 7 </div> 8 </div>
1 layui.use('form', function(){ 2 var form = layui.form; 3 form.on('switch(test)', function(data){ 4 console.log(data.elem); //得到checkbox原始DOM对象 5 console.log(data.elem.checked); //开关是否开启，true或者false 6 console.log(data.value); //开关value值，也可以通过data.elem.value得到 7 console.log(data.othis); //得到美化后的DOM对象 8 }) 9 });
form表单复选框:
1 <div class="layui-form"> 2 <div class="layui-form-item"> 3 <label class="layui-form-label">复选框</label> 4 <div class="layui-input-block"> 5 <input type="checkbox" name="like[write]" title="写作" lay-filter="test"> 6 <input type="checkbox" name="like[read]" title="阅读" lay-filter="test"> 7 <input type="checkbox" name="like[dai]" title="发呆" lay-filter="test"> 8 </div> 9 </div> 10 </div>
1 layui.use('form', function(){ 2 var form = layui.form; 3 form.on('checkbox(test)', function(data){ 4 console.log(data.elem); //得到checkbox原始DOM对象 5 console.log(data.elem.checked); //是否被选中，true或者false 6 console.log(data.value); //复选框value值，也可以通过data.elem.value得到 7 console.log(data.othis); //得到美化后的DOM对象 8 }); 9 });
form表单单选radio:
1 <div class="layui-form"> 2 <div class="layui-form-item"> 3 <label class="layui-form-label">单选框</label> 4 <div class="layui-input-block"> 5 <input type="radio" name="sex" value="男" title="男" lay-filter="test"> 6 <input type="radio" name="sex" value="女" title="女" checked lay-filter="test"> 7 </div> 8 </div> 9 </div>
1 layui.use('form', function(){ 2 var form = layui.form; 3 form.on('radio(test)', function(data){ 4 console.log(data.elem); //得到radio原始DOM对象 5 console.log(data.value); //被点击的radio的value值 6 }); 7 });
form表单验证:
对表单的验证进行了非常巧妙的支持，大多数时候你只需要在表单元素上加上 lay-verify="" 属性值即可。如：
1 <input type="text" lay-verify="email"> 2 3 还同时支持多条规则的验证，如下： 4 <input type="text" lay-verify="required|phone|number">
上述对输入框定义了一个邮箱规则的校验，它会在 form 模块内部完成。目前我们内置的校验支持见上文的：预设元素属性
除了内置的校验规则外，你还可以自定义验证规则，通常对于比较复杂的校验，这是非常有必要的。
语法:
1 form.verify({ 2 username: function(value, item){ //value：表单的值、item：表单的DOM对象 3 if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){ 4 return '用户名不能有特殊字符'; 5 } 6 if(/(^\_)|(\__)|(\_+$)/.test(value)){ 7 return '用户名首尾不能出现下划线\'_\''; 8 } 9 if(/^\d+\d+\d$/.test(value)){ 10 return '用户名不能全为数字'; 11 } 12 } 13 14 //我们既支持上述函数式的方式，也支持下述数组的形式 15 //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字] 16 ,pass: [ 17 /^[\S]{6,12}$/ 18 ,'密码必须6到12位，且不能出现空格' 19 ] 20 });
当你自定义了类似上面的验证规则后，你只需要把key赋值给输入框的 lay-verify 属性即可：
1 <input type="text" lay-verify="username" placeholder="请输入用户名"> 2 <input type="password" lay-verify="pass" placeholder="请输入密码">
补充一点:实际项目中可能为了安全很多用form提交验证,大多是用ajax发送数据,感兴趣的小伙伴可以看下我另一篇关于ajax的封装文章,是小编自己在项目实践中,总结和封装的一些ajax方法,如有疑问欢迎留言。
