用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. Delphi中Json格式读写

    Json是一种轻量级传输数据格式,广泛应用互联网和各应用中.json主要採用键值对来表示数据项.多个数据项之间用逗号分隔,也能够用于数组.以下注重介绍一下在delphi中使用json,在delphi中 ...

  2. Web读取指定的config文件的内容

    需求: 什么时候会用到动态改变Web.config内的值? 在Web.config定义了一个全局设置值A,因为程序运行中满足了某个条件,要将A的值改变 Web.config中定义: <appSe ...

  3. zabbix--3.0--3

      使用JMX监控jvm   vim /usr/local/tomcat/bin/catalina.sh 添加如下内容 CATALINA_OPTS="$CATALINA_OPTS -Dcom ...

  4. Qt开发问答

    Qt开发问答 1, Difference between Dialog and widget and QMainWindow http://www.qtcentre.org/threads/3465- ...

  5. [转]AJAX 简介

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML / XHTML CSS JavaScript ...

  6. Mybatis中在log日志或控制台打印执行的sql

    最近在调试代码时,需要查看当前操作执行的sql,在日志里没查到,经过修改logback配置后成功,现记录如下:一.Mybatis版本是3.0.6(我正在用的版本)该版本只需要修改logback.xml ...

  7. C# 控件

    .ascx:Web窗体用户控件.用来存放独立的用户控件,可提供众多页面使用: <%@ Control Language="C#" AutoEventWireup=" ...

  8. golang gorilla websocket例子

    WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信--允许服务器主动发送信息给客户端. WebSocket通信协议于2011年被IETF定 ...

  9. ajaxFileupload 多文件上传

    ajaxFileupload 多文件上传 修改前的代码: var oldElement = jQuery('#' + fileElementId); var newElement = jQuery(o ...

  10. 【微软版本】redis 安装启动及设置密码<windows>

    redis 安装启动及设置密码<windows>   redis 1. 安装 1.1 下载解压包,直接解压到任意路径下即可 windows下载地址:ttps://github.com/MS ...