用layUI框架来进行我们的页面速写,还是非常不错的,虽然2016年诞生,在我使用的过程中,觉得比bootstrap更轻盈点,总结下用的最多的组件.

form表单下拉框:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>layui前端框架学习(一)表单</title>

     <link rel="stylesheet" href="./layui/css/layui.css">

 </head>

 <body>

 <div id="wrap">

     <div class="layui-form">

       <div class="layui-form-item">

         <div class="layui-input-block">

           <select name="city" lay-verify="required"  lay-filter="test">

             <option value=""></option>

             <option value="0">北京</option>

             <option value="1">上海</option>

             <option value="2">广州</option>

             <option value="3">深圳</option>

             <option value="4">杭州</option>

           </select>

         </div>

       </div>

   </div>

 </div>

 </div>

 <div id="box"></div>

 </body>

 <script src="./layui/layui.js"></script>

 <script src="./layui/layer/layer.js"></script>

 <script src="jquery-1.8.3.min.js"></script>

 <script>

 layui.use('form', function(){

   var form = layui.form;

   form.on('select(test)', function(data){

       console.log(data.elem); //得到select原始DOM对象

       console.log(data.value); //得到被选中的值

       console.log(data.othis); //得到美化后的DOM对象

       var value=(data.value==0)?'北京':((data.value==1)?'上海':((data.value==2)?'广州':((data.value==3)?'深圳':'杭州')));

       $('#box').html(value);

     });

 });

 </script>

 </html>

以上代码是form表单中的下拉框为主角,js代码表示依赖form组件,并监听lay-filter="test"这个下拉框,当选择哪个值时,获得对应的值.

form表单switch开关:

 <div class="layui-form">

     <div class="layui-form-item">

         <label class="layui-form-label">开关</label>

         <div class="layui-input-block" lay-filter="test">

             <input type="checkbox" name="switch" lay-skin="switch" lay-filter="test">

         </div>

     </div>

 </div>
 layui.use('form', function(){

   var form = layui.form;

   form.on('switch(test)', function(data){

       console.log(data.elem); //得到checkbox原始DOM对象

       console.log(data.elem.checked); //开关是否开启，true或者false

       console.log(data.value); //开关value值，也可以通过data.elem.value得到

       console.log(data.othis); //得到美化后的DOM对象

     })

 });

form表单复选框:

 <div class="layui-form">

     <div class="layui-form-item">

         <label class="layui-form-label">复选框</label>

         <div class="layui-input-block">

             <input type="checkbox" name="like[write]" title="写作" lay-filter="test">

             <input type="checkbox" name="like[read]" title="阅读" lay-filter="test">

             <input type="checkbox" name="like[dai]" title="发呆" lay-filter="test">

         </div>

     </div>

 </div>
 layui.use('form', function(){

   var form = layui.form;

   form.on('checkbox(test)', function(data){

       console.log(data.elem); //得到checkbox原始DOM对象

       console.log(data.elem.checked); //是否被选中，true或者false

       console.log(data.value); //复选框value值，也可以通过data.elem.value得到

       console.log(data.othis); //得到美化后的DOM对象

     });

 });

form表单单选radio:

 <div class="layui-form">

      <div class="layui-form-item">

         <label class="layui-form-label">单选框</label>

         <div class="layui-input-block">

               <input type="radio" name="sex" value="男" title="男" lay-filter="test">

               <input type="radio" name="sex" value="女" title="女" checked lay-filter="test">

             </div>

       </div>

 </div>
 layui.use('form', function(){

   var form = layui.form;

   form.on('radio(test)', function(data){

       console.log(data.elem); //得到radio原始DOM对象

       console.log(data.value); //被点击的radio的value值

     });

 });

form表单验证:

对表单的验证进行了非常巧妙的支持，大多数时候你只需要在表单元素上加上 lay-verify="" 属性值即可。如：

 <input type="text" lay-verify="email"> 

 还同时支持多条规则的验证，如下：

 <input type="text" lay-verify="required|phone|number">

上述对输入框定义了一个邮箱规则的校验，它会在 form 模块内部完成。目前我们内置的校验支持见上文的：预设元素属性

除了内置的校验规则外，你还可以自定义验证规则，通常对于比较复杂的校验，这是非常有必要的。

语法:

 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位，且不能出现空格'

   ]

 });

当你自定义了类似上面的验证规则后，你只需要把key赋值给输入框的 lay-verify 属性即可：

 <input type="text" lay-verify="username" placeholder="请输入用户名">

 <input type="password" lay-verify="pass" placeholder="请输入密码">

补充一点:实际项目中可能为了安全很多用form提交验证,大多是用ajax发送数据,感兴趣的小伙伴可以看下我另一篇关于ajax的封装文章,是小编自己在项目实践中,总结和封装的一些ajax方法,如有疑问欢迎留言。

前端UI框架之layUI学习的更多相关文章

  1. Layui 是一款采用自身模块规范编写的国产前端UI框架（5600个Star）

    采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写形式,极低门槛,拿来即用. http://www.layui.com Layui 是一款采用自身模块规范编写的国产前端UI框架, ...

  2. layui经典模块化前端UI框架初识

    layui产生背景 layui相对于vue来说确实稍有逊色,但是官网提供的入门文档以及完善的框架结构,使的很多人开始用layui来开发前端页面,那么什么人会去使用layui呢? 针对后端开发人员,在对 ...

  3. 前端UI框架小汇总

    前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[ ...

  4. 前端UI框架选择区别对比推荐

    UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...

  5. 前端UI框架和JS类库

    一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  6. 2015年最全的移动WEB前端UI框架

    目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...

  7. web前端UI框架

    分类:WEB前端 时间:2016年1月13日 目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WE ...

  8. 推荐几个精致的web UI框架及常用前端UI框架

    1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...

  9. 很受欢迎的vue前端UI框架

    最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...

随机推荐

  1. Match 3 小项目学习

    using UnityEngine; using System.Collections; using Holoville.HOTween; /// <summary> /// 游戏逻辑 / ...

  2. 通过LoadGenerator将Linux作为负载机进行压力测试

    前提说明: 测试架构:controller部署在windows操作系统下(windows下安装loadrunner的过程,可以去网上搜下,这里不做解释),loadgenerator部署在linux下. ...

  3. PADS Logic Ref Des Start Value

    PADS Logic Ref Des Start Value 曾经以为 Mentor 把 PADS Logic 放弃了,没想到还加了一个非常实用的功能. 这个的好处是让元件号可以设置起始编号,方便每一 ...

  4. 【转】Android AlertDialog自定义布局

    原文网址:https://blog.csdn.net/u010694658/article/details/53022294 由于开发中经常使用弹框,然而系统自带的弹框太局限,也不太美观,经常不能满足 ...

  5. 数学集合：N Z Q R C

    整数:   Zahlen(德) 复数:  Complex number 实数:  Real number 自然数: Natural number 有理数: Quotient(德,"商&quo ...

  6. 获取TypeError：__init __（）缺少1个需要的位置参数：'on_delete'当试图添加父表后面的子表

    解决办法:https://stackoverflow.com/questions/44026548/getting-typeerror-init-missing-1-required-position ...

  7. CF 666E Forensic Examination——广义后缀自动机+线段树合并

    题目:http://codeforces.com/contest/666/problem/E 对模式串建广义后缀自动机,询问的时候把询问子串对应到广义后缀自动机的节点上,就处理了“区间”询问. 还要处 ...

  8. 不同路径 II

    一个机器人位于一个 m x n 网格的左上角 (起始点标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角. 现在考虑网格中有障碍物.那么从左上角到右下角将会有多 ...

  9. hanlp和jieba等六大中文分工具的测试对比

    本篇文章测试的哈工大LTP.中科院计算所NLPIR.清华大学THULAC和jieba.FoolNLTK.HanLP这六大中文分词工具是由  水...琥珀 完成的.相关测试的文章之前也看到过一些,但本篇 ...

  10. 优化sql用到的方法

    set statistics profile on set statistics io on set statistics time on declare @begin_date datetime d ...