用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方法,如有疑问欢迎留言。

版权声明：本文为studyshufei原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/studyshufei/p/8060139.html