用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. Hasura GraphQL schema 生成是如何工作的

    不像大部分的graphql 引擎,使用标准的graphql 规范的处理模型,Hasura graphql 不存在resolver 的概念(实际上是有的,只是转换为了sql语法) 以下是Hasura g ...

  2. python 高阶函数学习， map、reduce

    一个函数可以接收另一个函数作为参数,这样的函数叫做高阶函数. 函数map(): map()函数接收两个参数,一个是函数,一个是Iterable, map把函数作用于序列的每一个元素,并把结果作为Ite ...

  3. SelectDataTable

    项目地址 :  https://github.com/kelin-xycs/SelectDataTable SelectDataTable 一个 用 C# 实现的 用 Sql select DataT ...

  4. Bundle类解读

    1.Bundle bundle = Platform.getBundle("org.eclipse.ui.views"); Platform是eclipse平台运行时的核心类,它是 ...

  5. java-文件和I/O

    理解IO:http://www.importnew.com/23708.html 一.读写文件: FileInputStream 该流用于从文件读取数据,它的对象可以用关键字 new 来创建. 有多种 ...

  6. httpService 和 WebService接口协议

    http协议: 1.调用接口 例1:此例子传输参数为XML文本格式字符串: 将数据缓冲区上载到具有指定 URI 的资源.  var url = "http://localhost:23265 ...

  7. 基于MVC4+EasyUI的Web开发框架形成之旅(6)--基类控制器CRUD的操作

    在上一篇随笔中,我对Web开发框架的总体界面进行了介绍,其中并提到了我的<Web开发框架>的控制器的设计关系,Web开发框架沿用了我的<Winform开发框架>的很多架构设计思 ...

  8. 修改docker容器的端口映射

    大家都知道docker run可以指定端口映射,但是容器一旦生成,就没有一个命令可以直接修改.通常间接的办法是,保存镜像,再创建一个新的容器,在创建时指定新的端口映射. 有没有办法不保存镜像而直接修改 ...

  9. 使用googletest进行C++单元测试(Netbeans为例)

    googletest设置步骤(Netbeans为例) 下载googletest [https://github.com/google/googletest],解压到<gtest_dir> ...

  10. 【Graphite】Graphite常用函数使用

    使用Graphite进行sort排名 限制返回条数 aliasByNode(limit(sortByMaxima(summarize(EPIC.bm.00*.memory.memory.buffere ...