2. 程式人生 > >layui學習例項之form表單

layui學習例項之form表單

阿新 • • 發佈：2019-01-20

一、layui簡介：

  1. layui是一款採用自身模組規範編寫的前端 UI 框架，開源的模組化前 端 UI 框架，區別於那些基於 MVVM 底層的 UI 框架。
  2. 優點：原生開發模式、模組化、相容性強
  3. layui可作為 PC網頁端後臺系統與前臺介面的速成開發方案

二、目錄結構
目錄結構

三、引入方式與表單案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content
 
="text/html; charset=UTF-8">
    <title>layui_learn_one</title>
    <link rel="stylesheet" href="./layui-2.3.0/css/layui.css"> 
    <script type="text/javascript" src="./layui-2.3.0/layui.js"></script>
    <script>
    layui.use(['form', 'layedit', 'laydate'], function(){
 

      var form = layui.form
      ,layer = layui.layer
      ,layedit = layui.layedit
      ,laydate = layui.laydate;

      //日期
      laydate.render({
        elem: '#date'
      });
      laydate.render({
        elem: '#date1'
      });

      //建立一個編輯器
      var editIndex = layedit.build('LAY_demo_editor'
 
);

      //自定義驗證規則
      form.verify({
        title: function(value){
          if(value.length < 5){
            return '標題至少得5個字元啊';
          }
        }
        ,pass: [/(.+){6,12}$/, '密碼必須6到12位']
        ,content: function(value){
          layedit.sync(editIndex);
        }
      });

      //監聽指定開關
      form.on('switch(switchTest)', function(data){
        layer.msg('開關checked：'+ (this.checked ? 'true' : 'false'), {
          offset: '6px'
        });
        layer.tips('溫馨提示：請注意開關狀態的文字可以隨意定義，而不僅僅是ON|OFF', data.othis)
      });

      //監聽提交
      form.on('submit(demo1)', function(data){
        layer.alert(JSON.stringify(data.field), {
          title: '最終的提交資訊'
        })
        return false;
      });


    });
    </script>
</head>
<body>
    <form class="layui-form" action="">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend>表單集合演示</legend>
        </fieldset>
      <div class="layui-form-item">
        <label class="layui-form-label">單行輸入框</label>
        <div class="layui-input-block">
          <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="請輸入標題" class="layui-input" style="width:200px;">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">驗證必填項</label>
        <div class="layui-input-block">
          <input type="text" name="username" lay-verify="required" placeholder="請輸入" autocomplete="off" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">驗證手機</label>
          <div class="layui-input-inline">
            <input type="tel" name="phone" lay-verify="phone" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">驗證郵箱</label>
          <div class="layui-input-inline">
            <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">多規則驗證</label>
          <div class="layui-input-inline">
            <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">驗證日期</label>
          <div class="layui-input-inline">
            <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">驗證連結</label>
          <div class="layui-input-inline">
            <input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">驗證身份證</label>
        <div class="layui-input-block">
          <input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">自定義驗證</label>
        <div class="layui-input-inline">
          <input type="password" name="password" lay-verify="pass" placeholder="請輸入密碼" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">請填寫6到12位密碼</div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">範圍</label>
          <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid">-</div>
          <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">單行選擇框</label>
        <div class="layui-input-block">
          <select name="interest" lay-filter="aihao">
            <option value=""></option>
            <option value="0">寫作</option>
            <option value="1" selected="">閱讀</option>
            <option value="2">遊戲</option>
            <option value="3">音樂</option>
            <option value="4">旅行</option>
          </select>
        </div>
      </div>


      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">分組選擇框</label>
          <div class="layui-input-inline">
            <select name="quiz">
              <option value="">請選擇問題</option>
              <optgroup label="城市記憶">
                <option value="你工作的第一個城市">你工作的第一個城市</option>
              </optgroup>
              <optgroup label="學生時代">
                <option value="你的工號">你的工號</option>
                <option value="你最喜歡的老師">你最喜歡的老師</option>
              </optgroup>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">搜尋選擇框</label>
          <div class="layui-input-inline">
            <select name="modules" lay-verify="required" lay-search="">
              <option value="">直接選擇或搜尋選擇</option>
              <option value="1">layer</option>
              <option value="2">form</option>
              <option value="3">layim</option>
              <option value="4">element</option>
              <option value="5">laytpl</option>
              <option value="6">upload</option>
              <option value="7">laydate</option>
              <option value="8">laypage</option>
              <option value="9">flow</option>
              <option value="10">util</option>
              <option value="11">code</option>
              <option value="12">tree</option>
              <option value="13">layedit</option>
              <option value="14">nav</option>
              <option value="15">tab</option>
              <option value="16">table</option>
              <option value="17">select</option>
              <option value="18">checkbox</option>
              <option value="19">switch</option>
              <option value="20">radio</option>
            </select>
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">聯動選擇框</label>
        <div class="layui-input-inline">
          <select name="quiz1">
            <option value="">請選擇省</option>
            <option value="浙江" selected="">浙江省</option>
            <option value="你的工號">江西省</option>
            <option value="你最喜歡的老師">福建省</option>
          </select>
        </div>
        <div class="layui-input-inline">
          <select name="quiz2">
            <option value="">請選擇市</option>
            <option value="杭州">杭州</option>
            <option value="寧波" disabled="">寧波</option>
            <option value="溫州">溫州</option>
            <option value="溫州">台州</option>
            <option value="溫州">紹興</option>
          </select>
        </div>
        <div class="layui-input-inline">
          <select name="quiz3">
            <option value="">請選擇縣/區</option>
            <option value="西湖區">西湖區</option>
            <option value="餘杭區">餘杭區</option>
            <option value="拱墅區">臨安市</option>
          </select>
        </div>
        <div class="layui-form-mid layui-word-aux">此處只是演示聯動排版，並未做聯動互動</div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">複選框</label>
        <div class="layui-input-block">
          <input type="checkbox" name="like[write]" title="寫作">
          <input type="checkbox" name="like[read]" title="閱讀" checked="">
          <input type="checkbox" name="like[game]" title="遊戲">
        </div>
      </div>

      <div class="layui-form-item" pane="">
        <label class="layui-form-label">原始複選框</label>
        <div class="layui-input-block">
          <input type="checkbox" name="like1[write]" lay-skin="primary" title="寫作" checked="">
          <input type="checkbox" name="like1[read]" lay-skin="primary" title="閱讀">
          <input type="checkbox" name="like1[game]" lay-skin="primary" title="遊戲" disabled="">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">開關-預設關</label>
        <div class="layui-input-block">
          <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">開關-預設開</label>
        <div class="layui-input-block">
          <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">單選框</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="男" title="男" checked="">
          <input type="radio" name="sex" value="女" title="女">
          <input type="radio" name="sex" value="禁" title="禁用" disabled="">
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">普通文字域</label>
        <div class="layui-input-block">
          <textarea placeholder="請輸入內容" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">編輯器</label>
        <div class="layui-input-block">
          <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
</body>
</html>

相關推薦

layui學習例項之form表單

一、layui簡介： layui是一款採用自身模組規範編寫的前端 UI 框架，開源的模組化前 端 UI 框架，區別於那些基於 MVVM 底層的 UI 框架。 優點：原生開發模式、

知識總結之form表單屬性及H5新增特性

bsp ron mit 驗證 pick -s value 地址欄 屬性 一、form的幾大屬性 　　1.method屬性 　　　　規定用於發送 form-data 的 HTTP 方法，即請求的方式；主要用來提交參數與後臺數據進行交互。 　　　　分為GET和POST兩種方式，

初學servlet之form表單

exce cat eth col country values nts author ons 使用doget向頁面寫表單,使用dopost讀取表單內容,包括了單選按鈕,復選框,下拉列表等等的讀取方法,form的action屬性不寫,默認表單會被提交給請求他時用的相同的URL

Django框架 之 Form表單和Ajax上傳文件

不可 _for render ren files AS AD 什麽 OS 瀏覽目錄 Form表單上傳文件 Ajax上傳文件 偽造Ajax上傳文件 Form表單上傳文件 html <h3>form表單上傳文件&

71、Django之form表單

protoc valid init title except Go doc 列表 ima Form介紹 我們之前在HTML頁面中利用form表單向後端提交數據時，都會寫一些獲取用戶輸入的標簽並且用form標簽把它們包起來。 與此同時我們在好多場景下都需要對用戶的輸入做校驗

Django之form表單那點事

bootstrap msg 價格 code cap 愛好 ots exce 同時 Form介紹 我們之前在HTML頁面中利用form表單向後端提交數據時，都會寫一些獲取用戶輸入的標簽並且用form標簽把它們包起來。 與此同時我們在好多場景下都需要對用戶的輸入做校驗，比

Django 之 form表單

its html rom ida cal 從數據 disable ger orm Django中的Form表單 　　1、背景 　　　　平時我們在書寫form表單時，經常都是手動的去寫一些input標簽，讓用戶輸入一些功能，進行一些校驗的判斷，等等。Django中的for

Django之form表單

所有 install rip mod 由於 合格 NPU enc 多選框 Form介紹 總結，form組件的主要功能如下： 　　生成頁面可用的HTML標簽 　　對用戶提交的數據進行校驗 　　保留上次輸入內容 　　提示錯誤信息 普通方式手寫註冊功能 views.

Django之form表單詳解

構建一個表單 假設你想在你的網站上建立一個簡單的表單，以獲得使用者的名字。你需要類似這樣的模板： <form action="/your-name/" method="post"> <label for="your_name">Your name: </labe

Layui 在使用Layui框架中使用form表單中的標籤但是沒有css效果的解決方法

這是原來的程式碼 <label class="layui-form-label">搜尋選擇框</label> <div class="layui-input-inline"> <select name="module

Django元件之Form表單

一、Django中的Form表單介紹 我們之前在HTML頁面中利用form表單向後端提交資料時，都會寫一些獲取使用者輸入的標籤並且用form標籤把它們包起來。 與此同時我們在好多場景下都需要對使用者的輸入做校驗，比如校驗使用者是否輸入，輸入的長度和格式等正不正確。如果使用者輸入的內容有錯誤就需要

react+antd系列之Form表單(2)：格式限制驗證

格式限制 antd中表單的功能很多，下面就為大家整理了一下antd中常用的幾種表單輸入格式驗證： 1. 輸入框不能為空限制，如下： {getFieldDecorator('name', { rules: [{ require

react+antd系列之Form表單(1)：新增與刪除

在用antd的時候，我們如果要對錶單進行新增和刪除該怎麼弄呢，如下： import { connect } from 'dva'; import { Form, Input, Button } from 'antd'; import styles from './eg1.css';

Jquery之Form表單儲存位元組流圖片

最終效果，點選文字框後彈出檔案瀏覽框，選擇圖片檔案（會驗證），上傳伺服器成功（這裡用的MongoDB）後會返回一個路徑值，自動填入文字框中 部分JSP頁面  <form id="companyForm" method="post"> <input i

Django基礎之form表單的補充進階

1. 應用Bootstrap樣式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" conte

在使用Layui框架中使用form表單中的標籤但是沒有css效果的解決方法

這是原來的程式碼 <label class="layui-form-label">搜尋選擇框</label> <div class="layui-input-inline"> <select n

Jquery UI Dialog 之 Form 表單提交

我專注的是Dialog的Form表單提交的問題。 不知道大家使用Dialog的方式是什麼，我就說說我用的方式吧。 <divid="dialog">        <formid="dialogForm"method="post"action="

JSP Servlet之 form表單 與Servlet之間的引數傳送

JSP Servlet之 form表單 與Servlet之間的引數傳送 //index.html <html> <head> <title>welcome</title> </head

Demo系列一之 Form表單下載Excel檔案

效果圖區: 程式碼區: 前端程式碼,只提供點選事件中的內容; //"匯出Execl"按鈕點選事件 $("#export").click(function(){ var form = $

element-ui之form表單校驗的使用詳解

先吐槽一下，個人感覺element-ui提供的文件寫的太少，用的時候會踩很多坑。 如：表單驗證方法 傳入的value沒有值  等。 下面，是我對element-ui  form表單驗證使用的總結，應該能解決大部分問題，或者，也可以直接拿過去修改使用。 （本文程式碼使用的