用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. mysql创建部分索引

    mysql中,字符串如何建立索引的(本文中截取一部分) 只对字符串的前几个字符进行索引.通过字符串的前几个字符我们已经能大概排序字符串了,剩下不能排序的可以通过遍历进行查找啊,这样只在B+树中存储字符 ...

  2. docker for mac 安装 kubernetes、kubernetes dashboard

    安装参考地址(按照此文档,安装成功):https://yq.aliyun.com/articles/508460 官方说明:https://kubernetes.io/docs/tasks/acces ...

  3. vue线上项目，优化前后对比

    优化前: dev初次时间:52s dev时间:5s~6s build时间:374s(6.2分钟) build后zip包大小: vue.vue-router 优化后: dev初次时间:49s.48s.5 ...

  4. 使用 RSA 非对称加密保证数据不被篡改 java 例子代码

    原理: 对原始数据 生成有序的json 字符串,然后取 摘要,然后 对摘要 进项 分对称加密.( 不对原数据加密是应为 原数据太大,加解密速度太慢,非对称加密都不 挺慢的.在摘要函数具有雪崩效应 ,原 ...

  5. Zookeeper常用操作命令create，set，delete

    一.zk特性的session的基本原理 1.客户端与服务端之间的连接存在会话 2.每个会话都可以设置一个超时时间 3.心跳结束,session则过期 4.session过期,则临时节点znode会被抛 ...

  6. Oracle ID 自增

    实现Oracle Id自增 1.方法一(Oracle Version Oracle 12c版本支持) create table app_student( id integer generated by ...

  7. win7重装系统笔记

    制作U盘启动盘:链接 原文链接:链接 开机进入bios界面(华硕:F2) 按方向左右键进入:Boot选项,将“Lunch CSM”设置为“Enabled” 方向键选择“Security”,将“Secu ...

  8. tomcat中catalina是什么

    catalina 就是Tomcat服务器使用的 Apache实现的servlet容器的 名字. Tomcat的核心分为3个部分: (1)Web容器---处理静态页面: (2)catalina --- ...

  9. Spring Http Invoker使用简介

    一.Spring HTTP Invoker简介 Spring HTTP invoker 是 spring 框架中的一个远程调用模型,执行基于 HTTP 的远程调用(意味着可以通过防火墙),并使用 ja ...

  10. Windows 10 的有趣快捷键

    先升级到最新版Windows 10,比如:易升 快捷键 功能 Ctrl+Win+C 感受黑白灰的世界 Win+Shift+S 系统级自由截图快捷键 Win+D Win+Ctrl+D Win+Ctrl+ ...