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の運用と保守、基本的なプロセス管理、リアルタイム監視と制御

推薦する

クリックして展開し、全文を読む機能を実現する純粋なCSS

注記記事表示リストインターフェースを開発する場合、情報の基本的な概要を提供するために記事ヘッダーコン...

MySql 5.7.21 無料インストール バージョンの構成方法 (Win10 の場合)

1.インストールしたい場所に解凍し、my.iniファイルを作成します。 my.iniの内容は次のと...

MySql のクラッシュとサービスの起動失敗の解決策

私は長い間PHPに触れてきましたが、インストール環境は非常に不慣れです。多くの問題に遭遇しました。B...

MySQLの文字セットと検証ルールの詳細な説明

1いくつかの一般的な文字セットMySQL で最も一般的な文字セットには、ASCII 文字セット、ラテ...

InnoDB エンジンのパフォーマンスを最適化するための my.cnf パラメータ構成

私はインターネット上で数え切れないほどの my.cnf 構成を読みましたが、言及されている構成のほと...

Linux で独自の Nexus プライベート サーバーを構築する方法

この記事では、Linuxサーバー上でDockerを使用してNexusプライベートサーバーを構築する方...

HTML シンプルショッピング数量アプレット

この記事では、参考までにシンプルなHTMLショッピング数量アプレットを紹介します。具体的な内容は次の...

TypeScriptの基本型の詳細な説明

目次ブール型数値型文字列型文字列と数値を連結する未定義およびnull配列型タプル型列挙型あらゆるタイ...

CSS BEM 記述標準の詳細な説明

BEM は、Web 開発に対するコンポーネントベースのアプローチです。ユーザー インターフェイスを独...

CSS でのフィルタープロパティの使用に関する詳細な説明

フィルター属性は要素の視覚効果を定義しますぼかし画像にガウスぼかしを適用します。 「半径」の値は、ガ...

jQueryはショッピングカートの完全な機能を実現します

この記事では、ショッピングカートの完全な機能を実現するためのjQueryの具体的なコードを参考までに...

動的なセカンダリメニューを実現するためのCSS

シンプルなセカンダリメニューを動的に実装するマウスを第 1 レベルのラベル上に置くと、マウスが小さな...

IE5.0以降のHTCコンポーネントの定義の概要

Microsoft IE 5.0 がリリースされる前は、Web プログラミングにおける最大の課題は、...

SSH経由でリモートLinuxシステムでコマンドを実行する方法

場合によっては、リモート マシンでいくつかのコマンドを実行する必要があることがあります。これが時々行...

HTML のボタン タグをクリックしてページにジャンプする 3 つの方法

方法1: onclickイベントを使用する <input type="button&...