用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. ncm 让跨项目配置一致性简单的工具

    多团队写作,确保node 项目依赖以及配置一致性是比较难搞的,所以一些大型的团队 以及框架都是使用单体仓库的模式,比如lerna 等工具. ncm 借鉴了helm .mrm.kyt.yarn 等开发工 ...

  2. C libraries in Linux

    Copy from a book. There are several C libraries to choose from. The main options are as follows: gli ...

  3. Spring事务传播属性和隔离

     1 事务的传播属性(Propagation)  1) REQUIRED ,这个是默认的属性 Support a current transaction, create a new one if no ...

  4. java int and Integer

    本文转自:https://www.cnblogs.com/guodongdidi/p/6953217.html int和Integer的区别 1.Integer是int的包装类,int则是java的一 ...

  5. Percona XtraDB Cluster高可用与状态快照传输(PXC 5.7 )

    Percona XtraDB Cluster(下称PXC)高可用集群支持任意节点在运行期间的重启,升级或者意外宕机,即它解决了单点故障问题.那在这个意外宕机或者重启期间,该节点丢失的数据如何再次进行同 ...

  6. hive 安装 和基本使用

    hive是什么: hive是一个数据仓库,hive不是一个数据库,hive 不没有自己的数据,hive的数据存在hdfs 中,hive 依赖一个关系型数据库来存储 自己在 hdfs 中的数据的映射关系 ...

  7. Jmeter学习—004—使用代理录制脚本—HTTP代理服务器（APP、web皆可）

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/mmmmmmm_2niu/article/details/78136253记得我最开始使用jmeter ...

  8. 读DataSnap源代码（四）

    继续篇中的 function TCustomWebDispatcher.DispatchAction(Request: TWebRequest; Response: TWebResponse): Bo ...

  9. php exec返回状态为1

    之前在用到php exec 时 总是保存,返回状态1,那这时怎么排查呢 exec('ls 2>&1', $output, $return_val); print_r($output); ...

  10. SPI初识

    SPI初识 1.信息来源 2.需要了解的是SPI(x1,x2,x4)