快速上手前端框架layui-Layui教程-PHP中文網

layui（諧音：類UI) 是一款採用自身模組規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。

快速上手前端框架layui

一、介紹

在使用layui之前，我們先要了解layui是什麼？

我覺得用作者賢心的一句話來概括就好了：為後端程式設計師設計的前端框架。

更詳細的描述是：這是一個封裝了各種css和js、Ajax等等的前端框架，其封裝程度之高，有時甚至對程式設計師來說不大友善。但對於前端技術一般的人來說，layui不失為一個好的工具。

二、開始使用layui

#使用方式：下載後導入項目，然後引用即可

<script th:src="@{/jquery-3.3.1.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}" />

登入後複製

先引用jquery，然後再引用layui.js和layui.css。

為什麼一定要本地？沒有CDN？

上面說了，layui封裝得太「好」了，程式設計師的自主性受到限制，這個時候需要修改layui的源碼，例如css的樣式－這也是layui的正確用法，而不只是簡單地使用。

layui的模組：layui是模組化的，包括form，layer，laydate，laypage等等模組，正是這些模組組成了完整的layui。使用layui的時候，需要指明自己使用的模組。

開始使用layui：

<script>
  layui.use([&#39;mod1&#39;, &#39;mod2&#39;],function(args){
    var mo1 = layui.mod1
       ,mo2 = layui.mod2;
  });
</script>

登入後複製

三、layui表單

下面以HTML中最常見的form表單來示範layui的使用。

html部分：

<fieldset class="layui-elem-field layui-field-title" style="margin-top:30px;">
    <legend style="text-align:center;">注册新账户</legend>
</fieldset>
<form id="reform" class="layui-form layui-form-pane"  th:action="@{/user/register.html}" method="POST">
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
        <input type="text" name="email" lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input" />
        </div>
    </div>
         
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" />
        </div>
    </div>
         
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password"  lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input" />
        </div>
    </div>
        
    <div class="layui-form-item">
        <label class="layui-form-label">重复密码</label>
        <div class="layui-input-block">
            <input type="password" name="repassword"   lay-verify="repass" placeholder="请输入密码" autocomplete="off" class="layui-input" />
        </div>
    </div>
        
    <div class="layui-form-item">
        <button  class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">注册</button>
    </div>
        
    <div style="text-align:center;margin-top:15px;">
        <input type="checkbox" name="agree"  lay-skin="primary" checked=""/>
                               我已阅读并同意
        <a href="#" id="agreementLink">《隐私条款》</a>
    </div>
</form>

登入後複製

javscript部分：

<!-- js for form input and submit -->
<script>
layui.use([&#39;form&#39;], function(){
  var form = layui.form;
 
  //自定义验证规则
  form.verify({
    pass: [/(.+){6,12}$/, &#39;密码必须6到12位&#39;]
    ,repass:function(value){
    	var pvalue = $("input[name=&#39;password&#39;]").val();
    	if(pvalue!=value){
    		return "两次输入的密码不一致";
    	}
    }
  }); 
  //监听提交
  form.on(&#39;submit(demo1)&#39;, function(data){
	var agreeChecked = data.field.agree;
    if(agreeChecked!="on"){
    	msg("未同意隐私条款");
    	return false;//阻止表单提交
    }
  });
});
</script>

登入後複製

效果圖：

快速上手前端框架layui