layui 頁面控制元件

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

<!doctype html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title>Layui</title>  
  <meta name="renderer" content="webkit">  
  <meta http 
-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
  <link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css"  media="all">   

</head>  
<body>  
                
<fieldset class="layui-elem-field layui-field-title">  
  <legend>響應式的表單集合</legend>  
</fieldset>  
   
<form class="layui-form" 
 action="">  
  <div class="layui-form-item">  
    <label class="layui-form-label">單行輸入框</label>  
    <div class="layui-input-block">  
      <input name="title" class="layui-input" type="text" placeholder="請輸入標題" autocomplete="off" lay-verify="title">  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">驗證必填項</label>  
    <div class="layui-input-block">  
      <input name="username" class="layui-input" type="text" placeholder="請輸入" autocomplete="off" lay-verify="required">  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">驗證手機</label>  
    <div class="layui-input-inline">  
      <input name="phone" class="layui-input" type="tel" autocomplete="off" lay-verify="phone">  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">驗證郵箱</label>  
    <div class="layui-input-inline">  
      <input name="email" class="layui-input" type="text" autocomplete="off" lay-verify="email">  
    </div>  
  </div>  
    
  <div class="layui-form-item">  
    <div class="layui-inline">  
      <label class="layui-form-label">驗證數字</label>  
      <div class="layui-input-inline">  
        <input name="number" class="layui-input" type="number" autocomplete="off" lay-verify="number">  
      </div>  
    </div>  
    <div class="layui-inline">  
      <label class="layui-form-label">驗證日期</label>  
      <div class="layui-input-block">  
        <input name="date" class="layui-input" id="date" onclick="layui.laydate({elem: this})" type="text" placeholder="yyyy-mm-dd" autocomplete="off" lay-verify="date">  
      </div>  
    </div>  
    <div class="layui-inline">  
      <label class="layui-form-label">驗證連結</label>  
      <div class="layui-input-block">  
        <input name="url" class="layui-input" type="tel" autocomplete="off" lay-verify="url">  
      </div>  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">驗證身份證</label>  
    <div class="layui-input-block">  
      <input name="identity" class="layui-input" type="text" placeholder="" autocomplete="off" lay-verify="identity">  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">自定義驗證</label>  
    <div class="layui-input-inline">  
      <input name="password" class="layui-input" type="password" placeholder="請輸入密碼" autocomplete="off" lay-verify="pass">  
    </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 name="price_min" class="layui-input" type="text" placeholder="￥" autocomplete="off">  
      </div>  
      <div class="layui-form-mid">-</div>  
      <div class="layui-input-inline" style="width: 100px;">  
        <input name="price_max" class="layui-input" type="text" placeholder="￥" autocomplete="off">  
      </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">  
    <label class="layui-form-label">行內選擇框</label>  
    <div class="layui-input-inline">  
      <select name="quiz">  
        <option value="">請選擇省</option>  
        <option value="浙江" selected="">浙江省</option>  
        <option value="你的工號">江西省</option>  
        <option value="你最喜歡的老師">福建省</option>  
      </select>  
    </div>  
    <div class="layui-input-inline">  
      <select name="quiz">  
        <option value="">請選擇市</option>  
        <option value="杭州">杭州</option>  
        <option value="寧波">寧波</option>  
        <option value="溫州">溫州</option>  
        <option value="溫州">台州</option>  
        <option value="溫州">紹興</option>  
      </select>  
    </div>  
    <div class="layui-input-inline">  
      <select name="quiz">  
        <option value="">請選擇縣/區</option>  
        <option value="西湖區">西湖區</option>  
        <option value="餘杭區">餘杭區</option>  
        <option value="拱墅區">臨安市</option>  
      </select>  
    </div>  
  </div>  
    
  <div class="layui-form-item">  
    <label class="layui-form-label">複選框</label>  
    <div class="layui-input-block">  
      <input name="like[write]" title="寫作" type="checkbox">  
      <input name="like[read]" title="閱讀" type="checkbox" checked="">  
      <input name="like[game]" title="遊戲" type="checkbox">  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">開關-關</label>  
    <div class="layui-input-block">  
      <input name="close" title="開關" type="checkbox" lay-skin="switch">  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">開關-開</label>  
    <div class="layui-input-block">  
      <input name="open" title="開關" type="checkbox" checked="" lay-filter="switchTest" lay-skin="switch">  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">單選框</label>  
    <div class="layui-input-block">  
      <input name="sex" title="男" type="radio" checked="" value="男">  
      <input name="sex" title="女" type="radio" value="女">  
      <input name="sex" title="保密" type="radio" value="密">  
    </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" placeholder="請輸入內容">請輸入內容</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" id="LAY_demo_editor"></textarea>  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <div class="layui-input-block">  
      <button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button>  
      <button class="layui-btn layui-btn-primary" type="reset">重置</button>  
    </div>  
  </div>  
</form>  
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">  
  <legend>方框風格的表單集合</legend>  
</fieldset>  
<form class="layui-form layui-form-pane" action="">  
  <div class="layui-form-item">  
    <label class="layui-form-label">長輸入框</label>  
    <div class="layui-input-block">  
      <input name="title" class="layui-input" type="text" placeholder="請輸入標題" autocomplete="off">  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">短輸入框</label>  
    <div class="layui-input-inline">  
      <input name="username" class="layui-input" type="text" placeholder="請輸入" autocomplete="off" lay-verify="required">  
    </div>  
  </div>  
    
  <div class="layui-form-item">  
    <div class="layui-inline">  
      <label class="layui-form-label">日期選擇</label>  
      <div class="layui-input-block">  
        <input name="date" class="layui-input" id="date" onclick="layui.laydate({elem: this})" type="text" autocomplete="off">  
      </div>  
    </div>  
    <div class="layui-inline">  
      <label class="layui-form-label">行內表單</label>  
      <div class="layui-input-inline">  
        <input name="number" class="layui-input" type="number" autocomplete="off">  
      </div>  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">密碼</label>  
    <div class="layui-input-inline">  
      <input name="password" class="layui-input" type="password" placeholder="請輸入密碼" autocomplete="off">  
    </div>  
    <div class="layui-form-mid layui-word-aux">請務必填寫使用者名稱</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 name="price_min" class="layui-input" type="text" placeholder="￥" autocomplete="off">  
      </div>  
      <div class="layui-form-mid">-</div>  
      <div class="layui-input-inline" style="width: 100px;">  
        <input name="price_max" class="layui-input" type="text" placeholder="￥" autocomplete="off">  
      </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">  
    <label class="layui-form-label">行內選擇框</label>  
    <div class="layui-input-inline">  
      <select name="quiz">  
        <option value="">請選擇省</option>  
        <option value="浙江" selected="">浙江省</option>  
        <option value="你的工號">江西省</option>  
        <option value="你最喜歡的老師">福建省</option>  
      </select>  
    </div>  
    <div class="layui-input-inline">  
      <select name="quiz">  
        <option value="">請選擇市</option>  
        <option value="杭州">杭州</option>  
        <option value="寧波">寧波</option>  
        <option value="溫州">溫州</option>  
        <option value="溫州">台州</option>  
        <option value="溫州">紹興</option>  
      </select>  
    </div>  
    <div class="layui-input-inline">  
      <select name="quiz">  
        <option value="">請選擇縣/區</option>  
        <option value="西湖區">西湖區</option>  
        <option value="餘杭區">餘杭區</option>  
        <option value="拱墅區">臨安市</option>  
      </select>  
    </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" placeholder="請輸入內容">請輸入內容</textarea>  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <button class="layui-btn" lay-filter="demo2" lay-submit="">跳轉式提交</button>  
  </div>  
</form>  
            
<script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>  
<script>  
layui.use(['form', 'layedit', 'laydate'], function(){  
  var form = layui.form()  
  ,layer = layui.layer  
  ,layedit = layui.layedit  
  ,laydate = layui.laydate;  
   
  //自定義驗證規則  
  form.verify({  
    title: function(value){  
      if(value.length < 5){  
        return '標題至少得5個字元啊';  
      }  
    }  
    ,pass: [/(.+){6,12}$/, '密碼必須6到12位']  
  });  
    
  //建立一個編輯器  
  layedit.build('LAY_demo_editor');  
    
  //監聽提交  
  form.on('submit(demo1)', function(data){  
    layer.alert(JSON.stringify(data.field), {  
      title: '最終的提交資訊'  
    })  
    return false;  
  });  
    
    
});  
</script>  
  
</body>  
</html>

layui 頁面控制元件

<!doctype html> <html> <head> <meta charset="utf-8"> &nbs

layui tab控制元件中載入外部html頁面

目前，潛入外部網頁的方式，主要有3種： iframe方式 <div><iframe src="xxx.jsp"></iframe> ajax方式 &l

layui-tree控制元件的使用和後端資料介面通用化

<?php include('./lay.php');?> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=de

如何實現JSP頁面控制元件的不可編輯——disabled readonly

很多時候，頁面上的一些專案是不能夠進行編輯的。這時候，我們可以用2種方法來實現。 1.設定readonly屬性例如： <td align="left"> <input type="text" id="usrId" name="usrId" valu

viewpager中操作頁面控制元件時出現空指標異常

在viewpager中新增linearlayout的點選事件出現空指標異常。 LinearLayout mylocation=(LinearLayout) findViewById(R.id.my_location); mylocation.setOnClickLis

基於Jquery WeUI的微信開發H5頁面控制元件的經驗總結（1）

在微信開發H5頁面的時候，往往藉助於WeUI或者Jquery WeUI等基礎上進行介面效果的開發，由於本人喜歡在Asp.net的Web介面上使用JQuery，因此比較傾向於使用 jQuery WeUI，本篇隨筆結合官方案例和自己的專案實際開發過程的經驗總結，對在H5頁面開發過程中設計到的介面控制元件

基於Jquery WeUI的微信開發H5頁面控制元件的經驗總結(2)

thinkphp+layui，在父頁面對彈窗中的控制元件進行賦值操作（傳值）。

問題描述：點選評論回覆按鈕->彈出表單輸入框->對所點選的按鈕進行回覆評論->提交回復。這裡遇到的問題就是怎麼通過layer建立一個彈窗並把這個需要操作的id值傳到iframe彈出層。解決：點選當前條需要回復的評論並獲取到這個評論的id值，在點選回覆按鈕是用

Winform DevExpress控制元件庫（二）使用SplashScreenManager控制元件定製程式載入頁面

SplashScreenManager控制元件：主要作用是顯示在進行耗時操作時的等待介面；位於工具箱 -> Navigation & Layout（導航欄與佈局類控制元件）目錄下；在工具箱輸入名稱SplashScreenManager檢索，然後直接拖拽

遍歷頁面上所有TextBox控制元件並給它賦值為string.Empty

Using System.Windows.Forms; foreach(Control control in this.Controls) { //as運算子是把一個型別轉換為另一型別如果不成功返回null is運算子是

layui中cheched控制元件

<form class="layui-form" > <div class="layui-form-item"> <label class="layui-form-label">複選框</label> <div class="layui-input-b

Webview頁面的控制元件元素定位

前言現在有很多App都是Hybrid的，即有原生的頁面又有Webview的頁面，元素的可以通過uiautomatorviewer工具進行控制元件元素的定位，Webview頁面的則無法通過此方式定位，而是需要Chrome瀏覽器來協助定位。 Webview控制元件元素定位 1、在手機中開啟當前ap

layui在table表格中新增時間控制元件

timeB為name layui.table.render({ elem: '#lay-purchasing-change', id: "layTableId1" ,

C#筆記——解構函式虛方法頁面處理事件的流程伺服器控制元件

解構函式定義：建構函式用於實現類的例項的初始化。每個類都有建構函式，即使沒有宣告它，編譯器也會自動提供一個預設的建構函式。當建立一個物件的時候，自動呼叫建構函式，執行其中語句。使用建構函式請注意以下幾個問題：一個類的建構函式通常與類名相同建構函式不宣告返回型別，

ASP.net頁面及控制元件

ASP.NET 是一個使用 HTML、CSS、JavaScript 和伺服器指令碼建立網頁和網站的開發框架。 ASP.NET 支援三種不同的開發模式： Web Pages（Web 頁面）、MVC（Model View Controller 模型-檢視-控制器）

WebBrowser控制元件頁面內容放大、縮小功能實現

在開發Winform程式中的WebBrowser控制元件時想要實現頁面內容放大、縮小功能，由於IE版本問題，WebBrowser中沒有Ctrl+滾輪實現放大、縮小頁面內容的功能，只能自己實現了。實現具體程式碼如下： 1。在引用中引用COM元件Microsoft Inte

c#學習筆記三如何訪問另一個頁面的控制元件資料

在Vs2005中新建一個Web專案，新增兩個Web窗體（Default、Default2），在Default窗體上新增兩個標準控制元件，一個TextBox（TextBox1）、一個Button（Button1），設定Button1的PostBackUrl屬性指向D

android UiAutomator獲取當前頁面某類控制元件個數的方法

本人在學習UiAutomator的時候，發現一個問題，就是我需要知道當前班級作業的個數，本來想用getchildCount()，發現原來是按行的，一行不一定有多少個小題，後來就想了一個辦法，selenium2java，裡面有一個findelements()的方法，借鑑了這個

頁面獲取Web控制元件ID不能正常獲取，它惹得禍

今天碰到個比較奇葩的問題，因為動了一下目標框架，又原來的4.5.1改為3.5，然後又改回來了4.5.1，結果執行專案的時候發現介面js的計算，不能正常獲值計算。於是就開始找問題唄，先是發現這個二手專案，頁面獲取控制元件值的時候，居然直接寫死id 【不建議效仿，下文有更合適的解決方案】例： $("#

ASP.NET MVC 頁面使用富文字控制元件的XSS漏洞問題

目前在做的專案存在XSS安全漏洞！原因是有一些頁面使用了富文字編輯框，為了使得其內容可以提交，為相關action設定了[ValidateInput(false)] 特性： [HttpPost] [ValidateInpu

layui 頁面控制元件

相關推薦