この記事では主に Vue の Element フォーム検証の基本的な要素を紹介します。これを必要とする友人に共有します。
Element は主にフォーム検証として async-validator ライブラリを使用します。
async-validator は主に 3 つの部分に分かれています
-
async-validator主要分成三部分
其中，对于我们使用Element的来说，Rules最重要，也是这部分内容较多的。
async-validator各部分
async-validator基本使用
import Validator from 'async-validator'
// 规则的描述
const rules = {
name: { type: 'string', required: true }
}
// 根据规则生成验证器
const validator = new Validator(rules)
// 要验证的数据源
const source = {
name: 'LanTuoXie'
}
// 验证后的回调函数
function callback (errors, fileds) {
if (errors) {
// 验证不通过，errors是一个数组，记录那些不通过的错误信息
// fileds是所有数据源的字段名，也即上面的source的'name'
// 验证是根据字段名来的，rules.name 对应 source.name。 字段名要一样才会验证
}
// 下面是验证通过的逻辑
}
// 验证数据源是否符合规则
validator.validate(source, callback)ログイン後にコピー
Validate
就是上面例子中的validator.validate，是一个函数
function(source, [options], callback)
ログイン後にコピー
source和callback对应上面的例子。
Options
Options有两个值
firstFields是针对单个字段多规则的情况下使用，而first是针对所有字段
Rules
最重要的还是Rules。定义rule可以有三种形式，但是rules字段名一定要和数据源source的字段名一致。
函数的方式：{ name(rule, value, callback, source, options) {} }
对象的方式： { name: { type: 'string', required: true } }
数组的方式： { name: [{ type: 'string' }, { required: true }] }
上面可以看到，字段名name可以有3种方式定义规则，在使用Element的时候还是推荐对象和数组的方式，这个两个比较简单，函数看情况使用。
除了type和required还有哪些用法可以用以及有什么用？
Rules的默认规则
type: 要被验证的数据的类型如url和number等
required： 是否必填
pattern：使用正则来验证
min: 数据的长度的最小值 (数据类型必须是string或array)
max: 数据的长度的最大值 (数据类型必须是string或array)
len: 数据的长度必须等于这个值 (数据类型必须是string或array)
enum: 数据的值必须等于这个枚举数组某个元素 { enum: [1, 2, 3] }
transform: 一个钩子函数，在开始验证之前可以对数据先处理后验证，如吧number转为string后再验证
message: 报错的提示信息可以是字符串也可以是jsx标签<span>Name is required</span>
validator: 自定义验证函数以及报错信息 validator(rule, value, callback)
还有一个Deep Rules是处理object或者array类型的，使用了fields 或defaultField
fields：Deep Rules的时候使用，定义下一层的字段名以及规则
defaultField: Deep Rules的时候使用，所有下一层的字段都会采用该规则，可以被fields替换
默认的Type
string：必须是String类型，规则不设置type默认是这个
number：必须是Number类型，如果后台返回的数据是字符串，可以用transform转为Number类型，字符串类型的数字（'12'）不会通过，要注意
boolean: 必须是Boolean类型
method: 必须是Function
regexp：必须是正则RegExp
integer：是Number类型的正整数
float: 是Number类型的浮点数
array: 是Array.isArray通过的数组
object: Array.isArray不通过的Object类型
enum: 要先定义enum，然后值必须是enum某个值
date: 必须是Date对象的实例
url: String类型且符合链接格式
hex
emailValidate
- 🎜Options🎜
- 🎜ルール🎜
🎜その中で、ルールはElementを使用する私たちにとって最も重要であり、最も内容が多い部分でもあります。 🎜async-validator の一部
🎜async-validator の基本的な使用法🎜cosnt urls = ['http://www.baidu.com', 'http://www.baidu.com']
// 一个urls的数组，
const rules = {
urls: {
type: 'array',
required: true,
defaultField: { type: 'url' }
}
}ログイン後にコピー
ログイン後にコピー
const ids = {
name: 'LanTuoXie',
age: 12,
spc: '帅'
}
const rules = {
ids: {
type: 'object',
required: true,
fields: {
name: { type: 'string', required: true },
age: { type: 'number', required: true, tranform: Number },
spc: { type: 'string', required: true }
}
}
}ログイン後にコピー
ログイン後にコピー
- 🎜
first: フィールドがが存在します パスしない場合は、次のフィールドの検証を停止します🎜 - 🎜
firstFields: ブール値または文字列、フィールドの検証時にルールがパスしない場合は、フィールドの検証を停止します次のルール (1 つのフィールド、複数のルール) 🎜
🎜firstFields は、複数のルールが 1 つのフィールドに適用される場合に使用され、first は使用されます。すべての分野に適用されます 🎜🎜ルール🎜🎜 最も重要なことはルールです。ルールは 3 つの形式で定義できますが、ルールのフィールド名はデータ ソースのフィールド名と一致している必要があります。 🎜- 🎜関数メソッド:
{ name(rule, value, callback, source, options) {} }🎜 < li >🎜オブジェクトメソッド: { name: { type: 'string', required: true } }🎜
- 🎜配列メソッド:
{ name: [{ type: ' string' }, { required: true }] }🎜
🎜 上記のように、Element を使用する場合、フィールド名 name は 3 つの方法で定義できます。 object メソッドと array メソッドが推奨されますが、この 2 つは比較的シンプルなので、状況に応じて関数を使用するとよいでしょう。 🎜🎜
type と
required に加えて、他にどのような使用方法があり、またその用途は何ですか? 🎜
ルールのデフォルト ルール
- 🎜
type: 検証されるデータのタイプは などです。 url</ code> や <code>number など🎜 - 🎜
required: 必須ですか?🎜 - 🎜
pattern</code >: 正規表現を使用して検証します 🎜</li><li>🎜<code>min: データの長さの最小値 (データ型は string< である必要があります) /code> または <code>array</ code>)🎜</li><li>🎜<code>max: データの最大長 (データ型は string である必要があります)または array) 🎜 - 🎜
len: データの長さはこの値と等しくなければなりません (データ型は string< である必要があります) /code> または <code>array)🎜< /li> - 🎜
enum: データの値は、この列挙配列 の特定の要素と等しくなければなりません。 { enum: [1, 2, 3] }🎜 - 🎜
transform: number から string へ その後、再度確認します🎜 - 🎜
message: エラー メッセージは文字列または jsx タグ です。 <span>名前は必須です</span></ code>🎜</li><li>🎜<code>validator: カスタム検証関数とエラー メッセージ validator(rule, value, callback) 🎜 - 🎜
fields またはdefaultField🎜 - 🎜
fields: ディープ ルールを使用して次のレイヤーのフィールド名とルールを定義する場合に使用されます🎜 - 🎜
defaultField: 深いルール 使用すると、次のレベルのすべてのフィールドがこのルールを採用し、fields で置き換えることができます🎜
デフォルトのタイプ
- 🎜
string: ルールでタイプが設定されていない場合、デフォルトはこれです。 🎜 - 🎜
number: バックグラウンドから返されたデータが文字列である場合は、transform を使用して変換できます。数値型には文字列型の数値 ('12') は渡されませんので注意してください🎜 - 🎜
boolean: ブール型である必要があります🎜 - 🎜
method: Function である必要があります🎜 - 🎜
regexp: 通常の RegExp である必要があります🎜 - 🎜
integer< /code>: Number型の正の整数です🎜</li><li>🎜<code>float: Number型の浮動小数点数です🎜 - 🎜
array: Array.isArray で渡される配列です🎜 - 🎜
object : Array.isArray が渡さないオブジェクトの型です🎜 - 🎜
enum: Enum を最初に定義し、次に値を enum の特定の値にする必要があります🎜 - 🎜< code>date: インスタンスである必要がありますDate オブジェクトの🎜
- 🎜
url: 文字列型であり、リンク形式に準拠します🎜 - 🎜
hex🎜 - 🎜
email: 文字列型で、電子メール形式に準拠します🎜
Deep Rules使用demo
cosnt urls = ['http://www.baidu.com', 'http://www.baidu.com']
// 一个urls的数组，
const rules = {
urls: {
type: 'array',
required: true,
defaultField: { type: 'url' }
}
}ログイン後にコピー
ログイン後にコピー
const ids = {
name: 'LanTuoXie',
age: 12,
spc: '帅'
}
const rules = {
ids: {
type: 'object',
required: true,
fields: {
name: { type: 'string', required: true },
age: { type: 'number', required: true, tranform: Number },
spc: { type: 'string', required: true }
}
}
}ログイン後にコピー
ログイン後にコピー
自定义验证validator
validator(rule, value, callback)
// 验证是[min, max]范围内的正整数
const betweenInt = (min, max) => (rule, v, cb) => {
const isBetween = v >= min && v <= max
const isInt = /^[0-9]+$/.test(v)
if (isBetween && isInt) return cb()
return cb(new Error(`要求是在${min}到${max}的正整数 [${min}, ${max}]`))
}
const rules = {
num: { validator: betweenInt(1, 5), required: true }
}ログイン後にコピー
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
vue项目中如何实现保存头像以及base64字符串转图片的功能
Vue中for in对象时如何解决属性为非负整数的问题
以上がVue の要素フォーム検証の基本要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
