# hvalidate

**Repository Path**: hcsy/hvalidate

## Basic Information

- **Project Name**: hvalidate
- **Description**: 自定义vue指令，前端表单校验
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 4
- **Created**: 2018-10-23
- **Last Updated**: 2023-11-18

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

# hvalidate

#### 项目介绍
自定义vue指令，前端表单校验

#### 安装教程

1. 下载https://gitee.com/hcsy/hvalidate/blob/master/src/js/hvalidate.js
2. 在vue项目中引入 
``` bash
   import hvalidate from './js/hvalidate.js'
```
``` bash
   Vue.use(hvalidate)
```
3.校验以下的字段
``` bash
  let msgConfig = {
        phone: "手机号不正确",
        email: "邮箱不正确",
        idCard: "身份证不正确",
        passWord: "密码由6-12位字母和数字组成",
        max: "长度超过限制",
        min: "字段位数不对",
        required: "不能为空"
    }
```
4. 在页面中使用
指令
``` bash
    rule使用msgConfig中的字段
    默认的错误信息提示是msgConfig中定义的
    v-hvali="{key:'email',rule:'required|email'}"
    v-hvali="{key:'phone',rule:'required|phone',msg:'手机号不能为空'}" //当设置了msg之后 提示信息以用户设置的msg为准
```
``` bash
    <form action="">
            <label for="">phone:</label> <input type="text" placeholder="phone" v-hvali="{key:'phone',rule:'required|phone',msg:'手机号不能为空'}"> <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");
            var valiResult=beforeSubmitValidate(this);//valiResult 值为false或true

        }
    }
```
4.demo 请参考index.vue