Shulou(Shulou.com)06/01 Report--

In this article Xiaobian introduces in detail for you "how to use the Validator form verification plug-in in Vue", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use the Validator form verification plug-in in Vue" can help you solve your doubts.

Basic use

Username: comment: please enter your name

Your comment is too long.

New Vue ({el:'# app'})

The form to be validated is wrapped in a validator custom element directive, and the corresponding validation rule is bound on the v-validate attribute of the form control element to be validated.

The validation results are saved under the $validation property of the build instance. Validation is composed of the validator element and the name attribute and the $prefix component

Verification result structure

{/ / form overall verification "valid": false, / / whether the field verification passes "invalid": true, / / valid takes "touched": false, / / returns true when the element of the verification field passes the focus, otherwise returns false "untouched": true, / / touched takes "modified": false, / / returns true if the element value is different from the initial value. Otherwise, return false "dirty": false, / / return true after the field value has been changed at least once Otherwise, return false "pristine": true, / / dirty reverse / / Field single verification "username": {"required": true, "modified": false, "pristine": true, "dirty": false, "untouched": true, "touched": false, "invalid": true, "valid": false}, "comment": {"maxlength": false, "modified": false, "pristine": true, "dirty" false: "untouched": true, "touched": false, "invalid": false, "valid": true}

The verification result consists of two parts. The overall verification result of the form and the verification result of a single field.

Validator syntax

V-validate instruction syntax:

V-validate [: field] = "array literal | object literfal | binding"

Check field name field

Field is used to identify the check field, which can then be used to reference the verification result.

The v-validate instruction is used to define validation rules, whose values can be array literals, object literals, and component instance array property names.

Array literals

When the validator does not need additional parameters, you can use an array literal form, such as the required validator, with table I whenever it appears. The element of the verifier is required.

Zip: postal code is required

Object literal quantity

Object literal syntax is suitable for validators that require additional parameters. For example, the verifier minlength that limits the length of the input needs to indicate how much the length is limited.

ID: ID cannot be empty

Your ID name is too short.

Your ID name is too long.

You can also use object literal syntax to customize validation rules through the rule field

ID: ID cannot be empty

Your ID name is too short.

Your ID name is too long.

Instance data properties

The value of v-validate can be the data property of the build instance. This can be used to dynamically bind validation rules.

ID: cannot be empty

Your ID is too short.

Your ID is too long.

New Vue ({el:'# app', data: {rules: {required: true, minlength: 3, maxlength: 16})

Built-in check rule

Some commonly used validation rules are built into vue-validator:

Required-input value cannot be empty

Pattern-must match the regular expression represented by pattern

Minlength-the length of the input value cannot be less than the value represented by minlength

Maxlength-the value entered cannot be greater than the value represented by maxlength

Min-the input value cannot be less than the value represented by min

Max-the input value cannot be greater than the value represented by max

Use in conjunction with v-model

Vue-validator automatically validates values that are dynamically set by v-model.

Message: message cannot be empty

Message input too long digits

Var vm = new Vue ({el:'# app', data: {msg:'}}); setTimeout (function () {vm.msg = 'hello worldview;}, 2000)

Reset the check result

Dynamically reset the check result by calling the $resetValidation (); method on the Vue component instance.

Username: comment: user name cannot be empty

Enter more than 256 text

Reset Validation {{$validation | json}} new Vue ({el:'# app', methods: {onReset: function () {this.$resetValidation ();})

Check box checkbox

For survey, please choose fruit Apple Orange Grape Banana.

{{msg | json}}

New Vue ({el:'# app', computed: {requiredErrorMsg: function () {return 'Please select fruit';}, minlengthErrorMsg: function () {return 'Please select at least one fruit!;}, maxlengthErrorMsg: function () {return' Please select at most 2 fruits!;})

Drop-down table select

Please select a language javascript php node cannot be empty!

New Vue ({el:'# app'})

Check status class

Each check state has its own class (default). You can also customize the check state class.

Username

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.