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

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

预览

组件使用请前往 tui-form 表单验证。

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码