# tui-validation 表单验证
介绍
Form Validation:常用的表单验证,只需配置验证项以及相关提示
注意
- 非必填情况下,如果值为空,则不进行校验
- 当验证不通过时返回错误消息,否则返回空即为验证通过
# 引入
# uni-app引入
import form from "@/components/common/tui-validation/tui-validation.js"
# 微信小程序引入
const form = require("../../../components/common/tui-validation/tui-validation.js")
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
//表单规则
let rules = [{
name: "mobile",
rule: ["required", "isMobile"],
msg: ["请输入手机号", "请输入正确的手机号"]
}, {
name: "password",
rule: ["required", "isEnAndNo"],
msg: ["请输入密码", "密码为8~20位数字和字母组合"]
}, {
name: "amount",
rule: ["required", "isAmount"],
msg: ["请输入金额", "请输入正确的金额,允许保留两位小数"]
}, {
name: "custom",
rule: ["required"],
msg: ["请输入自定义内容"],
validator: [{
msg: "内容不可包含非法字符***",
method: checkKeyword
}]
}];
//formData为表单submit事件返回数据,也可以手动拼装数据
let formData = e.detail.value;
//进行表单检查
let checkRes = form.validation(formData, rules);
if (!checkRes) {
//验证通过!
} else {
//验证不通过,checkRes为返回提示信息
}
# Methods
方法名 | 说明 | 传入参数 |
---|---|---|
validation | 表单验证方法 | formData,rules |
formData
:类型 Object
表单对象,数据格式 {key:value,key:value}
rules
:类型 Array
校验规则,数据格式 [{name:value,rule:[],msg:[]}]
name
:类型 String
字符串,name 属性=> 元素的名称,name与formData中key一致
rule
:类型 Array
字符串数组,["required","isMobile","isEmail","isCarNo"]
msg
:类型 Array
字符串数组,与数组 rule 长度相同,对应的错误提示信息
validator
:类型 Array
[{msg:'错误消息',method:Function}],自定义验证方法集合,函数约定:(value)=>{ return true or false} V1.6.5
required
:必填
isMobile
:是否为手机号
isEmail
:是否为邮箱
isCarNo
:是否为车牌号
isIdCard
:是否为身份证号
isAmount
:是否为金额,允许保留两位小数
isNum
:是否为数字
isChinese
:是否全为中文
isNotChinese
:是否不包含中文,可以有特殊字符 V1.6.2
isEnglish
:是否为英文
isEnAndNo
:是否为英文和数字组合 8~20位
isEnOrNo
:只包含英文或者数字
isSpecial
:是否有特殊字符
isEmoji
:是否有表情符号
isDate
:是否为日期
isUrl
:是否为地址
isSame
:一般校验两次输入的值是否相同,传值:"isSame:key"
range
:数值范围,传值:"range:[1,9]"
minLength
:最小长度,传值:"minLength:9"
maxLength
:最大长度,传值:"maxLength:Number"
isKeyword
:是否包含关键词,敏感词,多个以英文逗号分隔,包含则为false。传值:"isKeyword:key1,key2,key3" V1.6.2
👇
# 预览
更多表单样式请前往 form-表单结构。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |