Vueはフォーム検証機能を実装します

Vueはフォーム検証機能を実装します

この記事では主に、NUXT の validate メソッドに基づいてフォーム検証を実装する方法について説明します。

検証メソッドをカプセル化した後は、rules="filter_rules({required:true,type:'mobile'})" のような 1 行のコードのみを使用して、ページに検証を実装する必要があります。

まず、導入効果を見てみましょう

1. 新しいvalidate.jsファイルを作成します。

このドキュメントには、いくつかの必須の検証ルールが含まれています。以下のコードを見てみましょう。

/**
* 16/11/18にjiachenpanによって作成されました。
**/
 
 
 
エクスポート関数isvalidUsername(str) {
  const valid_map = ['admin', 'editor']
 valid_map.indexOf(str.trim()) >= 0 を返す
 
}
 
// 非負数のエクスポート関数 noFuNumber (str) {
  定数reg = /^\d+(\.{0,1}\d+){0,0}$/ 
 reg.test(str) を返す
 
}
 
// 携帯電話番号エクスポート関数 isvalidMobile (str) { 
  定数reg = /^1(3|4|5|7|8)\d{9}$/ 
 reg.test(str) を返す
 
}
 
// 中国語、英語、数字エクスポート関数regexn(str){
  定数reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/ 
 reg.test(str) を返す
 
}
 
/* 合法的な URI */ 
エクスポート関数validateURL(textval){ 
const urlregex = /^(https?| ftp):\/\/( [za-z0-9.-+(: [a-za-z0-9.&%$-]+(25)*(25] -4] [0-9] | 1 [0-9] {2} | [1-9]?[0-9])){3} |(([a-za-z0-9-]+\。)*[a-za-z0-9-]+\ ] {2}))(:[0-9]+)*(\/($ | [a-za-z0-9。、? '\\+&%$#= 〜_-]+)*$/ 
urlregex.test(textval) を返す
 
}
  
 
/* 小文字*/ 
エクスポート関数validateLowerCase (str) {
  定数reg = /^[az]+$/
 reg.test(str) を返す
 
}
 
  
/* 大文字*/ 
エクスポート関数validateUpperCase (str) { 
   定数reg = /^[AZ]+$/ 
 reg.test(str) を返す
 
}
 
 
/* 大文字と小文字*/ 
エクスポート関数validateAlphabets(str){
  定数reg = /^[A-Za-z]+$/
 reg.test(str) を返す
 
}
 
 
/**
* メールを検証
* @param メール
* @returns {ブール値}
*/

2. 新しい filter_rules.js ファイルを作成します。

このドキュメントには、検証コールバック関数と検証フィールドが含まれています。

添付コード:

'@/utils/validate' から { isvalidMobile, regexn, noFuNumber } をインポートします。 
エクスポートデフォルト{
インストール (Vue) {
 
/**
* 注意: 型ルールを定義するときに、空でない検証を行う必要はありません。 * required:true を渡すだけで済みます。 * /
 
/* 数値が負でないかどうかをチェックします */
 
const isnoFuNumber = (ルール, 値, コールバック) => { 
 if (値 != null && 値 !== '') { 
 if (!noFuNumber(値)) { 
  callback(new Error('負でない数値を入力してください!')) 
 } それ以外 {
 
折り返し電話()
 
}
 
} それ以外 { 
折り返し電話()
 
}
 
}
 
/* 電話番号を確認する*/
const isvalidateMobile = (ルール、値、コールバック) => { 
if (値 != null && 値 !== '') {
if (!isvalidMobile(値)) {
callback(new Error('正しい携帯電話番号を入力してください!'))
 
  } それ以外 {
折り返し電話()
}
 
   } それ以外 { 
折り返し電話()
 
}
 
}
 
/* 不正な文字が含まれています (中国語、英語、数字のみ入力できます) */ 
const isvalidateRegexn = (ルール、値、コールバック) => { 
if (値 != null && 値 !== '') { 
if (!regexn(値)) { 
callback(new Error('不正な文字が含まれています (中国語、英語、数字のみ入力できます)!'))
 
} それ以外 {
 
折り返し電話() 
}
 
} それ以外 { 
折り返し電話()
 
}
 
}
 
/* 正の整数を入力してください */
 
// const isvalidateInteger = (ルール、値、コールバック) => { 
// if (値 != null && 値 != "") { 
// if (!integer(値)) { 
// callback(new Error('正の整数を入力してください!')) 
// } それ以外 { 
// 折り返し電話() 
// } 
// } 
// それ以外 {
 
// 折り返し電話(); 
// } 
// }
 
 
 
/**
* パラメータ項目
* 必須 true 必須フィールド* maxLength 文字列の最大長* minとmaxは同時に指定する必要があります min < max type=number
* 携帯電話番号を入力してください
* メールアドレス
* URL
* src/utils/validate には、さまざまなカスタム型定義が継続的に追加されています。
* */
 
 
Vue.prototype.filter_rules = 関数 (アイテム) {
ルール = [] 
if (item.required) { 
rules.push({ required: true, message: 'この入力は必須です!', trigger: 'blur' })
 
}
 
if (item.maxLength) {
ルール.push({ 最小: 1, 最大: item.maxLength, メッセージ: '最大' + item.maxLength + '文字数で入力してください!', トリガー: 'blur' })
 
}
 
if (item.min && item.max) {
rules.push({ min: item.min, max: item.max, message: '文字の長さは ' + item.min + ' から ' + item.max + ' までです!', trigger: 'blur' })
 
}
 
if (アイテムタイプ) { 
type = item.type とします。
スイッチ(タイプ){
 
// ケース 'email': 
// rules.push({ type: 'email', message: '有効なメールアドレスを入力してください', trigger: 'blur,change' }) 
// break isnoFuNumber
 
ケース 'activeOrder': 
ルールをプッシュします({ バリデータ: isnoFuNumber, トリガー: 'blur' }) 
壊す
 
ケース「モバイル」: 
ルールをプッシュします({ バリデータ: isvalidateMobile、トリガー: 'blur' }) 
壊す

ケース '名前': 
ルール.push({ バリデータ: isvalidateRegexn、メッセージ: '有効なユーザー名を入力してください'、トリガー: 'blur' })
壊す
 
ケース 'パスワード': 
ルール.push({ バリデータ: isvalidateRegexn、メッセージ: 'パスワードを入力してください'、トリガー: 'blur' }) 
壊す
 
ケース 'org_name': 
ルール.push({ バリデータ: isvalidateRegexn、メッセージ: '組織名に特殊文字を含めることはできません'、トリガー: 'blur' }) 
壊す
 
 
デフォルト:
 
ルールをプッシュする({})
 
壊す
 
}
 
}
 
 
返品ルール
 
}
 
}
 
}

3. ページで紹介する:

'@/utils/filter_rules' から Validate をインポートします。

4. ページ内で検証を使用します。

検証ルールは el-form-item タグに記述する必要があります。

以下の点に注意してください。

これら 3 つの場所の名前は一貫して記述する必要があります。

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

以下もご興味があるかもしれません:
  • Vue フォーム検証のやり方を本当に知っていますか? vue フォーム検証 (フォーム) 検証
  • Vueフォーム検証プラグインであるVue Validatorの使い方の詳細な説明
  • Vue ElementUI のフォーム検証で発生した問題
  • Vue+elementUI はフォームと画像のアップロードおよび検証機能の例を実装します
  • Vue で Element コンポーネントを使用する場合の v-for ループでのフォーム項目検証方法
  • Vueはユニバーサルフォーム検証機能を迅速に実装します
  • Vue elementui フォーム検証の実装
  • Vueはフォーム検証を実装するためにelement-uiを使用します
  • Vueは小さなフォーム検証機能を実装します
  • Vueはフィールド検証を個別に削除するフォームを実装します

<<:  Mysql のフィールドのデータの一部をバッチ置換する (推奨)

>>:  Ubuntu 20.04 ベスト設定ガイド (初心者向け)

推薦する

HTMLのフォントがline-heightを指定しても垂直方向に中央揃えできない問題の解決方法を詳しく説明します

による写真に示されている効果を例に挙げてみましょう。明らかに、「次へ」というテキストを水平方向だけで...

HTML テーブルの行間隔を変更する方法の例

HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...

nginx サーバーでの 502 不正なゲートウェイ エラーの原因のトラブルシューティング

パブリックアカウントのファンデータを同期してバッチプッシュするときに、サーバーがエラー502を報告し...

HTML ドキュメントに CSS を埋め込む一般的な 3 つの方法

HTMLでCSSを定義するには、埋め込み、リンク、インラインの3つの方法が一般的に使用されます。 1...

Founder フォント ライブラリの中国語と英語のファイル名比較表

Founder Type Library は、Founder Type Library ビジネス チ...

MySQL データベースのマスター スレーブ分離のサンプル コード

導入MySQL データベースの読み取りと書き込みの分離を設定すると、データベースに対する書き込み操作...

Linuxディレクトリ構造の詳細な紹介

Linuxを学び始めるときは、まずLinuxの標準ディレクトリ構造を理解する必要があります。 / r...

CSSをインポートする方法は何ですか?linkと@importの違いは何ですか?選択方法

Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用していま...

JavaScript Sandboxについての簡単な説明

序文:サンドボックスといえば、私たちの頭には反射的に上の写真が思い浮かび、すぐに興味がわいてくるかも...

mysql5.7.17.msi インストール グラフィック チュートリアル

mysql-5.7.17.msiのインストール、スクリーンショットに従ってください、ステップバイステ...

HTML のスクロールバーについて/スクロールバーの削除

1. xhtmlの下のスクロールバーの色元の HTML では、ページ全体のスクロール バーを次のよう...

MySQL における一般的な高度な SQL ステートメント

MySQL 高度な SQL ステートメント kgc を使用します。 テーブルlocation(Reg...

Linux で docker-compose を使用したソフトウェア構成の詳細な説明

序文この記事では、docker-compose の構成をいくつか紹介します。これらを参考にして、独自...

DockerにTensorFlow環境を素早くインストールする方法

Docker に TensorFlow 環境をすばやくインストールし、TensorFlow を使用し...

Docker ファイルの保存パス、ポート マッピング操作モードの変更

コンテナの起動コマンドを取得する方法コンテナはすでに作成されていますが、その起動パラメータ(データが...