前端UI框架之layUI学习
⽤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(){
33var form = layui.form;
34  ('select(test)', function(data){
35      console.log(data.elem); //得到select原始DOM对象
36      console.log(data.value); //得到被选中的值
37      console.his); //得到美化后的DOM对象
38var 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(){
2var form = layui.form;
3  ('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.his); //得到美化后的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(){
2var form = layui.form;
jquery框架定义
3  ('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.his); //得到美化后的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(){
2var form = layui.form;
3  ('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对象
3if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
4return '⽤户名不能有特殊字符';
5    }
6if(/(^\_)|(\__)|(\_+$)/.test(value)){
7return '⽤户名⾸尾不能出现下划线\'_\'';
8    }
9if(/^\d+\d+\d$/.test(value)){
10return '⽤户名不能全为数字';
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⽅法，如有疑问欢迎留⾔。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。