async-validator笔记

官网的示例

methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }

 

// 表单校验源码
validate(callback) {
	if (!this.model) {
		console.warn('[Element Warn][Form]model is required for validate to work!');
		return;
	}
 
	let promise;
	// if no callback, return promise
	if (typeof callback !== 'function' && window.Promise) {
		promise = new window.Promise((resolve, reject) => {
			callback = function(valid) {
				valid ? resolve(valid) : reject(valid);
			};
		});
	}
 
	let valid = true;
	let count = 0;
	// 如果需要验证的fields为空，调用验证时立刻返回callback
	if (this.fields.length === 0 && callback) {
		callback(true);
	}
	let invalidFields = {};
	this.fields.forEach(field => {
		field.validate('', (message, field) => {
			if (message) {
				valid = false;
			}
			invalidFields = objectAssign({}, invalidFields, field);
			if (typeof callback === 'function' && ++count === this.fields.length) {
				callback(valid, invalidFields);
			}
		});
	});
 
	if (promise) {
		return promise;
	}
},

根据上面的源码可以看出想使用校验，必须传递model属性。如果传递的callback不是方法的话，会定义一个promise，同时会定义callback为方法，参数依然是是否校验通过的结果。

this.fields这是个数组，存储了哪些el-form-item是需要校验的。

里面同时监听了移除校验某个el-form-item的事件。

// el-form源码
		resetFields() {
			if (!this.model) {
				process.env.NODE_ENV !== 'production' &&
					console.warn('[Element Warn][Form]model is required for resetFields to work.');
				return;
			}
			this.fields.forEach(field => {
				field.resetField();
			});
		},
		clearValidate(props = []) {
			const fields = props.length
			? (typeof props === 'string'
			   ? this.fields.filter(field => props === field.prop)
			   : this.fields.filter(field => props.indexOf(field.prop) > -1)
			  ) : this.fields;
			fields.forEach(field => {
				field.clearValidate();
			});
		},
		validateField(prop, cb) {
			let field = this.fields.filter(field => field.prop === prop)[0];
			if (!field) { throw new Error('must call validateField with valid prop string!'); }

			field.validate('', cb);
		}

分别是重置表单、清空校验、单独校验某个el-form-item。

1. 重置表单：就是让里面每个item各自重置自己即可。
2. 清空校验：支持清空针对某个prop的校验，可以是字符串，也可以是数组。如果什么都不传的话，就去情况整个表单的校验了。
3. 单独校验某个item，根据传入的prop过滤出对应的field，如果有多个只取第一个，然后校验，执行回调。

二、单独安装使用

npm i async-validator

// 引进
import Schema from 'async-validator';
const descriptor = {
  // rules
  name: {
    type: 'string',
    required: true,
    validator: (rule, value) => value === 'muji',
  },
  age: {
    type: 'number',
    asyncValidator: (rule, value) => {
      return new Promise((resolve, reject) => {
        if (value < 18) {
          reject('too young');  // reject with error message
        } else {
          resolve();
        }
      });
    },
  },
};
const validator = new Schema(descriptor);

validator.validate({ name: 'muji' }, (errors, fields) => {
  if (errors) {
    // validation failed, errors is an array of all errors
    // fields is an object keyed by field name with an array of
    // errors per field
    return handleErrors(errors, fields);
  }
  // validation passed
});

// PROMISE USAGE
validator.validate({ name: 'muji', age: 16 }).then(() => {
  // validation passed or without error message
}).catch(({ errors, fields }) => {
  return handleErrors(errors, fields);
});

 

API

validate

function(source, [options], callback): Promise

• source：要验证的对象（必填）。
• options：一个对象，描述验证的处理选项（可选）。
• callback：验证完成时调用的回调函数（必需）。

该方法将返回一个Promise对象，例如：

• then()，验证已通过
• catch({ errors, fields })，验证失败，errors是一个包含所有错误的数组，fields是一个由字段名称作为键的对象

规则

function(rule, value, callback, source, options)

• rule：源描述符中与待验证字段名称相对应的验证规则。总是为它分配一个field属性，其中包含要验证的字段的名称。
• value：正在验证的源对象属性的值。
• callback：验证完成后要调用的回调函数。它期望传递一个Error实例数组以指示验证失败。如果检查是同步的，则可以直接返回false或Error或Error Array。
• source：传递给validate方法的源对象。
• options： 其他选项。
• options.messages：包含验证错误消息的对象将与defaultMessages进行深度合并。

import Schema from 'async-validator';
const descriptor = {
  name(rule, value, callback, source, options) {
    const errors = [];
    if (!/^[a-z0-9]+$/.test(value)) {
      errors.push(new Error(
        util.format('%s must be lowercase alphanumeric characters', rule.field),
      ));
    }
    return errors;
  },
};
const validator = new Schema(descriptor);
validator.validate({ name: 'Firstname' }, (errors, fields) => {
  if (errors) {
    return handleErrors(errors, fields);
  }
  // validation passed
});

// 单个字段针对多个验证规则
const descriptor = {
  email: [
    { type: 'string', required: true, pattern: Schema.pattern.email },
    { 
      validator(rule, value, callback, source, options) {
        const errors = [];
        // test if email address already exists in a database
        // and add a validation error to the errors array if it does
        return errors;
      },
    },
  ],
};

type

• string：必须为类型string。This is the default type.
• number：必须为类型number。
• boolean：必须为类型boolean。
• method：必须为类型function。
• regexp：必须是RegExp创建新时不会产生异常的的实例或字符串RegExp。
• integer：必须为类型number且为整数。
• float：必须为类型，number并且为浮点数。
• array：必须是由决定的数组Array.isArray。
• object：必须是类型，object而不是Array.isArray。
• enum：值必须存在于中enum。
• date：值必须由 Date
• url：必须为类型url。
• hex：必须为类型hex。
• email：必须为类型email。
• any：可以是任何类型。

required

min和max属性定义范围

length

Enumerable 可数

const descriptor = {
  role: { type: 'enum', enum: ['admin', 'user', 'guest'] },
};

whitespace 空格

验证深层对象，可以通过将嵌套规则分配给规则的属性来验证object或array类型的验证规则fields

const descriptor = {
  address: {
    type: 'object',
    required: true,
    fields: {
      street: { type: 'string', required: true },
      city: { type: 'string', required: true },
      zip: { type: 'string', required: true, len: 8, message: 'invalid zip' },
    },
  },
  name: { type: 'string', required: true },
};
const validator = new Schema(descriptor);
validator.validate({ address: {} }, (errors, fields) => {
  // errors for address.street, address.city, address.zip
});

transform 在验证之前转换值

import Schema from 'async-validator';
const descriptor = {
  name: {
    type: 'string',
    required: true,
    pattern: /^[a-z]+$/,
    transform(value) {
      return value.trim();
    },
  },
};
const validator = new Schema(descriptor);
const source = { name: ' user  ' };
validator.validate(source)
  .then(() => assert.equal(source.name, 'user'));

Messages

字符串 { name: { type: 'string', required: true, message: 'Name is required' } }

   jxs     { name: { type: 'string', required: true, message: '<b>Name is required</b>' } }

function { name: { type: 'string', required: true, message: () => this.$t( 'name is required' ) } }

asyncValidator 自定义异步验证

 

https://www.jb51.net/article/132533.htm

https://www.cnblogs.com/zhenfei-jiang/p/8583252.html

https://zhuanlan.zhihu.com/p/183125604