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示例小程序码