Vue と Element-UI を使用してフォームの複雑な検証ロジックを実装する方法

Vue と Element-UI を使用してフォームの複雑な検証ロジックを実装する方法

はじめに:
Web アプリケーションの開発では、フォーム検証は頻繁に発生する要件です。フォーム検証により、ユーザーが入力したデータが特定の形式またはルールに準拠していることを確認できるため、データの精度とアプリケーションの安定性が向上します。この記事では、Vue と Element-UI を使用してフォームの複雑な検証ロジックを実装する方法を紹介し、関連するコード例を読者に提供します。

1. Element-UI の概要
Element-UI は、Vue.js をベースに開発されたデスクトップ コンポーネント ライブラリであり、テーブルやテーブルなどの一連の使いやすく美しい UI コンポーネントを提供します。フォーム、ボタンなどElement-UI にはフォーム検証機能が多数組み込まれており、簡単な検証ロジックを簡単に実装できます。

2. フォーム検証の基本原理
フォーム検証の基本原理は、フォーム要素の変更イベントを監視することでユーザーが入力した値を取得し、それを系列に従って検証することです。事前に設定されたルールの。検証に合格した場合、フォーム要素のステータスは「検証合格」に変更されます。検証に合格しなかった場合は、エラー メッセージが表示され、フォーム要素のステータスは「検証失敗」に変更されます。

3. 単純なフォーム検証に Element-UI を使用する
まず、Element-UI の Form コンポーネントと FormItem コンポーネントを導入し、次にこれらのコンポーネントを Vue テンプレートで使用してフォームを構築する必要があります。指定した form 要素で、次に示すように rules 属性を設定することで検証ルールを定義できます。

d477f9ce7bf77f53fbcf36bec1b69b7a
8ec0c4751f0bebda16bd8df47bbe1b9d

<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="validateForm">提交</el-button>
</el-form-item>

ffdb25bf2f9d37a252c9d16e8e43c40c
21c97d3a051048b8e55e3c8f199a54b2
データ内のフォーム オブジェクトは、 form 各入力ボックスの値、および rules オブジェクトは各入力ボックスの検証ルールを定義します。

Vue のデータでは、次のようにフォーム オブジェクトとルール オブジェクトを定義できます:

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' }
  ]
}

}
}
ルール オブジェクトでは、必須、長さ制限などの複数の検証ルールを定義できます。 message 属性はエラー メッセージを定義し、trigger 属性は検証によってトリガーされるイベントを定義します。

Vue のメソッドでは、フォームを検証するメソッド validateForm を定義できます。コードは次のとおりです:

methods: {
validateForm() {

this.$refs.myForm.validate((valid) => {
  if (valid) {
    this.$message({
      type: 'success',
      message: '表单校验通过'
    })
  } else {
    this.$message.error('表单校验失败')
    return false
  }
})

}
}
validateForm メソッドでは、this.$refs.myForm.validate() メソッドを呼び出してフォームの検証をトリガーします。検証結果はコールバック関数 valid を通して渡され、検証が成功した場合は成功メッセージが表示され、そうでない場合は失敗メッセージが表示されます。

4. 複雑な検証ロジックの実装
場合によっては、2 つの入力ボックスの値が等しいかどうかの比較、電子メール アドレスの検証、携帯電話の検証など、より複雑な検証ロジックを実装する必要があります。数字などこの場合、カスタム検証ルールを使用できます。

まず、Vue のデータで、以下に示すようにカスタム検証ルールを定義できます。

data() {
return {

rules: {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: this.validatePassword, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: this.validateConfirmPassword, trigger: 'blur' }
  ]
}

}
}
rules オブジェクトでは、カスタム検証ルールを定義できます。ここで、validator 属性は検証関数を定義します。

次に、Vue のメソッドで、以下に示すようにカスタム検証関数を定義できます。

methods: {
validatePassword(rule, value, callback) {

if (value.length < 6 || value.length > 20) {
  callback(new Error('密码长度在6到20个字符'))
} else {
  callback()
}

},
validateconfirmPassword(rule, value, callback) {

if (value !== this.form.password) {
  callback(new Error('两次输入的密码不一致'))
} else {
  callback()
}

}
}
カスタム検証関数では、コールバック関数 callback を呼び出して検証結果を渡すことができます。検証に合格した場合は callback() が呼び出され、そうでない場合は callback(new Error('error message')) が呼び出されます。

最後に、以下に示すように、Vue テンプレートでカスタム検証ルールを使用します。

9044c39e07c5f7bfdbe139ba63ef273d3950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
1072ec28b0363e41a2cf20b6e31f5514
d14f55b1fbdcd49efb36f7550b816c7a3950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
2fbc9b4f023c7fd45ccd139201dee861
804c4a182670c10d020f5a7ce1546b35
3d2371aff8fe724e1b7407502d150d7a
カスタム検証ルールでは、type 属性を使用して、電子メール ルールなどの Element-UI の組み込み検証ルールを指定できます。 type 属性を「email」に設定します。

概要:
この記事では、Vue と Element-UI を使用してフォームの複雑な検証ロジックを実装する方法を紹介します。 Element-UI が提供する Form コンポーネントと FormItem コンポーネントを使用すると、フォームを簡単に構築し、 rules 属性を設定することで検証ルールを定義できます。複雑な検証ロジックの場合は、カスタム検証ルールと検証関数を実装できます。この記事が、皆様が Vue と Element-UI を理解してフォーム検証に使用するのに役立つことを願っています。

コード サンプル:
以下は完全なサンプル コードです:

d477f9ce7bf77f53fbcf36bec1b69b7a
6c3e00bcd91503ed8220e472e968ae55

<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="validateForm">提交</el-button>
</el-form-item>

ffdb25bf2f9d37a252c9d16e8e43c40c
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
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: {

validateForm() {
  this.$refs.myForm.validate((valid) => {
    if (valid) {
      this.$message({
        type: 'success',
        message: '表单校验通过'
      })
    } else {
      this.$message.error('表单校验失败')
      return false
    }
  })
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

以上就是使用Vue和Element-UI实现表单的复杂校验逻辑的一些简单介绍和代码示例。希望本文对于读者能够有所帮助，对于Vue和Element-UI有更深层次的理解和应用。谢谢阅读！

以上がVue と Element-UI を使用してフォームの複雑な検証ロジックを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。