hvalidate

專案介紹

自定義vue指令，前端表單校驗

安裝教程

1. 專案地址

   https://gitee.com/hcsy/hvalidate

    

2. 在vue專案中引入

   import hvalidate from './js/hvalidate.js'
   Vue.use(hvalidate)

1. 在頁面中使用 指令

 v-hvali="{key:'email',rule:'required|email'}"

 <form action="">
            <label for="">phone:</label> <input type="text" placeholder="phone" v-hvali="{key:'phone',rule:'required|phone'}"> <br>
            <hr />
            <label for="">email:</label> <input type="text" placeholder="email" v-hvali="{key:'email',rule:'required|email'}"> <br>
            <hr />
            <button class="btn" type="button" @click="submit">提交</button>
    </form>
    methods: {
        submit() {
            console.log("submit");
            beforeSubmitValidate(() => {
                console.log("提交");
            });
        }
    }
 

4.demo 請參考index.vue