Vueメソッドでの検査ルールの書き方-フロントエンドQ&A-php.cn

Vueメソッドでの検査ルールの書き方

王林

リリース： 2023-05-24 09:25:37

オリジナル

648 人が閲覧しました

Vue は、SPA (シングルページアプリケーション) アプリケーションの構築によく使用される人気の JavaScript フレームワークです。 Vue アプリケーションでは、ユーザー入力の検証は非常に重要な部分です。 Vue では、いくつかのルールとメソッドを定義することでユーザー入力の有効性をチェックし、それがアプリケーションのニーズを満たし、データのセキュリティが確保されていることを確認できます。

Vue には、必須、電子メール、数値などの組み込みの検証ルールがいくつか用意されています。 input 要素と form 要素を使用してデータバインディングを実行したり、検証ルールを対応する要素に直接バインドしたり、v-model ディレクティブを介してデータを Vue インスタンスデータにバインドしたりできます。さらに、データ検証のルールとメソッドをカスタマイズすることもできます。

1. 組み込みの検証ルール

1. required

required ルールの機能は、入力ボックスが空かどうかを判断することです。空の場合は、検証が失敗します。

テンプレートで使用される:

<input type="text" v-model="name" required>

ログイン後にコピー

Vue インスタンスで使用される:

data() {
  return {
    name: ''
  }
}

ログイン後にコピー

2. email

電子メールルールの機能は、次のいずれかを決定することです。入力は正当です。電子メール形式です。

テンプレートで使用される:

<input type="email" v-model="email" required>

ログイン後にコピー

Vue インスタンスで使用される:

data() {
  return {
    email: ''
  }
}

ログイン後にコピー

3. numeric

数値ルールの機能は、入力が純粋な数値形式。

テンプレートで使用される:

<input type="number" v-model="age" required>

ログイン後にコピー

Vue インスタンスで使用される:

data() {
  return {
    age: ''
  }
}

ログイン後にコピー

2. カスタムルール

によって提供される組み込みルールの使用に加えて、 Vue さらに、ユーザー入力を検証するルールをカスタマイズすることもできます。カスタムルールは、アプリケーションのニーズに応じてカスタマイズできます。たとえば、入力データは特定の範囲内にある必要がある、特定の正規表現に準拠する必要がある、特定のデータ形式を満たす必要があるなどです。カスタムルールは Vue.directive メソッドを使用して実装でき、バインド時に検証関数を渡すことができます。

カスタムルールのテンプレートの使用法は、組み込みルールと同様です。まず、テンプレートで検証命令を定義し、次にカスタムルールの命令を入力要素の v-bind 命令に渡します。入力ボックスで使用できること、フォーカスが外れたときにカスタムルールがトリガーされること。

カスタムルールの実装:

Vue.directive('my-rule', {
  bind: function(el, binding, vnode) {
    el.addEventListener('blur', function() {
      const value = el.value
      const rule = binding.value.rule // 获取规则
      const errorMessage = binding.value.message // 获取错误提示信息
      const isValid = rule(value) // 验证数据
      if (!isValid) { // 显示错误提示
        const errorElement = document.createElement('div')
        errorElement.innerHTML = errorMessage
        errorElement.style.color = 'red'
        insertAfter(errorElement, el)
      } else { // 清除错误提示
        const errorElement = nextSibling(el)
        if (errorElement.nodeType === 1 && errorElement.className === 'error-msg') {
          el.parentNode.removeChild(errorElement)
        }
      }
    })
  }
})

// 实例
new Vue({
  el: '#app',
  data() {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    // 自定义规则
    myRule(value) {
      return value.length === 4 && /^d+$/.test(value)
    }
  }
})

ログイン後にコピー

テンプレートでカスタムルールを使用し、v-bind ディレクティブのカスタムルールディレクティブに my-rule を渡します:

<input type="text" v-model="name" v-my-rule="{rule: myRule, message: '年龄必须是4位纯数字'}">

ログイン後にコピー

3。カスタムメソッド

カスタムメソッドは、主に入力がルールに準拠しているかどうかを判断する関数を作成し、テンプレート内の v-on 命令を通じてバインドすることにより、データ検証にも使用できます。、イベントをバインドするコード内のカスタムメソッドを呼び出します。

Vue でのカスタムメソッドの作成:

methods: {
  myMethod(value) {
    return value.length === 11 && /^1d{10}$/.test(value)
  }
}

ログイン後にコピー

テンプレートでのカスタムメソッドの呼び出し:

<input type="text" v-model="phone" v-on:blur="checkPhone">

ログイン後にコピー

methods: {
  checkPhone() {
    const phone = this.phone
    const isValid = this.myMethod(phone)
    if (!isValid) {
      alert('请输入正确的手机号码')
    }
  }
}

ログイン後にコピー

概要:

Vue のデータ検証は Vue の基本機能ですプログラム開発では、組み込みルール、カスタムルール、カスタムメソッド、その他の技術的手段を使用して、データ検証機能を効果的に実現できます。開発プロセス中に、これらのテクノロジを合理的に使用してユーザー入力を検証すると、プログラムのセキュリティと安定性が向上するだけでなく、ユーザーエクスペリエンスも向上します。

以上がVueメソッドでの検査ルールの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。