kuangu-valid

校验插件

输入框内输入内容不规范，给出友好提示，防止垃圾信息注入。 ---kg.研发[2组]

一、安装

 npm i kuangu-valid -S

二、Vue项目入口文件调用

在vue项目的入口文件main.js 写入以下代码：

 import KgValid from 'kuangu-valid'
 Vue.use(KgValid);

三、组件中使用

使用到 ValidationObserver、ValidationProvider两个标签；

1. ValidationObserver：包裹form表单
   属性包括:

            ref="form"
   

2. ValidationProvider：包裹具体的单个输入框
   属性包括：

            rules（校验规则：接受字符串，多个使用‘|’拼接）
            v-slot="{ errors }" （错误提示列表，接受组建传出的错误提示列表）
            name="****"（错误提示信息中，会使用到该name）
   

3. 错误的提示信息通过errors[0]展示
4. 示例:

 <ValidationObserver ref="formObserver">
      <el-form
        :model="form"
        label-width="120px"
        style="margin-right: 20px"
      >
        <el-row>
          <ValidationProvider
            rules="required|custname|max:20"
            v-slot="{ errors }"
            name="客户名称"
          >
            <el-form-item
              label="* 客户名称"
              prop="clientname"
              :error="errors[0]"
            >
              <el-input
                placeholder="请输入客户名称"
                v-model="form.clientname"
                clearable
              />
            </el-form-item>
          </ValidationProvider>
        </el-row>
      </el-form>
    </ValidationObserver>
    <div slot="footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button>取 消</el-button>
    </div>

 data(){
    return{
      form:{clientname:''}
    }
  },

submitForm()
     {
        this.$refs.formObserver.validate().then((validateState) => {
          if (validateState) {
            alert(validateState);
          } else {
            alert(validateState);
          }
        });
      }

5.目前已有校验规则