@TOC

vue-li-validate

一个功能强大的Vue.js表单验证插件，支持配置优先级机制。

特性

• ✅ 支持多种验证规则（邮箱、手机号、身份证等）
• ✅ 灵活的配置优先级系统
• ✅ 自定义错误样式和提示位置
• ✅ TypeScript 支持
• ✅ 轻量级，无外部依赖
• ✅ 支持自定义验证规则

安装：

npm install --save vue-li-validate

文档地址

文档地址

案例地址

案例地址

全局配置

import LiValidate from 'vue-li-validate'

const app = createApp(App)

app.use(LiValidate, {
  errorClass: 'li-invalid',
  popoverClass: 'li-popover',
  validateMode: 'single',
  position: "bottomLeft",
  validateEvents: ['change'],
  scrollMargin: "20px",
  rules: {
    pfloat2: {
      pattern: /^((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]){0,2})?$/,
      message: '请输入正确的手机号码'
    },
    "length6-16": {
      pattern: /^.{6,16}$/,
      message: '请输入6-16位字符'
    }
  }
})

基础用法

1.需要校验的表单必须添加li-form属性，值为表单的ref值，如：li-form="form1",调用校验方法时，传入li-form的值即可，例如：liValidate("form1") 2.校验必填项时，必须给input添加li-required="true"属性例如： 3.设置了li-message，校验提示会使用li-message里面的内容，否则提示系统默认文案，例如：

<div li-form="form1">
	姓名：<input v-model="form1.username" placeholder="非必填" />
	*爱好：<input v-model="form1.like" li-required="true" placeholder="必填" />
	*手机：<div li-required="true" li-message="手机号码为必填项哦">
    <input v-model="form1.phone" placeholder="必填" />
  </div>
	<button @click="submitForm1">提交</button>
</div>

import {liValidate} from 'vue-li-validate'
const submitForm1 = () => {
  if (liValidate("form1")) {
    alert("表单验证通过，准备提交！");
  }
};

进阶用法

1.传了li-rule的话会校验该规则，提示配套的错误提示，可以同时设置多个校验项目，以逗号隔开；例如： 2.传了li-reg的话会校验该正则，可以同时设置多个正则，以逗号隔开；例如： 3.配置li-reg的话必须配置li-message，否则没有任何提示； 4.假设li-reg或者li-rule配置了多个，那么提示信息会以逗号隔开，例如：

<div li-form="form1">
	*手机号：<input v-model="form2.phone" li-required="true" li-rule="phone" />
	*密码：<input v-model="form2.password" li-required="true" li-rule="english,length" />
	年龄：<input v-model="form2.age" li-reg="/^\d+$/" li-message="请输入数字"/>
	6个数字： <input v-model="form2.hobby" li-message="请输入数字,请输入6位字符" li-reg="/^\d+$/,/^.{6}$/" />
	*性别 
   <div  li-required style="display: inline-block" li-message="请选择性别">
      <input  type="radio" name="sex" v-model="form.sex" :value="1" style="display: inline-block" />男 
      <input type="radio" name="sex" v-model="form.sex" :value="2" style="display: inline-block" />女
    </div>
	<button @click="submitForm2">提交</button>
</div>

<script>
import {liValidate} from 'vue-li-validate'
if (liValidate("form2")) {
    alert("表单验证通过，准备提交！");
}
</script>

<style>
.hiddenClass {
  height: 1px;
  width: 1px;
  opacity: 0;
}
</style>

进阶用法,配置

1.liValidate方法第二个参数配置参数同全局配置参数一致： 有如下参数： errorClass: "config-invalid", 需要校验的dom class 2.popoverClass: "config-popover" 错误提示的class 3.validateMode: "all" 校验模式，single：单个校验，all:全部校验 4.tipDuration: 10000 不点击网页的话，提示持续时间 5.position: "right" 校验提示位置 6.validateEvents: [] 触发校验的事件
7.rules: {} 自定义正则 li-rule里面需要用到的 rules格式 同 constants.ts中的 DEFAULT_RULES保持一致，若liValidate和app.use以及DEFAULT_RULES中都有，则优先级为：liValidate> app.use > constants.ts中的 DEFAULT_RULES

<div li-form="form3">
 *姓名：</span><input v-model="form3.username" li-required="true" /></div>
 *密码：</span><input v-model="form3.password" li-required="true" /></div>
 ...
<button @click="submitForm3">提交</button>
</div>

import {liValidate} from 'vue-li-validate'
const submitForm3 = () => {
  if (
    liValidate("form3", {
      errorClass: "config-invalid",
      popoverClass: "config-popover",
      validateMode: "all",
      tipDuration: 10000,
      validateEvents:["blur"],
      position: "right",
      rules: {
        phone: {
          pattern: /^1[1-9]\d{9}$/,
          message: "请输入正确的手机号码",
        },
        notspaces: {
          pattern: /[^\S]+/g,
          message: "不能输入空格",
        },
      },
    })
  ) {
    alert("表单验证通过，准备提交！");
  }
};

overflow下

<div class="dialog">
   <div li-form="form4" class="form-container">
     <div class="form-group"><span>*姓名：</span><input v-model="form4.username" li-required="true" /></div>
     <div class="form-group"><span>*密码：</span><input v-model="form4.password" li-required="true" /></div>
     <div class="form-group"><span>*性别：</span><input v-model="form4.sex" li-required="true" /></div>
     <div class="form-group"><span>*爱好：</span><input v-model="form4.like" li-required="true" /></div>
     <div class="form-group"><span>*年龄：</span><input v-model="form4.age" li-required="true" /></div>
     <div class="form-group"><span>*电话：</span><input v-model="form4.phone" li-required="true" /></div>
     <div class="form-group"><span>*其他：</span><input v-model="form4.hobby" li-required="true" /></div>
   </div>
 </div>
 <div class="button-group">
   <button @click="submitForm4" class="submit-btn">提交</button>
 </div>

import {liValidate} from 'vue-li-validate'
const submitForm4 = () => {
  if (liValidate("form4")) {
    alert("表单验证通过，准备提交！");
  }
};

.dialog {
  background: gray;
  height: 300px;
  overflow: auto;
}

自定义弹出位置

 <button id="mouge" >我想飞一会</button>
 <button @click="showMsg">将提示展示到“我想飞一会”标签上</button>
 
import { showCustomPopover }  from "vue-li-validate"; 

const showMsg = () => {
  showCustomPopover(
    document.querySelector("#mouge"),
    "我一下子就飞过来了",
    null,
    30000, // 30秒后自动消失
    "topRight"// 位置
  );
};

配置优先级

插件采用三层配置优先级机制：

优先级顺序（从高到低）

1. 局部配置 (options2) - 最高优先级

   • 在页面中调用 liValidate(formId, options2) 时传入
   • 会覆盖全局配置和默认配置

2. 全局配置 (options1) - 中等优先级

   • 在 main.js 中通过 app.use(LiValidate, options1) 传入
   • 会覆盖默认配置

3. 默认配置 - 最低优先级

   • 插件内置的默认配置

配置合并示例

// main.js - 全局配置
app.use(LiValidate, {
  errorClass: 'global-error',
  tipDuration: 3000,
  validateMode: 'single'
})

// 组件中 - 局部配置
liValidate('form1', {
  errorClass: 'local-error',  // 覆盖全局配置
  position: 'topRight'        // 新增配置项
  // tipDuration: 3000        // 继承全局配置
  // validateMode: 'single'   // 继承全局配置
})

所有可配置项

属性 LiValidateOptions

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | validateEvents | array | 触发事件 | blur, change | | errorClass | string | 'li-validate-error' | 验证失败时添加的CSS类名 | | popoverClass | string | 'li-validate-popover' | 提示框的CSS类名 | | validateMode | string | 'all' | 验证模式：'all' 或 'single' | | tipDuration | number/null | 2000 | 提示框显示时长（毫秒）,设置为null表示不自动关闭 | | position | string | 'bottomRight' | 'topLeft' ,'topRight', 'bottomLeft' , 'bottomRight' , 'left' , 'right' | | scrollMargin | object | {top: 10, bottom: 10} | 滚动边距 | | rules | object | {} | 自定义验证规则 LiValidateOptions.rules |

方法

| name | 描述 | 参数类型 | |-|---|--| | liValidate(formId: string, validateOptions?: LiValidateOptions): boolean | 触发校验事件，通常用于表单提交前 | string，LiValidateOptions |

rules

li-rule中配置项有如下配置，如果不够用，可以自己在 LiValidateOptions.rules中配置

export const DEFAULT_RULES = {
  number: {
    pattern: /^[0-9]+$/,
    message: '请输入数字'
  },
  integer: {
    pattern: /^-?[0-9]\d*$/,
    message: '请输入整数'
  },
  decimal: {
    pattern: /^-?[0-9]\d*\.\d+$/,
    message: '请输入小数'
  },
  email: {
    pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
    message: '请输入有效的邮箱地址'
  },
  phone: {
    pattern: /^1[3-9]\d{9}$/,
    message: '请输入正确的手机号码'
  },
  url: {
    pattern: /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/,
    message: '请输入有效的网址'
  },
  idcard: {
    pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
    message: '请输入有效的身份证号码'
  },
  chinese: {
    pattern: /^[\u4e00-\u9fa5]+$/,
    message: '请输入中文字符'
  },
  english: {
    pattern: /^[a-zA-Z]+$/,
    message: '请输入英文字符'
  },
  zipcode: {
    pattern: /^\d{6}$/,
    message: '请输入6位邮政编码'
  }
};

自定义验证规则

liValidate('myForm', {
  rules: {
    customRule: {
      pattern: /^[A-Z]/,
      message: '必须以大写字母开头'
    },
    asyncRule: {
      validator: async (value) => {
        // 异步验证逻辑
        const response = await fetch(`/api/check?value=${value}`)
        return response.ok
      },
      message: '验证失败'
    }
  }
})

注意

如果是form标签，错误提示挂载到body上，如果是非form标签，错误提示挂载到标签上