Is it possible to allow only Arabic characters in

user_9100781 0
Viewed 430

I have Vue.js application where I have 2 inputs for a job title one in English and one in Arabic.

Is there a method to allow user type only with usage of Arabic characters on Arabic job title field ?

vuejs2 vue.js internationalization html
1 Answers

Try to watch the field and check if the characters are in Arabic else reset the field :

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      jobTitle: ''
    }
  },
  watch: {
    jobTitle(newVal, oldVal) {
      if (!this.isArabicChars(newVal) && newVal !== oldVal) {
        this.jobTitle = "" //reset the field if the char is not arabic
      }
    }
  },

  methods: {
    isArabicChars(text) {
      var arregex = /[\u0600-\u06FF]/;
      return arregex.test(text);
    },

  }
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <input type="text" dir="rtl" v-model="jobTitle" />

</div>

user_81728570
Related