Layuiはログインインターフェース検証コードを実装します

Layuiはログインインターフェース検証コードを実装します

この記事の例では、ログインインターフェース検証コードを実装するためのlayuiの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

効果画像:

html:

<div class="layui-form-item">
    <div class="layui-col-xs6">
      <input type="text" value="" placeholder="確認コードを入力してください(大文字と小文字は区別されません)" class="input-val"> 
      <キャンバスid="キャンバス" 幅="100" 高さ="30"></キャンバス>  
     </div>
      <div>
      <input type="button" value="ログイン" class="layui-btn layui-btn-fluid" lay-submit lay-filter="ログイン"> 
      </div>         
</div>

次はJSです:

var show_num=[];
  $(関数()
  {
   描画(表示番号)
   $("#canvas").on('クリック',function()
   {
  描画(表示番号)      
   })      
  });

次に、2 つの関数を呼び出します。

関数draw(show_num) {
            var canvas_width = $('#canvas').width();
            var canvas_height = $('#canvas').height();
            var canvas = document.getElementById("canvas"); // キャンバス オブジェクト (俳優) を取得します。 var context = canvas.getContext("2d"); // キャンバス描画環境 (俳優のパフォーマンス ステージ) を取得します。 canvas.width = canvas_width;
            キャンバスの高さ = キャンバスの高さ;
            var sCode = "A、B、C、E、F、G、H、J、K、L、M、N、P、Q、R、S、T、W、X、Y、Z、1、2、3、4、5、6、7、8、9、0";
            var aCode = sCode.split(",");
            var aLength = aCode.length; //配列の長さを取得します for (var i = 0; i <= 3; i++) {
                var j = Math.floor(Math.random() * aLength); //ランダムなインデックス値を取得します。 var deg = Math.random() * 30 * Math.PI / 180; //0から30の間のランダムなラジアンを生成します。 var txt = aCode[j]; //ランダムなコンテンツを取得します。 show_num[i] = txt.toLowerCase();
                var x = 10 + i * 20; //キャンバス上のテキストのx座標var y = 20 + Math.random() * 8; //キャンバス上のテキストのy座標context.font = "bold 23px Microsoft YaHei";

                コンテキストを翻訳します(x, y);
                コンテキストを回転します(度);

                context.fillStyle = ランダムカラー();
                コンテキスト.fillText(txt, 0, 0);

                コンテキストを回転します(-deg);
                コンテキストを翻訳します(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //検証コードに線を表示します context.strokeStyle = randomColor();
                コンテキスト.beginPath();
                コンテキストを移動します。(Math.random() * キャンバスの幅、Math.random() * キャンバスの高さ)
                context.lineTo(Math.random() * キャンバスの幅、Math.random() * キャンバスの高さ);
                コンテキスト.stroke();
            }
            for (var i = 0; i <= 30; i++) { //検証コードに小さなドットを表示します context.strokeStyle = randomColor();
                コンテキスト.beginPath();
                var x = Math.random() * キャンバス幅;
                var y = Math.random() * canvas_height;
                コンテキストを移動します(x, y);
                コンテキスト.lineTo(x + 1, y + 1);
                コンテキスト.stroke();
            }
        }

        function randomColor() { //ランダムな色の値を取得します var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            "rgb(" + r + "," + g + "," + b + ")" を返します。
        }

スタイルはプロジェクトに応じて調整する必要があります。これが私のスタイルです:

<スタイル>
        .コード {
            幅: 100%;
            マージン: 0 自動;
        }
        .入力値 {
            幅: 63%;
            背景: #ffffff;
            高さ:2.8rem;
            パディング: 0 2%;
            境界線の半径: 5px;
            境界線: なし;
            境界線: 1px実線rgba(0,0,0,.2);
            フォントサイズ: 0.9rem;
        }
        #キャンバス {
            フロート: 右;
            表示: インラインブロック;
            境界線: 1px 実線 #ccc;
            境界線の半径: 5px;
            カーソル: ポインタ;
        }
</スタイル>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • layUIの検証コード機能と検証例

<<:  この記事ではSQL CASE WHENの使い方を詳しく説明します

>>:  Linuxの運用と保守、基本的なプロセス管理、リアルタイム監視と制御

推薦する

jsを使用してカルーセル効果を実現する

今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...

一般的な XHTML タグの使用方法の紹介

XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...

MySQL 学習ノート: データ エンジン

現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...

Dockerイメージの作成、保存、読み込み方法

イメージを作成する方法は 3 つあります。既存のイメージに基づいてコンテナを作成する、ローカル テン...

海外のウェブページのカラーマッチング事例20選共有

この記事では、優れた Web ページのカラー マッチングの事例を 20 件集めて紹介します。これらの...

Vue シンプル登録ページ + 確認コード送信機能の実装例

目次1. エフェクト表示2. 検証コードとメールプッシュ管理の強化(後述のブログを参照) 3. 一般...

Linuxで$を#に変更する方法

このシステムでは、# 記号は root ユーザーを表し、$ 記号は通常のユーザーを表します。では、ど...

html オプション 無効 選択 選択 無効 オプションの例

コードをコピーコードは次のとおりです。 <選択> <オプション値="&q...

CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...

CentOS 6.x のインストール時に発生するエラー「ディスク sda に BIOS RAID メタデータが含まれています」の解決方法

今日、CentOS6.2 をインストールしていたところ、ハード ドライブの検出段階を通過できませんで...

MySQL で複数のテーブルにビューを作成する方法

MySQLでは、2つ以上のベーステーブルにビューを作成します。学生テーブルとstu_infoテーブル...

Node.js+expressメッセージボード機能実装例

目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...

js を使用してウォーターフォール効果を実現する

この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体...

Reactはダブルスライダークロススライドを実装します

この記事では、Reactでダブルスライダークロススライドを実装するための具体的なコードを参考までに共...