Vuejs Input type url form Validation example


In this short tutorial, It covers step by step tutorial to validate input form type=url in vuejs. URL validation can be done using regular expression pattern.

You can see the full code on Github

Other versions available:

VueJS new application creation

Here are sequence of steps to create an application

  • First, Create an Vue application using vuecli tool

  • Make sure that vuecli npm command is installed already by issuing following command

        B:\blog\jswork>vue --version
        @vue/cli 4.5.9
    

    This gives version number of installed tool, if it is not installed, run below command in terminal

    npm install -g @vue/cli
    

    This will installs vuecli into your machine.

  • Next, Create new application vue create command as follows

    vue create vue-input-url -n
    

    This creates vuejs application - with files, dependencies and build pipelines configured and ready to start the application

  • Go to application root directory,Run an application using npm run serve command

    cd vue-input-url
    npm run serve
    

    This will starts the application and opens localhost:3000 in a browser

Input type URL pattern validation

Input forms are basic forms in the UI pages to take input for user.

Following are step by step guide to add validation to input form using regular expression pattern

  • Create an vuejs component InputUrlComponent under src/components folder

    VueJS component contains html,javascript and styles under following tags

    <template>
    // html template code
    </template>
    
    <script>
    // javascript code
    </script>
    <style>
    // css styles
    </style>
    
    

    html template contains UI elements logic ie view layer to display to user, This looks how the user see the page. javascript code contains controller logic how data is passed to/from view layer CSS styles - contains styles UI elements

  • Created a input elements to view layer

    <input type="url" placeholder="Website url" v-model="email"  @input="change($event)"
      @change="change($event)"/>
    

    Input text box is displayed with type=url onlys v-model is an vuejs directive to have a two way databinding @input and @change are two change handlers while user typing the text.

  • in scripts of vue component, Add the following things

    Created three instance members url - to hold the form input value isValid- store the validation errors of an input type data regex: is an regular expression to test url validation

    Regular expression pattern for URL form The same regular expression that can use for javascript applicaiton also

    regex=[-a-zA-Z0-9@:%_+.~#?&//=]{2,256}(.[a-z]{2,4})?\b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?
    

    In methods section, Created two methods, change - to handle change event bounded to @change event in the template. isUrlValid function- checks regular expression

      change:function(e){
      const url = e.target.value
      this.isURLValid(url);
    },
    isURLValid: function(inputUrl) {
      this.isValid=   this.reg.test(inputUrl)
    }
    
  • Finally, Display the error using v-if directive attribute

        <div class="error" v-if="!isValid">URL is Invalid</div
    

Here is complete source code for InputUrlComponent

<template>
  <div class="hello">
    <h3>Vuejs Input type url validation</h3>
    <br />
  

    <input type="url" placeholder="Website url" v-model="email"  @input="change($event)"
      @change="change($event)"/>
    <div class="error" v-if="!isValid">URL is Invalid</div
  </div>
</template>

<script>
export default {
  name: "InputUrl",
  data() {
    return {
      url: "",
      isValid: false,
      regex: [-a-zA-Z0-9@:%_+.~#?&//=]{2,256}(.[a-z]{2,4})?\b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?
    };
  },
  methods: {
    change:function(e){
      const url = e.target.value
      this.isURLValid(url);
    },
    isURLValid: function(inputUrl) {
      this.isValid=   this.regex.test(inputUrl)
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.error{
  color:red;
}
</style>

user can see the output in the browser as follows Vuejs Input type url form validation example

conclusion,

This is simple input form validation for type=url, Eventhough we can write custom validation for complexform, however, Node provides different framework veevalidate and joi libraries for simplifying it.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.