Lauiui でのフォームの使用例-ライユイのチュートリアル-php.cn

ホームページ

ウェブフロントエンド

ライユイのチュートリアル

Lauiui でのフォームの使用例

尚

Feb 13, 2020 pm 04:34 PM

layui

Lauiui でのフォームの使用例

1.layui の紹介:

1. Layui は、独自のモジュール仕様を使用して書かれたフロントエンド UI フレームワークであり、オープンソースのモジュラーフロントエンドです。これらとは異なる UI フレームワーク MVVM に基づく基盤となる UI フレームワーク。

2. 利点: ネイティブ開発モード、モジュール性、強力な互換性

3.layui は、PC の Web 側バックエンドシステムおよびフロントエンドインターフェイスの迅速な開発ソリューションとして使用できます

II 、ディレクトリ構造

Lauiui でのフォームの使用例

3. 導入方法とフォームケース

<!DOCTYPE html>
<html>
<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([&#39;form&#39;, &#39;layedit&#39;, &#39;laydate&#39;], function(){
      var form = layui.form
      ,layer = layui.layer
      ,layedit = layui.layedit
      ,laydate = layui.laydate;

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

      //创建一个编辑器
      var editIndex = layedit.build(&#39;LAY_demo_editor&#39;);

      //自定义验证规则
      form.verify({
        title: function(value){
          if(value.length < 5){
            return &#39;标题至少得5个字符啊&#39;;
          }
        }
        ,pass: [/(.+){6,12}$/, &#39;密码必须6到12位&#39;]
        ,content: function(value){
          layedit.sync(editIndex);
        }
      });

      //监听指定开关
      form.on(&#39;switch(switchTest)&#39;, function(data){
        layer.msg(&#39;开关checked：&#39;+ (this.checked ? &#39;true&#39; : &#39;false&#39;), {
          offset: &#39;6px&#39;
        });
        layer.tips(&#39;温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF&#39;, data.othis)
      });

      //监听提交
      form.on(&#39;submit(demo1)&#39;, function(data){
        layer.alert(JSON.stringify(data.field), {
          title: &#39;最终的提交信息&#39;
        })
        return false;
      });


    });
    </script>
</head>
<body>
    <form action="">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend>表单集合演示</legend>
        </fieldset>
      <div>
        <label>单行输入框</label>
        <div>
          <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" style="width:200px;">
        </div>
      </div>
      <div>
        <label>验证必填项</label>
        <div>
          <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off">
        </div>
      </div>

      <div>
        <div>
          <label>验证手机</label>
          <div>
            <input type="tel" name="phone" lay-verify="phone" autocomplete="off">
          </div>
        </div>
        <div>
          <label>验证邮箱</label>
          <div>
            <input type="text" name="email" lay-verify="email" autocomplete="off">
          </div>
        </div>
      </div>

      <div>
        <div>
          <label>多规则验证</label>
          <div>
            <input type="text" name="number" lay-verify="required|number" autocomplete="off">
          </div>
        </div>
        <div>
          <label>验证日期</label>
          <div>
            <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off">
          </div>
        </div>
        <div>
          <label>验证链接</label>
          <div>
            <input type="tel" name="url" lay-verify="url" autocomplete="off">
          </div>
        </div>
      </div>

      <div>
        <label>验证身份证</label>
        <div>
          <input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off">
        </div>
      </div>
      <div>
        <label>自定义验证</label>
        <div>
          <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off">
        </div>
        <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
      </div>

      <div>
        <div>
          <label>范围</label>
          <div style="width: 100px;">
            <input type="text" name="price_min" placeholder="￥" autocomplete="off">
          </div>
          <div>-</div>
          <div style="width: 100px;">
            <input type="text" name="price_max" placeholder="￥" autocomplete="off">
          </div>
        </div>
      </div>

      <div>
        <label>单行选择框</label>
        <div>
          <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>
        <div>
          <label>分组选择框</label>
          <div>
            <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>
          <label>搜索选择框</label>
          <div>
            <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>
        <label>联动选择框</label>
        <div>
          <select name="quiz1">
            <option value="">请选择省</option>
            <option value="浙江" selected="">浙江省</option>
            <option value="你的工号">江西省</option>
            <option value="你最喜欢的老师">福建省</option>
          </select>
        </div>
        <div>
          <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>
          <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>
        <label>复选框</label>
        <div>
          <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 pane="">
        <label>原始复选框</label>
        <div>
          <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>
        <label>开关-默认关</label>
        <div>
          <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
        </div>
      </div>
      <div>
        <label>开关-默认开</label>
        <div>
          <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
        </div>
      </div>
      <div>
        <label>单选框</label>
        <div>
          <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>普通文本域</label>
        <div>
          <textarea placeholder="请输入内容"></textarea>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label>编辑器</label>
        <div>
          <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
        </div>
      </div>
      <div>
        <div>
          <button lay-submit="" lay-filter="demo1">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
</body>
</html>

ログイン後にコピー

Lauiui の詳細については、## に注意してください。 #layui の使い方チュートリアル列。

以上がLauiui でのフォームの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7649

CakePHP チュートリアル

1392

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTミニクロスワードの回答

110

Related knowledge

Lauiuiログインページでジャンプを設定する方法 Apr 04, 2024 am 03:12 AM

Layui ログインページジャンプ設定手順: ジャンプコードの追加: ログインフォーム送信ボタンクリックイベントに判定を追加し、ログイン成功後、window.location.href 経由で指定ページにジャンプします。フォーム構成を変更します。lay-filter="login" のフォーム要素に非表示の入力フィールドを追加します。名前は「redirect」、値はターゲットページアドレスです。

Lauiuiでフォームデータを取得する方法 Apr 04, 2024 am 03:39 AM

layui は、フォームのすべてのフィールドデータを直接取得する、単一のフォーム要素の値を取得する、formAPI.getVal() メソッドを使用して指定されたフィールド値を取得する、フォームデータをシリアル化するなど、フォームデータを取得するためのさまざまなメソッドを提供します。これを AJAX リクエストパラメータとして使用し、フォーム送信イベントをリッスンしてデータを取得します。

Lauiuiでデータを転送する方法 Apr 26, 2024 am 03:39 AM

layui を使用してデータを送信する方法は次のとおりです。 Ajax を使用する: リクエストオブジェクトを作成し、リクエストパラメーター (URL、メソッド、データ) を設定し、レスポンスを処理します。組み込みメソッドを使用する: $.post、$.get、$.postJSON、$.getJSON などの組み込みメソッドを使用してデータ転送を簡素化します。

Lauiui が自己適応を実現する方法 Apr 26, 2024 am 03:00 AM

アダプティブレイアウトは、layui フレームワークのレスポンシブレイアウト機能を使用して実現できます。手順には以下が含まれます:layui フレームワークを参照する。アダプティブレイアウトコンテナを定義し、layui-container クラスを設定します。レスポンシブブレークポイント (xs/sm/md/lg) を使用して、特定のブレークポイントの下にある要素を非表示にします。グリッドシステム (layui-col-) を使用して要素の幅を指定します。オフセット (layui-offset-) によって間隔を作成します。応答性の高いユーティリティ (layui-invisible/show/block/inline) を使用して、要素の可視性とその表示方法を制御します。

lauiとvueの違いは何ですか？ Apr 04, 2024 am 03:54 AM

Lauiui と Vue の違いは主に機能と懸念事項に反映されます。 Layui は UI 要素の迅速な開発に重点を置き、ページ構築を簡素化するプレハブコンポーネントを提供します。Vue は、データバインディング、コンポーネント開発、および状態管理に重点を置いたフルスタックフレームワークで、複雑なアプリケーションの構築により適しています。 Layui は学習が簡単で、ページをすばやく作成するのに適しています。Vue は学習曲線が急ですが、スケーラブルで保守が簡単なアプリケーションの構築に役立ちます。プロジェクトのニーズと開発者のスキルレベルに応じて、適切なフレームワークを選択できます。

laui とはどういう意味ですか? Apr 04, 2024 am 04:33 AM

layui は、開発者が最新の応答性の高いインタラクティブな Web アプリケーションを迅速に構築できるように、豊富な UI コンポーネント、ツール、機能を提供するフロントエンド UI フレームワークです。その機能には、柔軟で軽量、モジュール式の設計、豊富なコンポーネント、強力なツール、簡単な機能が含まれます。カスタマイズ。管理システム、電子商取引プラットフォーム、コンテンツ管理システム、ソーシャルネットワーク、モバイルアプリケーションなど、さまざまな Web アプリケーションの開発に広く使用されています。

Lauiui フレームワークは何語ですか? Apr 04, 2024 am 04:39 AM

layui フレームワークは、開発者が応答性の高い Web アプリケーションを迅速に構築できるようにする、使いやすい UI コンポーネントとツールのセットを提供する JavaScript ベースのフロントエンドフレームワークです。その機能には、モジュール式、軽量、応答性が高く、完全なドキュメントとコミュニティサポートが含まれます。 layui は、管理バックエンドシステム、電子商取引 Web サイト、モバイルアプリケーションの開発で広く使用されています。利点は迅速な起動、効率の向上、メンテナンスの容易さですが、欠点はカスタマイズの貧弱さと技術の更新の遅さです。

Lauiui フレームワークと Vue フレームワークの違い Apr 26, 2024 am 01:27 AM

layui と vue はフロントエンドフレームワークであり、layui は UI コンポーネントとツールを提供する軽量ライブラリであり、vue は UI コンポーネント、状態管理、データバインディング、ルーティングなどの機能を提供する包括的なフレームワークです。 layui はモジュール型アーキテクチャに基づいており、vue はコンポーネント化されたアーキテクチャに基づいています。 lauiui には小規模なエコシステムがあり、vue には大規模でアクティブなエコシステムがあります。 Lauiui の学習曲線は低く、vue の学習曲線は急です。 Layui は小規模なプロジェクトや UI コンポーネントの迅速な開発に適しており、vue は大規模なプロジェクトや豊富な機能を必要とするシナリオに適しています。

See all articles

Lauiui でのフォームの使用例

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック