データ検証とフォーム検証に Vue と Element-UI を使用する方法
データ検証とフォーム検証に Vue と Element-UI を使用する方法
はじめに:
Web アプリケーション開発のプロセスにおいて、フォーム検証は非常に重要な部分です。ユーザーが入力したデータが期待される形式と要件に確実に準拠するため、アプリケーションの安定性とデータの精度が向上します。 Vue.js は現在非常に人気のある JavaScript フレームワークであり、Element-UI は Vue.js に基づく UI コンポーネント ライブラリのセットであり、開発者がフォーム検証を実行しやすくするための豊富なフォーム コンポーネントと検証メソッドを提供します。この記事では、データ検証とフォーム検証に Vue と Element-UI を使用する方法を紹介し、対応するコード例を添付します。
1. Element-UI をインストールし、Vue プロジェクトを構成する
まず、Element-UI をインストールし、Vue プロジェクトを構成する必要があります。次のコマンドで Element-UI をインストールできます:
npm install element-ui --save
次に、main.js ファイルに Element-UI を導入します:
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
2. フォーム検証の基本的な使用法
Element- UI は、フォーム検証を簡単に完了するための一連の検証方法と手順を提供します。以下は、基本的なフォーム検証に Element-UI を使用する方法を示す簡単な例です。
<template> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '用户名长度在3到10个字符之间', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单验证通过,可以提交表单 console.log('表单验证通过'); } else { // 表单验证不通过 console.log('表单验证不通过'); return false; } }); }, resetForm() { this.$refs.form.resetFields(); } } }; </script>
上記のコードでは、el-form コンポーネントを使用して 2 つの el-form-item コンポーネントをラップしています。 -input は、Element-UI が提供する入力ボックス コンポーネントです。 v-model命令とフォームデータの双方向バインディングにより、入力ボックスとフォームデータの同期更新が実現されます。
データ オプションでは、フォームのデータと検証ルールを定義します。検証ルールは、各フィールドの検証ルールを指定する rules 属性を通じて el-form コンポーネントに渡されます。上の例では、ユーザー名とパスワードのフィールドに必須のルールと長さのルールを定義しました。
submitForm メソッドでは、フォーム検証のために this.$refs.form.validate メソッドを呼び出します。このメソッドは、フォーム検証に合格したかどうかを示すブール値を返します。検証に合格した場合はフォーム データを送信できますが、検証に失敗した場合はフォームの送信を禁止できます。
resetForm メソッドでは、this.$refs.form.resetFields メソッドを使用してフォーム データをリセットします。
以上がElement-UIを使ったフォーム検証の基本的な使い方です。
3. カスタマイズされた検証ルール
Element-UI が提供する検証ルールを使用することに加えて、検証ルールをカスタマイズすることもできます。以下は、カスタム携帯電話番号検証ルールの例です。
<template> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="手机号码" prop="phone"> <el-input v-model="form.phone"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { phone: '' }, rules: { phone: [ { required: true, message: '请输入手机号码', trigger: 'blur' }, { validator: this.validatePhone, trigger: 'blur' } ] } }; }, methods: { validatePhone(rule, value, callback) { const reg = /^1[3|4|5|7|8][0-9]d{8}$/; if (reg.test(value)) { callback(); } else { callback(new Error('手机号码格式不正确')); } }, submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单验证通过,可以提交表单 console.log('表单验证通过'); } else { // 表单验证不通过 console.log('表单验证不通过'); return false; } }); }, resetForm() { this.$refs.form.resetFields(); } } }; </script>
上記のコードでは、カスタム検証ルールを追加することで、validator 属性を使用して検証メソッド validatePhone を指定します。 validatePhone メソッドでは、正規表現を使用して携帯電話番号が要件を満たしているかどうかを判断します。検証に合格した場合は callback() を呼び出し、検証が失敗した場合は callback(new Error('携帯電話番号の形式が正しくありません) を呼び出します'))。
上記のコード例を通じて、Vue と Element-UI が、ほとんどの検証ニーズを満たすことができるフォーム検証メカニズムの完全なセットを提供していることがわかります。データ検証とフォーム検証に Vue と Element-UI を使用すると、開発作業がより効率的かつシンプルになります。この記事があなたのお役に立てば幸いです、読んでいただきありがとうございます!
以上がデータ検証とフォーム検証に Vue と Element-UI を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。

vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted()ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

vue.jsには、前のページに戻る4つの方法があります。$ router.go(-1)$ router.back()outes&lt; router-link to =&quot;/&quot; Component Window.history.back()、およびメソッド選択はシーンに依存します。

VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス:アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性:各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング:ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化:各ページには独自のURLがあり、SEOに役立ちます。

Vue Devtoolsを使用してブラウザのコンソールでVueタブを表示することにより、Vueバージョンを照会できます。 NPMを使用して、「NPM List -G Vue」コマンドを実行します。 package.jsonファイルの「依存関係」オブジェクトでVueアイテムを見つけます。 Vue CLIプロジェクトの場合、「Vue -Version」コマンドを実行します。 &lt; script&gt;でバージョン情報を確認してくださいVueファイルを参照するHTMLファイルにタグを付けます。

VUEの関数傍受は、指定された期間内に関数が呼び出され、パフォーマンスの問題を防ぐ回数を制限するために使用される手法です。実装方法は次のとおりです。LodashLibrary:Import {Debounce}から「Lodash」からインポート。 debounce関数を使用して、インターセプト関数を作成します。インターセプト関数を呼び出すと、制御関数は500ミリ秒でせいぜい1回呼び出されます。
