# tui-validation 表单验证 开源组件
介绍
Form Validation:常用的表单验证,只需配置验证项以及相关提示
注意
- 非必填情况下,如果值为空,则不进行校验
- 当验证不通过时返回错误消息,否则返回空即为验证通过
# 引入
注:将tui-validation.js文件拷贝进自己项目中,并确保引入路径正确
# uni-app引入
import form from "@/components/common/tui-validation/tui-validation.js"
# 微信小程序引入
const form = require("../../../components/common/tui-validation/tui-validation.js")
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
<template>
<view class="container">
<form @submit="formSubmit" @reset="formReset">
<tui-list-cell :hover="false">
<view class="tui-line-cell">
<view class="tui-title">手机号</view>
<input placeholder-class="tui-phcolor" class="tui-input" name="mobile" placeholder="请输入手机号"
maxlength="50" type="text" />
</view>
</tui-list-cell>
<tui-list-cell :hover="false">
<view class="tui-line-cell">
<view class="tui-title">密码</view>
<input password placeholder-class="tui-phcolor" class="tui-input" name="pwd" placeholder="请输入密码"
maxlength="50" type="text" />
</view>
</tui-list-cell>
<tui-list-cell :hover="false" unlined>
<view class="tui-line-cell">
<view class="tui-title">金额</view>
<input placeholder-class="tui-phcolor" class="tui-input" name="amount" placeholder="请输入金额,允许保留两位小数"
maxlength="50" type="digit" />
</view>
</tui-list-cell>
<tui-list-cell :hover="false" unlined>
<view class="tui-line-cell">
<view class="tui-title">自定义</view>
<input placeholder-class="tui-phcolor" class="tui-input" name="custom" placeholder="自定义验证,屏蔽***"
maxlength="50" />
</view>
</tui-list-cell>
<view class="tui-btn-box">
<button class="tui-button-primary" hover-class="tui-button-hover" formType="submit"
type="primary">Submit</button>
<button class="tui-button-primary tui-button-gray" hover-class="tui-button-gray_hover"
formType="reset">Reset</button>
</view>
</form>
</view>
</template>
// data 数据 及 方法
import form from "@/components/common/tui-validation/tui-validation.js"
function checkKeyword(value) {
if (~value.indexOf("***")) {
return false;
}
return true;
}
//定义表单校验规则
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
}]
}];
export default {
data() {
return {
}
},
methods: {
formSubmit: function(e) {
//进行表单数据
let formData = e.detail.value;
//校验
let checkRes = form.validation(formData, rules);
if (!checkRes) {
uni.showToast({
title: "验证通过!",
icon: "none"
});
} else {
//校验失败 checkRes 为错误信息
uni.showToast({
title: checkRes,
icon: "none"
});
}
},
formReset: function(e) {
console.log("清空数据")
}
}
}
/* 样式 */
.container {
padding: 20rpx 0 50rpx 0;
}
.tui-line-cell {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
}
.tui-title {
line-height: 32rpx;
min-width: 120rpx;
flex-shrink: 0;
}
.tui-input {
font-size: 32rpx;
color: #333;
padding-left: 20rpx;
flex: 1;
overflow: visible;
}
.tui-btn-box {
padding: 40rpx 50rpx;
box-sizing: border-box;
}
.tui-button-gray {
margin-top: 30rpx;
}
<!-- 注:示例使用到的组件请自行引入 -->
<view class="container">
<form bindsubmit="formSubmit" bindreset="formReset">
<tui-list-cell hover="{{false}}">
<view class="tui-line-cell">
<view class="tui-title">手机号</view>
<input placeholder-class="tui-phcolor" class="tui-input" name="mobile" placeholder="请输入手机号" maxlength="50" type="text" />
</view>
</tui-list-cell>
<tui-list-cell hover="{{false}}">
<view class="tui-line-cell">
<view class="tui-title">密码</view>
<input password placeholder-class="tui-phcolor" class="tui-input" name="pwd" placeholder="请输入密码" maxlength="50" type="text" />
</view>
</tui-list-cell>
<tui-list-cell hover="{{false}}" unlined>
<view class="tui-line-cell">
<view class="tui-title">金额</view>
<input placeholder-class="tui-phcolor" class="tui-input" name="amount" placeholder="请输入金额,允许保留两位小数" maxlength="50"
type="digit" />
</view>
</tui-list-cell>
<tui-list-cell hover="{{false}}" unlined>
<view class="tui-line-cell">
<view class="tui-title">自定义</view>
<input placeholder-class="tui-phcolor" class="tui-input" name="custom" placeholder="自定义验证,屏蔽***"
maxlength="50" />
</view>
</tui-list-cell>
<view class="tui-btn-box">
<button class="tui-button-primary" hover-class="tui-button-hover" formType="submit" type="primary">Submit</button>
<button class="tui-button-primary tui-button-gray" hover-class="tui-button-gray_hover" formType="reset">Reset</button>
</view>
</form>
</view>
const form = require("../../../components/common/tui-validation/tui-validation.js")
function checkKeyword(value) {
if (~value.indexOf("***")) {
return false;
}
return true;
}
//表单规则
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
}]
}];
Page({
formSubmit: function (e) {
let formData = e.detail.value;
let checkRes = form.validation(formData, rules);
if (!checkRes) {
wx.showToast({
title: "验证通过!",
icon: "none"
});
} else {
//校验失败 checkRes 为错误信息
wx.showToast({
title: checkRes,
icon: "none"
});
}
},
formReset: function (e) {
console.log("清空数据")
}
})
/* 样式 */
.container {
padding: 20rpx 0 50rpx 0;
}
.tui-line-cell {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
}
.tui-title {
line-height: 32rpx;
min-width: 120rpx;
flex-shrink: 0;
}
.tui-input {
font-size: 32rpx;
color: #333;
padding-left: 20rpx;
flex: 1;
overflow: visible;
}
.tui-btn-box {
padding: 40rpx 50rpx;
box-sizing: border-box;
}
.tui-button-gray {
margin-top: 30rpx;
}
// Make sure to add code blocks to your code group
# 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
# 预览
组件使用请前往 tui-form 表单验证。
# 特别说明
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |