50. (理解) フォーム検証プラグイン

例証する

(1) 登録/ログインフォームなどの一部のプロジェクトでは、リクエストを送信する前にフォームの入力データの検証が必要です。

(2) フォアグラウンドフォームが正常に検証された場合にのみ、リクエストが送信されます

(3) 検証に失敗した場合、アラートの形式ではなく、インターフェース上の赤いテキストの形式でプロンプトが表示されます。

(4) 確認のタイミングは、送信をクリックするだけでなく、入力プロセス中にリアルタイムで確認することもできます

安装命令：cnpm install --save vee-validate@2

互換性のあるバージョン:

ここに画像の説明を挿入

使用手順:

プラグインをインストールする
src/main.js にフォーム検証プラグインを導入する

//引入表单校验插件
import "@/plugins/validate";

plugins フォルダーの下に新しい validates.js ファイルを作成して、検証ルールを構成します。

//vee-validate插件：表单验证区域’
import Vue from "vue";
import VeeValidate from "vee-validate";
//中文提示信息
import zh_CN from "vee-validate/dist/locale/zh_CN";
Vue.use(VeeValidate);

//表单验证
VeeValidate.Validator.localize("zh_CN", {
    messages: {
        ...zh_CN.messages,
        is: (field) => `${field}必须与密码相同`, // 修改内置规则的 message，让确认密码和密码相同
    },
    attributes: {
        phone: "手机号",
        code: "验证码",
        password: "密码",
        passwordConfirm: "确认密码",
        checkedAgreement:'协议'
    },
});

//自定义校验规则
VeeValidate.Validator.extend("tongyi", {
    validate: (value) => {
        return value;
    },
    getMessage: (field) => field + "必须同意",
});

検証が必要なコンポーネントで使用され、主に v-validate、:class、errors.has、errors.first を追加し、それらすべてが検査に合格したかどうかを判断する一連の操作を追加します。

<input placeholder="请输入你的手机号" v-model="phone" name="zai" v-validate="{ required: true, regex: /^1\d{10}$/ }" :class="{ invalid: errors.has('phone') }"
        />
<span class="error-msg">{
   
   { errors.first("phone") }}</span>

const success = await this.$validator.validateAll();
if (success) {
	...
}

コードを変更します。

src/main.js

//引入表单校验插件
import "@/plugins/validate";

src/plugins/validate.js

//vee-validate插件：表单验证区域’
import Vue from "vue";
import VeeValidate from "vee-validate";
//中文提示信息
import zh_CN from "vee-validate/dist/locale/zh_CN";
Vue.use(VeeValidate);

//表单验证
VeeValidate.Validator.localize("zh_CN", {
    messages: {
        ...zh_CN.messages,
        is: (field) => `${field}必须与密码相同`, // 修改内置规则的 message，让确认密码和密码相同
    },
    attributes: {
        phone: "手机号",
        code: "验证码",
        password: "密码",
        passwordConfirm: "确认密码",
        checkedAgreement:'协议'
    },
});

//自定义校验规则
VeeValidate.Validator.extend("tongyi", {
    validate: (value) => {
        return value;
    },
    getMessage: (field) => field + "必须同意",
});

src/pages/Register/index.vue

<div class="content">
        <label>手机号:</label>
        <input placeholder="请输入你的手机号" v-model="phone" name="zai" v-validate="{ required: true, regex: /^1\d{10}$/ }" :class="{ invalid: errors.has('phone') }"
        />
        <span class="error-msg">{
   
   { errors.first("phone") }}</span>
      </div>
      <div class="content">
        <label>验证码:</label>
        <input placeholder="请输入你的验证码" v-model="code" name="code" v-validate="{ required: true, regex: /^\d{6}$/ }" :class="{ invalid: errors.has('code') }"
        />
        <button style="width:100px;height:38px" @click="getCode">
          获取验证码
        </button>
        <span class="error-msg">{
   
   { errors.first("code") }}</span>
      </div>
      <div class="content">
        <label>登录密码:</label>
        <input placeholder="请输入你的密码" v-model="password" name="password" v-validate="{ required: true, regex: /^[0-9A-Za-z]{8,20}$/ }" :class="{ invalid: errors.has('password') }"
        />
        <span class="error-msg">{
   
   { errors.first("password") }}</span>
      </div>
      <div class="content">
        <label>确认密码:</label>
        <input placeholder="请输入确认密码" v-model="passwordConfirm" name="passwordConfirm" v-validate="{ required: true, is: password }" :class="{ invalid: errors.has('passwordConfirm') }"
        />
        <span class="error-msg">{
   
   { errors.first("passwordConfirm") }}</span>
      </div>
      <div class="controls">
        <input type="checkbox" v-model="checkedAgreement" name="checkedAgreement" v-validate="{ required: true, tongyi: true }" :class="{ invalid: errors.has('checkedAgreement') }"
        />
        <span>同意协议并注册《尚品汇用户协议》</span>
        <span class="error-msg">{
   
   { errors.first("checkedAgreement") }}</span>
      </div>
      
async registerUser() {
        try {
           //成功
          const success = await this.$validator.validateAll();
          //全部表单验证成功，在向服务器发请求，进行祖册
          //只要有一个表单没有成功，不会发请求
          if (success) {
            const {phone, code, password, passwordConfirm} = this
            await this.$store.dispatch('registerUser', {phone, password, code})
            //注册成功进行路由的跳转
            this.$router.push('/login')
          }
        } catch (error) {
           //失败
           alert(error.message)
        }
},

注 0: このプラグインについては、github を確認すると、使用規則が複雑で、使いにくく、覚えにくいため、このプラグインを理解するだけでよく、後で Hungry? 要素の検証規則を使用できます。

注 1: プラグインは、VUE2 や VUE3 などのバージョンの互換性に注意を払っています。

注意点2：

質問: form フォームに name 属性があるのはなぜですか?

回答: さまざまなラベル要素を区別するためです。

注 3: errors.has および errors.first の文字列は、データで定義された属性名と一致している必要があります。

注 4: 「vee-validate/dist/locale/zh_CN」からの zh_CN のインポートが validate.js ファイルに導入されています; これは、プラグインがデフォルトでエラーメッセージを英語で表示し、言語が後で自動的に中国語に変換されるためです。言語が紹介されています。

注 5: attributes 内の属性は、対応するコンポーネント内のデータによって定義された属性名です.データ属性名はデフォルトで表示されるため、エスケープする必要があります.中国語がここで定義されている場合は、それに応じて解析および変換されます.

注 6: チェックボックスの「tongyi」など、validate.js ファイルで検証ルールをカスタマイズできます。

注 7: 登録メソッドは、const success = await this.$validator.validateAll(); を忘れずに追加する必要があります。これは、フォームのすべての検証規則に合格したかどうかを表すために使用されます。

Vue Shangpinhui Mall Project-day07 [vue プラグイン-50. (理解) フォーム検証プラグイン]

記事ディレクトリ

50. (理解) フォーム検証プラグイン

私の他の関連記事へのリンク

추천