この記事では主に、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Mysql のフィールドのデータの一部をバッチ置換する (推奨)
>>: Ubuntu 20.04 ベスト設定ガイド (初心者向け)
Linux grep コマンドLinux の grep コマンドは、ファイル内の条件を満たす文字列を...
一般的な提案は、WHERE 条件のインデックスを作成することですが、これは実際には一方的です。インデ...
1. 需要絵が左から右へ無限ループで動く2. コードモバイルデバイスに適用されているため、rem 単...
目次序文1. MySQL メインストレージエンジン: 2. さまざまなストレージエンジンがテーブルを...
目次1. 問題2. 解決策オプション1:オプション2: 1. 問題この話は、エラーと脱落率を照会する...
表の構造は以下のとおりです。記事数は690件のみです。 記事テーブル article(id,titl...
絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...
1. TCP ラッパーの概要TCP Wrappers は TCP サービス プログラムを「ラップ」し...
多くのウェブサイトを閲覧すると、ブラウザのアドレスバーの前に小さなアイコンがあり、ブラウザのタブの位...
参考までに、シンプルなナンバープレート入力コンポーネント(vue)です。具体的な内容は次のとおりです...
プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...
win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...
Ubuntu ではデフォルトで root ログインが許可されていないため、初期の root アカウン...
目次トピック分析する基本的な解決策基本的な再帰再帰最適化要約するトピック私たちが答えなければならない...
私たちウェブマスターは皆、ウェブサイトを最適化する際に記事内のキーワードを太字にすることが最適化に非...