Vue Form Verification components v-verify-plugin, vuev-verify-plugin

Vue Form Verification components v-verify-plugin, vuev-verify-plugin

Verify

Github: https://github.com/liuyinglong/verify

Https://www.npmjs.com/package/vue-verify-plugin: npm

Install

npm install vue-verify-plugin

Use

Html

<Div> <input type = "text" placeholder = "name" v-verify.grow1 = "username" v-model = "username"/> <label v-verified = "verifyError. username "> </label> </div> <input type =" password "placeholder =" password "v-verify.grow1 =" pwd "v-model =" pwd "/> <label v-verified = "verifyError. pwd "> </label> </div> <button v-on: click =" submit "> OK </button> </div>

Js

Import Vue from "vue"; import verify from "vue-verify-plugin"; Vue. use (verify); export default {data: function () {return {username: "", pwd: "" }}, methods: {submit: function () {if (this. $ verify. check () {// verified }}, verify: {username: ["required", {test: function (val) {if (val. length <2) {return false;} return true;}, message: "name cannot be less than 2 bits"}], pwd: "required"}, computed: {verifyError: function () {return this. $ verify. $ errors ;}}}

Instructions

V-verify

V-erify creates a data validation rule on the form control element, which automatically matches the value to be verified and the validation rules.

V-verify modifier description

The last modifier of this command is the custom group.

// Custom teacher group v-verify.teacher // custom student group v-verify.student // The student group can be verified separately during verification // student group validation this. $ verify. check ("student") // verify the teacher group this. $ verify. check ("teacher") // verify all this. $ verify. check ();

V-verified

The v-verified error is displayed. If there is an error, style: none is added. By default, the first error of all the data is displayed.

This command is syntactic sugar (see the example)

<Input v-model = "username" v-verify = "username"> <label v-show = "$ verify. $ errors. username & $ verify. $ errors. username. length "v-text =" $ verify. $ errors. username [0] "> </label> <! -- Equivalent to --> <label v-verified = "$ verify. $ errors. username"> </label> <! -- Show all errors --> <label v-verified.join = "$ verify. $ errors. username">

Modifier description

. Join: all errors are separated by commas (,).

Custom verification rules

Var myRules = {phone: {test:/^ 1 [34578] \ d {9} $/, message: "Incorrect phone Number Format"}, max6: {test: function (val) {if (val. length> 6) {return false} return true;}, message: "up to 6 bits"} import Vue from "vue "; import verify from "vue-verify-plugin"; Vue. use (verify, {rules: myRules });

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.