# 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
validation方法传入参数说明

formData :类型 Object 表单对象,数据格式 {key:value,key:value}

rules :类型 Array 校验规则,数据格式 [{name:value,rule:[],msg:[]}]

参数rules详细说明

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

rule取值详细说明

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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码