Vue.jsでフォームバリデーション 2

イエネル/ February 7, 2020/ Others/ 0 comments

こんにちは、今回VUE.JSでプラグイン使ってフォームバリデーションします。 バリデーションする為に、必要プラグインは vee-validate です。 下記のNPMコマンド実行して、プラグインをダウンロードします。 次は、 vee-validate を私たちのプロジェクトで使える為にインポートします。 バリデーションスクリプトはこちらです。 このコードを実行するとエラーの場合 ’電話番号は9~16桁にする必要があります。’表示します。

Vue.jsでフォームバリデーション

イエネル/ January 8, 2020/ Others/ 0 comments

こんにちは、今日はVue.jsでフォームバリデーションのこと書きます。 とりあえず、フォームを作成します。 HTMLフォームに書いてある「novalidate=”true”」の目的はブラウザーのバリデーションをバイパスするためでした。novalidate=”true”を追加で入れない場合は、私たちの作ったバリデーションコードを実行する前にブラウザー自分でバリデーション起こします。次は、Vue.jsコードを書きます。 これだけです。フォームの送信ボタン押すとVue.jsのcheckFormメソッドは実行してバリデーションします。

vuejsでプラグインなしでプロセスバー作ろう

イエネル/ October 13, 2019/ Home, Others

こんにちは、VUEJSに対して初めての記事を書いてます。初めの記事で一緒にサードパーティプラグイン使わずにプロセスバー作りましょう。 ステップ1:VUEJSのテンプレート作ります。 ステップ2:ボタンのonclickイベント ステップ3:CSS 上記のVUEJSコード説明します。 Animate ProgressBar と呼ぶボタンをクリックするとanimateProgressBarメソッドを実行します、このメソッドはただのJavascriptスレッドです、0.5秒ごとに再実行します、毎回実行するとprocessStatusにstepsで設定した数字を足します。 次はv-bind:style=”{width: processStatus + ‘%’}”このprocessStatusを見て、そこに書いてある数字をスタイルに入れます。実際動かすとプロセスバーのスタイルは下記の方に変わります。 スレッドの中にあるIF文書でプロセスバーは100%になってるかどうか確認します。プロセスは100%になったら IF分の中のコード実行してclearInterval(this.intervalId) スレッドを完了する。 ソースコードの全部です。 次のポストまで。