Skip to content
A simple verification plugin for VueJS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
dist
examples
src
.gitignore
LICENSE
README.md
package.json

README.md

Intro

vue-verify is a simple verification plugin for vue,compatible with Vuejs 1.x and 2.x.

Usage

Import and install

 <script src="vue.min.js"></script>
 <script src="vue-verify.js"></script>
 <script>
     Vue.use(vueVerify,options);
 </script>

Create a Vue instance,invoke $verify(rules) in the created lifecycle hook.

new Vue({
    el: "#app",
    data: {
        name: null,
        age: 0
    },
    created: function () {
        //Vue.prototype.$verify(rules)
        this.$verify({
            name: {
                required: true,
                maxLength: 16
            },
            age: {
                min: 15,
                max: 80
            }
        })
    }
})

template code

<div id="app">
    <p>
        <input v-model="name">
        <template v-if="verify.name.$dirty">
            <span v-if="verify.name.required">name reqiured</span>
            <span v-if="verify.name.maxLength">please enter no more than 16 characters</span>
        </template>
    </p>
    <p>
        <input v-model="age">
        <template v-if="verify.age.$dirty">
            <span v-if="verify.age.min">age must greater than or equal to 16</span>
            <span v-if="verify.age.max">age must smaller than or equal to 80</span>
        </template>
    </p>
    <p>
        <button type="button" v-if="verify.$dirty&&verify.$valid">submit</button>
    </p>
</div>

Built-in verify methods

new Vue({
    ...
    created:function(){
        this.$verify({
            modelPath:{
                //built-in verify methods as follows.
                required:true,//priority:  1
                minLength:3,// priority: 2
                maxLength:10,// priority: 3
                min:1,//priority: 4
                max:888,//priority: 5
                pattern:/^1[3578][0-9]{9}$/,//priority: 6
                equalTo:"ABC"//priority: 7
            }
        })
    }
})

Note: Get more information from examples.

Options

Vue.use(vueVerify, {
    namespace: "validator",
    methods: {
        email: {
            priority: 10,//default 100
            fn: function (val) {
                //return a boolean value
                return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
            }
        },
        exist: function (val) {
            //return a promise function value for async verify
            return function (resolve, reject) {
                $.ajax({
                    url: "server side verify url",
                    data: {name: val},
                    success: function (json) {
                        json.valid ? resolve() : reject()
                    },
                    error: function (xhr) {
                        reject()
                    }
                })
            }
        }
    }
});

You can also specify verification options for instance.

new Vue({
    el: "#app",
    data: {...},
    created: function () {
        this.$verify({...})
    },
    //specify verifier option
    verifier: options
})

Namespace

Default is "verify".Can not specify in instance options since v0.6.0.

methods

Specify custom verify methods.

You can specify options global via Vue.use(vueVerify,options).

Reset

You can reset the verify results with method $verifyReset() of Vue instance.

Use in nodejs

npm install vue-verify --save-dev
var Vue = require("vue")
var VueVerify = require("vue-verify")
Vue.use(VueVerify)

License

Apache-2.0

You can’t perform that action at this time.