JSFiddle - React, Tailwind, and code Playground

by simati

HTML

<body>
    
    <script src="https://unpkg.com/vue"></script>
    
    <div id="app">
      <input type="text" name="password" v-model="password" >
      <p>{{ password }}</p>

      <password-validator v-on:isValid='valid => {isValid = valid}' :input='password'> </password-validator>
    </div>
      
  </body>

JavaScript

Vue.component('regex-validation', {
    template: '<li>{{regex}}<slot></slot> {{ checkValidation }}</li>',
    props: [ 'regex', 'input', 'value' ],
    computed: {
        checkValidation: function(){
            var valid = new RegExp(this.regex).test(this.input);
            this.$emit('valid', valid);
            return valid;
        }
    }
});

Vue.component('password-validator', {
    template: `
<ul>
    <regex-validation regex='.{6,}' v-on:valid='v => { isLongEnough = v }' :input='input'> 
    Is Long Enough
    </regex-validation>
    <regex-validation regex='[A-Z]' v-on:valid='v => { hasUppercase = v }' :input='input'>
    Has Upper
    </regex-validation>
    Is Valid: {{ isValid }}
</ul>
    `,
    props: [ 'input' ],
    data: function(){
        return {
            isLongEnough: false,
            hasUppercase: false,
        }
    },
    computed:{
        isValid: function(){
            var valid = this.isLongEnough && this.hasUppercase;
            this.$emit('allValid', valid);
            return valid;
        }
    }
});

new Vue({
    el: '#app',
    data: { 
        password: '',
        isValid: false
    }
});