This summary API

The V-validate directive is the primary way to verify our inputs, which accept a string or object as a value.

If passed a string, it must be a valid rules string, separate validation rules by '|'. < - validate input v = "' required | email '" name =" field "type =" text "> if passed an object, it must be included to use the rules of the properties of the The value of rules is an array format parameter or a single value parameter if the rule accepts a single parameter. / / string const expression = 'required | regex: ^ [0-9] +'; Const expression = {/ / no rules using Boolean parameters required: true, / / the rules of a single parameter with a single value regex: /. (js) | ts $/, / / the rules of multiple parameters using array in: [1, 2, 3]}; The directive parameter directive also accepts an ARG representing the name of the Vue Model to validate, or the calculated property. <input v-model="email" v-validate:email="'required|email'" name="field" type="text"> export default { data: () => ({ email: '' }) }; However, arGs are entirely optional. Additionally, V-validate checks whether the input box/component is assigned a V-Model and treats the V-Model expression as an ARG. But remember, the ARG must be a simple dot notation string, and it must exist on the VUE instance. PS: dot notation String You can use 'dot notation', e.g. 'string '. Upper () Tip: You might ask when to use arg. Assuming the V-Model can be detected. One valid case is when we need to validate computed properties, we need to use ARGS. The directive decorator immediate we can use the.immediate decorator to validate fields immediately after the page loads. <template> <input v-model="email" v-validate.immediate="'required|email'" name="field" type="text"> </template> <script>  export default { data: () => ({ email: '' }) }; * /script> continues by default, vee-validate uses the fastExit policy when validating field rules. Means that when the first rule fails to validate, it stops and does not validate the rest of the rules. We can use the.continues modifier to enforce validation of all rules regardless of the result of the validation. The code snippet below uses the.continues modifier to show all errors in a field, which is a common UI practice. <template> <div> <input v-model="email" v-validate.continues="'required|email'" name="field" type="text"> <ul> <li v-for="error in errors.collect('field')">{{ error }}</li> </ul> </div> </template> <script> export default { data: () => ({ email: '' }) }; </script> We can set the fastExit option to false to enable the '.continues' modifier behavior for all fields. Note: The. Continues modifier has another use. It disables the required rule check, meaning that fields that do not have a required rule but have a null value will not be skipped. Therefore, make sure our custom rules can handle null values as well. Bails conversely, if we have fastExit configured to false, we can use.Bail on certain fields to stop validation of other rules after the first validation failure. <template> <div> <input v-model="email" v-validate.bails="'required|email'" name="field" type="text"> <span>{{ errors.first('email') }}</span> </div> </template> <script> export default { data: () => ({ email: '' }) }; </script>Copy the code

Mixin VeeValidate injects a Mixin to enhance our Vue instance with the following properties: $validator – One Validator instance errors – one ErrorBag instance Fields – an object containing the status flags of all validated fields

Tip: We can set the Inject configuration option to false to choose not to inject these properties into our instance automatically, but we'll need to manage it ourselves and provide an instance of $Validator to make sure the directive works, see the section 'Component Injection'.Copy the code

The Data -* Attributes Data -* attribute provides an optional interface for plug-ins to specify what should happen, providing a simple, Vue version-compatible API. They can be very useful if we don’t like passing complex expressions to instructions.

Properties - Description data-vV-as - Specify a nice name for the field data-vV-delay - Specify the delay for triggering validation in milliseconds data-vv-name - Specify a name for the field, Data-vv-scope - Fallback name for component validation and as inputs data-vV-scope - Specifies a scope for the field. Data-vv-value-path - Specifies the value path in component $data to retrieve the current value of the component. Only for components. Data - vv - validate - on - is used to specify the '|' separate event name list, the default values for inputs input box type.Copy the code

ErrorBag The ErrorBag class is an array wrapper, which is a collection object (presumably the same as Laravel). It stands on its own and has no dependencies, so we can use it anywhere in our code:

import { ErrorBag } from 'vee-validate'; const bag = new ErrorBag(); For example, we might want to add an authentication-related error bag.add({field: 'auth', MSG: 'Wrong Credentials'}); // Display it like this: bag.first('auth'); Const error = {field: 'field name', MSG:' error message', rule: 'rule name', // optional scope: 'Scope Name', // optional regenerate: () => 'some string', // optional id: 'uniqueId' // optional }; API method - Return value - Description add(error: ErrorObject) - void - Adds the error to the error package. The error object must conform to the object structure mentioned above all(scope? : string) -array - Retrieves all error messages in an Array. You can specify a scope that will retrieve all messages in that scope. Any (scope? : string) - Boolean - Check for any errors. You can specify a scope that will check for any errors. Clear (scope? Collect (field? String) -void - collect(field? : string, scope ? : string, mapped ? : Boolean) - Array | Object - collection of specified field related errors. Without passing the field name, all errors are grouped by field name. Specify a scope to restrict collection behavior to. We can optionally specify whether an error object is mapped to an error message, providing false returns an object that 'contains complete information about the error'. Count () -number - Returns the current number of errors in the set first(field: string, scope? : string) - string | null - returns associated with a specific field or designated by the selector of the first error message, you can specify a scope, will be to find the error within the scope. FirstById (id: string) - string | null - the first error message back to the field of a given id firstByRule (rule: field: string, the string, the scope? : string) - string | null - returns the associated with the specified field and rules the first error message, specify a scope, will be to find the error within the scope from the (field: string, the scope? : string) - Boolean - Checks for the existence of error messages associated with a particular field or specified by a selector. You can specify a scope within which errors will be looked for. remove(field: string, scope ? : string) -void - Removes all errors associated with a particular field. You can specify a scope that will remove only that field and messages in that scope. RemoveById (id: string) -void - Deletes the field matching the provided ID. update(id: string, diff ? : ErrorObject) -void - Updates the error message data for the specified field and uses this data internally to keep the field error scope up to date.Copy the code

The HTML elements and Vue components that Field VeeValidate will verify are mapped to fields instances, and while this class is not in public use, we can find its API very useful if you plan to perform some lower-level operations.

Warning: Any unrecorded properties/methods should not be used for public use. Getting a field instance is very simple. We can use validator.fields.find to get a field instance. Const field = this.$validator.fields.find({name: 'email'})); Const field = this.$validator.fields. Find ({name: 'email', scope:) const field = this.$validator.fields. 'newsletter' }); $validator.fields.find({id: 'fieldId'}); API Warning: Be careful when using the field API, as it may interrupt the validator operation and may produce unexpected results. Constructor attributes Name - Type - Default - Description ID-String-NULL - Field ID(automatically generated) el-HTMLElemental-null - HTML Inputs input box element or component root element to verify Updated - Boolean - false - Indicates whether the field should be rescan to update its properties (for example, validation rules). Watch-watcher [] - [] - Array of events-string [] - [] - list of events that triggered validation rules - {[string]: Object} - {} - The rule/parameter mapping Object used to validate the field validity-boolean - false - Whether the HTML Constrained API should be used to apply the error message aria-boolean - true - Whether the aria-required and aria-invalid attributes vM-vue instance-null - use the directive's context component component-vue instance-null in their templates should be set/updated after validation - Component being validated (if it is a component) ctorConfig -veevalidateconfig -null - field scope configuration flags - {[string]: Object} - {} - String/Boolean mapping of the current flag state of the field aliases - String - null - alias of the field, Is a read-only property getter - () => any-null - Getter function that returns the value of the current field name-string-null - field name scope-string-null - field scope TargetOf - string - null - some fields, it is according to the target value of the letter to validate, said here is that the target field ID (confirmed | before | after validation rules, Both require target fields) initial-Boolean - false - Whether the fields should validate classes-boolean - false - whether the tag-based classNames should be applied to the HTML input field - Object - {} - A mapping of the flag name/class name based on the flag application delay-number-0 - The number of seconds of delay for the event trigger of the field LISTen-boolean-true - Whether the field should have listeners model - { expression: string, lazy: Boolean} -null - contains information about the model to which the field is bound using the V-model value - any - () => read-only version of the undefined - getter property isRequired - Boolean - True | false - field is required (whether to set up the required rules) isDisabled - Boolean - true | false - field is disabled (if it is disabled, Validator - validator - null - Read-only reference to the authentication instance that has created this field Null method name - Return Type - Description matches(options: FieldMatchOptions) - Boolean - update(options: Reset () -void - Resets field flags to their initial state setFlags(flags: {[string]: Boolean}) -void - Updates the field flag, and also updates the corresponding entry of the specified field, such as: valid/invalid. unwatch(tag ? : UpdateClasses () -void - if (RegExp) -void - delete the matched listeners. UpdateAriaAttrs () -void - If enabled, Synchronize the ARIA attribute applied to the element with the flag updateCustomValidity() -void - Synchronize the constrained API validation message with the first error message of the field destroy() - Void - Removes all listeners and dependencies for the fieldCopy the code

The Validator API provides an API to add new fields and trigger validation.

API attribute name - Type - Description Errors-errorbag-errorbag class instance, used to manage the error fields-fieldbag-fieldbag class instance, Locale-string - Current language setting method name - Return Type - Description attach(field: FieldOptions) - Field - Append a new Field to the validator with validate(Descriptor? : String, value ? : any, options ? : Object) -PROMISE < Boolean > - Validate the fields to which the supplied 'Descriptor' parameter values match. When validation is complete, the Promise returns a Boolean value indicating whether the validated field is valid validateAll(Fields? : String or Object) -promise < Boolean > - Validate each value according to the corresponding field validation rules pause() -void - disable authentication resume() -void - enable authentication verify(value: any, rules: string) - Object - { errors: string[], valid: boolean} detach(name: string, scope ? : string) -void - Separates matched fields (matched by values provided by name and scope) from the validator extend(name: string, rule: rule, options? : ExtendOptions) -void - Adds a new validation rule. The Rule argument supplied must be a valid Rule function or object reset(matcher? : Object) -void - Resets field flags for all scoped fields. If no scope is provided, reset all fields. Let matcher = {scope: 'form-1', vmId: this.$validator.id} this.$validator.reset(matcher); The validation API validate method is the main way to trigger validation. All parameters are optional, but will yield different results depending on the parameters we provide. A field descriptor is a string, which can have the following form: // Validate all fields validator.validate(); Validator.validate ('field'); // Validate a field whose name matches the provided selector. Validator.validate ('scope.field'); // Validate all fields in scope validator.validate('scope.*'); // Validate all fields with no scope validator.validate('*'); The value argument is optional, and if no value is passed to the validate() method, the validate() method will attempt to resolve the value using an internal value resolution algorithm. When a value is passed, the algorithm is skipped and the value is used instead. We can pass options to modify the validation behavior. The options are an object that can contain the following: Property-type-default - Description Silent-Boolean - false - If set to true, the validate() method will return the validation result without modifying errors and flags. Initial-boolean - false - If set to true, rules marked non-immediate are skipped during this call, Verify () prevents initial validation from triggering a back end call to Verify validator.verify () to validate a value against a specified rule, allowing us to programmatically use the Validator in our code without having to register fields with the V-validate directive. This is useful if we want to verify the value rather than inputs, for example in Vuex action: import {Validator} from 'vee-validate'; import {Validator} from 'vee-validate'; const v = new Validator(); const { valid, errors } = await v.verify('test', 'max:3'); // The valid attribute indicates the result of the validation console.log(valid); // false // errors is an error string array console.log(errors); // ["The {field} field may not be greater than 3 characters."] Verify () receives a third argument, which is used to configure validation and messages v.ify (value, rules, opts); Attribute - Type - Default Value - Description name - string - {field} - A string representing the name of the field used in the error message. Bails - Boolean - true - If true, stop the validation after the first validation failure values - object - {} - an object, Cross-field Rules can also use target-dependent Rules, we need to pass values object in the third argument, whose key is the name of the 'target Field', Object value is' target field value 'v.ify ('pass', 'confirmed:conf', {values: {// target field conf: 'p@$$'}});Copy the code