valuedator

Simple validator by value

Usage no npm install needed!

<script type="module">
  import valuedator from 'https://cdn.skypack.dev/valuedator';
</script>

README

valuedator

Description

A simple validator by value. Sometimes there are cases that simple validation on the Input field is not convenient: input fields in different forms or components, you must first process the input value, before validating, for example, calculate the exchange rate, or collect together the credit card number from the fields. It may not even be your code, and you do not want to change its structure. Using this library, you can validate already end values.

Setup

npm install valuedator --save

Install in Vuejs

import Vue from 'Vue';
import valuedator from 'valuedator';
Vue.use(valuedator, options = {});

Usage

export default {
  methods:{
    sendData()
    {
        if (this.$valuedator(dataArray)) {
            alert("success!!!!");
        }
    }
  }
}

You get a function that needs to pass an array with values ​​for validation. The elements of the array must be the values ​​for validation.

var dataArray = [value, value, value ...values]

Or an objects with extended parameters for validating each value.

var dataArray = [{}, {}, {} ...objs]

As a result, the function returns true or false, depending on the results of the test.

If you pass the values ​​to the array, a simple check is performed to fill the fields, that is (value! == ""). If any of the required values ​​fail the test, an "alert" will be received with an error.

If you need a more detailed test, you must pass an object to the array with the parameters to validate each value.

{

    value : string || number,
    number : [], // array
    chars : [], // array
    pattern : RegExp || string,
    errorInput : {
        elem : Css selector || HTMLElement,
        cls : string
    },
    errorMessage : {
        before || container : Css selector || HTMLElement,
        cls : string
    },
    messageText : string

}

value

The value to be checked : String or Number. The presence of this property makes the value required to fill. Required property

Validation templates

Theoretically, you can specify all 3 checks (number, chars, pattern), but it is necessary to hinder the logic of this decision. In most cases, one or two types are sufficient.

number

Special check for number or range : Array. An array that takes up to two numeric parameters to set the minimum and maximum values. If you transfer only one value, a lower limit check will be performed.

If you pass an empty array, it checks for a number.

chars

Special check for characters length : Array. An array that takes 1 or 2 numeric parameters to set the minimum and maximum characters length. If you transfer only 1 value, a lower limit check will be performed.

pattern

Special check for pattern matching : RegExp or string. Uses a regular expression to test or a string. If a string is passed, one of the built-in checks is started.

Built-in patterns for testing:


    "email" - /^.+@.+\..+$/
    "url" - /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
    "ipv4" - /^(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)$/

errorInput

An object with parameters to change the CSS styles of the input field associated with the value. Accepts 2 properties:

elem

CSS selector or HTMLElement, related to input.
Required property

cls

String. Your own class that will be added to decorate the Input element with an error. If not set, the built-in set of styles will be applied.

errorMessage

An object with parameters to change the CSS styles of the input field associated with the value. Accepts 2 properties:

The first property can be passed one of two: "before" or "container". One of them will be selected, the priority of "before".

before

CSS selector or HTMLElement, related to DOM element after that, a DIV will be added with an error message.
Required property

container

CSS selector or HTMLElement, related to an existing DOM element, inside which will be added a DIV with an error message. Required property

You can use to collect all error messages by specifying in each validation object a reference to the same DOM element. (the "appendChild" method is used).

cls

String. Your own class that will be added to decorate the errorMessage element with an error. If not set, the built-in set of styles will be applied.

messageText

A string with the text describing the error. If not specified, the built-in messages for this type of error will be used.

Built-in error messages:


    alert : "Data input error. Check the correctness of the information entered and fill the required fields.",
    required : "Required.",
    number : "Enter the number.",
    chars : "The number of characters does not match the set limits.",
    email : "Invalid email.",
    url : "Invalid url.",
    ipv4 : "Invalid ipv4 format.",
    pattern : "Does not match the pattern.",

Сustom Options

When the plugin is initialized via "Vue.use", the second parameter can be passed an object with user-defined options.

Available options:


    Vue.use(valuedator,{
        errorInputClass : "", //string
        errorMessageClass : "", //string
        messages : {} // object
    })
    

errorInputClass

String. Class name, which will be applied by default to Input elements with errors.

errorMessageClass

String. Class name, which will be applied by default to errorMessage.

messages

An object describing the errors. You can send your error texts or your own localization. The name of the standard error properties for overwriting is listed in subsection messageText.

Priority of options

The options that you pass directly to the function for validation have the highest priority.

Build-in options < installation options < value object options

Error handling when passing validation parameters

The type of parameters to be transferred to objects for validation are strongly typed. This is followed by the internal plugin mechanism. In development mode: "process.env.NODE_ENV === 'development'", when you send a wrong type of parameter, console.warn will be generated and this value will not be validated. The console will describe in detail the type of error and with which valid value it is associated.

In production, all errors in the data types for validation will be ignored, and the value for validation will always pass through it so as not to break the overall operation of the program. Carefully adjust each valid value.

Examples

Simple example

The simplest example of validation. If at least one field is not filled, "alert" will be displayed with an error.


    import Vue from 'Vue';
    import valuedator from 'valuedator';
    Vue.use(valuedator);


    <template>
      <div>
        <div id="d1">
            <label for="i1">input 1:</label>
            <input type="text" v-model="v1" id="i1"> 
        </div>
        <div id="d2">
            <label for="i3">input 2:</label>
            <input type="text" v-model="v2" id="i2"> 
        </div>
        <div id="d3">
            <label for="i3">input 3:</label>
            <input type="text" v-model="v3" id="i3"> 
        </div>
        
        <button @click.prevent="testData">check</button>
      </div>
    </template>
    <script>
      new Vue({
        data () {
          return {
            v1 : "",
            v2 : "",
            v3 : "",
          }
        },
        methods: {
          testData() {
            if (this.$valuedator([this.v1, this.v2, this.v3])) {
                    alert("success!!!!");
            }
          }
        }
      })
    </script>
    

Advanced example


    import Vue from 'Vue';
    import valuedator from 'valuedator';
    Vue.use(valuedator{
    
        errorMessageClass : "someclass",
        messages : {
            number : "some new error text",
            email : "email bla-bla-bla"
        }
        
    });


    <template>
      <div>
        <div id="d1">
            <label for="i1">number:</label>
            <input type="text" v-model="v1" id="i1"> 
        </div>
        <div id="d2">
            <label for="i3">email:</label>
            <input type="text" v-model="v2" id="i2" ref="input2"> 
        </div>
        <div id="d3">
            <label for="i3">number:</label>
            <input type="text" v-model="v3" id="i3"> 
        </div>
        <div class="container_error_3"></div>
        
        <button @click.prevent="testData">check</button>
      </div>
    </template>
    <script>
      new Vue({
        data () {
          return {
            v1 : "",
            v2 : "",
            v3 : "",
          }
        },
        computed : {
            valarr() {
                return [
                    {
                        value : this.v1,
                        number : [1, 7],
                        errorInput : {
                            elem : "#i1",
                            cls : "someclass2"
                        },
                    },
                    {
                        value : this.v2,
                        pattern : "email",
                        errorInput : {
                            elem : this.$refs.input2,                        
                        },
                        errorMessage : {
                            before : "#d2",
                        },
                        messageText : "error error ERROR!"
                    },
                    {
                        value : this.v3,
                        chars : [10],
                        errorInput : {
                            elem : "#i3",
                            class : "someclass3"
                        },
                        errorMessage : {
                            container : ".container_error_3",
                            class : "container_class"
                        },
                    }
                ]
            }
        }
        methods: {
          testData() {
            if (this.$valuedator(this.valarr)) {
                    alert("success!!!!");
            }
          }
        }
      })
    </script>
    

Compatibility

The plugin does not use any ES6 capabilities and should theoretically work in IE11-. But it was not tested.

Remarks, suggestions and bugs

I'm a beginner developer, and your feedback is important to me. Also, your bug reports will not be superfluous. I tried to catch all errors as much as possible, but they are possible. I will be happy with your feedback and criticism:

sin_x@bk.ru
sinucid@gmail.com

License

MIT