@[TOC](vue-li-validate)
npm install vue-li-validate@TOC
npm install --save vue-li-validate
`
文档地址
文档地址
案例地址
案例地址
全局配置
`js
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,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里面的内容，否则提示系统默认文案，例如：
`js
姓名：
*爱好：
*手机：
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配置了多个，那么提示信息会以逗号隔开，例如：
`html
*手机号：
*密码：
年龄：
6个数字：
*性别
男
女
`
!在这里插入图片描述
进阶用法,配置
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
`js
*姓名：
*密码：
!在这里插入图片描述
overflow下
`js
*姓名：
*密码：
*性别：
*爱好：
*年龄：
*电话：
*其他：
import {liValidate} from 'vue-li-validate'
const submitForm4 = () => {
if (liValidate("form4")) {
alert("表单验证通过，准备提交！");
}
};
.dialog {
background: gray;
height: 300px;
overflow: auto;
}
`
!在这里插入图片描述
自定义弹出位置
`js
import { showCustomPopover } from "vue-li-validate";
const showMsg = () => {
showCustomPopover(
document.querySelector("#mouge"),
"我一下子就飞过来了",
null,
30000, // 30秒后自动消失
"topRight"// 位置
);
};
`
!在这里插入图片描述
配置优先级
插件采用三层配置优先级机制：
$3
1. 局部配置 (options2) - 最高优先级
- 在页面中调用 liValidate(formId, options2) 时传入
- 会覆盖全局配置和默认配置
2. 全局配置 (options1) - 中等优先级
- 在 main.js 中通过 app.use(LiValidate, options1) 传入
- 会覆盖默认配置
3. 默认配置 - 最低优先级
- 插件内置的默认配置
$3
`javascript
// 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中配置
`js
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位邮政编码'
}
};
`
自定义验证规则
`javascript
liValidate('myForm', {
rules: {
customRule: {
pattern: /^[A-Z]/,
message: '必须以大写字母开头'
},
asyncRule: {
validator: async (value) => {
// 异步验证逻辑
const response = await fetch(/api/check?value=${value})
return response.ok
},
message: '验证失败'
}
}
})
``