# tui-form 表单验证 会员组件

介绍

tui-form组件主要用于表单校验,提供了常用的表单校验方法,支持自定义扩展校验方法,提供了错误信息展示等。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiForm from "@/components/thorui/tui-form/tui-form.vue"
export default {
	components:{
		tuiForm
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-form": "/components/thorui/tui-form/tui-form"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基本使用

uni-app 通过 ref 来注册组件引用信息,引用信息将会注册在父组件的 $refs 对象上。注册完成后,我们可以通过 this.$refs.xxx 访问到对应的组件实例,并调用上面的实例方法。

微信小程序原生 可在父组件里调用 this.selectComponent ,获取子组件的实例对象,调用时需要传入一个匹配选择器 selector。

    <template>
     <view class="container">
     	<view class="tui-page__bd">
     		<tui-form ref="form">
     			<tui-input label="手机号" :lineLeft="false" placeholder="请输入手机号" v-model="formData.mobile"></tui-input>
     			<tui-input label="邮箱" :lineLeft="false" placeholder="请输入邮箱" v-model="formData.email"></tui-input>
     			<tui-input label="身份证" :lineLeft="false" placeholder="请输入身份证号码" v-model="formData.idCard"></tui-input>
     			<tui-input label="密码" password :lineLeft="false" placeholder="请输入密码" v-model="formData.password">
     			</tui-input>
     			<tui-input label="确认密码" password :lineLeft="false" placeholder="请输入确认密码" v-model="formData.confirmPwd">
     			</tui-input>
     			<view class="tui-btn__box">
     				<tui-button width="400rpx" height="84rpx" bold @click="submit">提交</tui-button>
     			</view>
     		</tui-form>
     	</view>
     </view>
    </template>
    
    <script>
     //表单校验规则
     const rules = [{
     	name: "mobile",
     	rule: ["required", "isMobile"],
     	msg: ["请输入手机号", "请输入正确的手机号"]
     }, {
     	name: "email",
     	rule: ["required", "isEmail"],
     	msg: ["请输入邮箱", "请输入正确的邮箱"]
     }, {
     	name: "idCard",
     	rule: ["required", "isIdCard"],
     	msg: ["请输入身份证号码", "请输入正确的身份证号码"]
     }, {
     	name: "password",
     	rule: ["required", "isEnAndNo"],
     	msg: ["请输入密码", "密码为8~20位数字和字母组合"]
     }, {
     	name: "confirmPwd",
     	rule: ["required", "isSame:password"],
     	msg: ["请输入确认密码", "两次输入的密码不一致"]
     }];
     export default {
     	data() {
     		return {
     			//表单数据
     			formData: {
     				mobile: '',
     				email: '',
     				idCard: '',
     				password: '',
     				confirmPwd: ''
     			},
     			rules: rules
     		}
     	},
     	methods: {
     		submit() {
     			if(!this.$refs.form) return;
     			this.$refs.form.validate(this.formData,this.rules).then(res => {
     				console.log(this.formData)
     				console.log('校验通过!')
     				//this.tui.toast 等api 参考 【快手上手】文档使用
     				// this.tui.toast('校验通过!')
     			}).catch(errors => {
     				console.log(errors)
     			})
     		}
     	}
     }
    </script>
    
    <style>
     .tui-title {
     	width: 100%;
     	font-size: 28rpx;
     	color: #888;
     	padding: 30rpx;
     	box-sizing: border-box;
     }
     
     .tui-btn__box {
     	width: 100%;
     	padding: 60rpx 30rpx;
     	box-sizing: border-box;
     }
    </style>
    
    <!--微信小程序-->
    <view class="container">
    <view class="tui-page__bd">
      <tui-form id="form">
        <tui-input label="手机号" lineLeft="{{false}}" placeholder="请输入手机号" model:value="{{mobile}}"></tui-input>
        <tui-input label="邮箱" lineLeft="{{false}}" placeholder="请输入邮箱" model:value="{{email}}"></tui-input>
        <tui-input label="身份证" lineLeft="{{false}}" placeholder="请输入身份证号码" model:value="{{idCard}}"></tui-input>
        <tui-input label="密码" password lineLeft="{{false}}" placeholder="请输入密码" model:value="{{password}}">
        </tui-input>
        <tui-input label="确认密码" password lineLeft="{{false}}" placeholder="请输入确认密码" model:value="{{confirmPwd}}">
        </tui-input>
        <view class="tui-btn__box">
          <tui-button width="400rpx" height="84rpx" bold bindclick="submit">提交</tui-button>
        </view>
      </tui-form>
    </view>
    </view>
    
    // data 数据 及 方法
    // //表单校验规则配置
    const rules = [{
      name: "mobile",
      rule: ["required", "isMobile"],
      msg: ["请输入手机号", "请输入正确的手机号"]
    }, {
      name: "email",
      rule: ["required", "isEmail"],
      msg: ["请输入邮箱", "请输入正确的邮箱"]
    }, {
      name: "idCard",
      rule: ["required", "isIdCard"],
      msg: ["请输入身份证号码", "请输入正确的身份证号码"]
    }, {
      name: "password",
      rule: ["required", "isEnAndNo"],
      msg: ["请输入密码", "密码为8~20位数字和字母组合"]
    }, {
      name: "confirmPwd",
      rule: ["required", "isSame:password"],
      msg: ["请输入确认密码", "两次输入的密码不一致"]
    }];
    let form;
    Page({
      data: {
        //表单数据 (小程序双向绑定不支持formData.name格式)
        name: '',
        mobile: '',
        email: '',
        idCard: '',
        password: '',
        confirmPwd: '',
        formData: {},
        //校验规则
        rules: rules
      },
      onReady: function () {
        form = this.selectComponent("#form")
      },
      submit() {
        if (!form) return;
        let {
          formData,
          rules,
          ...rest
        } = this.data;
        //表单数据
        console.log(rest)
        this.setData({
          formData: rest
        })
        form.validate(rest,this.data.rules).then(res => {
          console.log('校验通过!')
        }).catch(errors => {
          console.log(errors)
        })
      }
    })
    
    .tui-title {
    	width: 100%;
    	font-size: 28rpx;
    	color: #888;
    	padding: 30rpx;
    	box-sizing: border-box;
    }
    
    .tui-btn__box {
    	width: 100%;
    	padding: 60rpx 30rpx;
    	box-sizing: border-box;
    }
    
    // Make sure to add code blocks to your code group

    TIP

    所有校验规则定义请查看 表单验证规则 方法说明。

    # Slots

    插槽名称 说明
    default 标签显示内容,表单元素

    # Props

    属性名 类型 说明 默认值
    backgroundColor String 表单背景颜色 transparent
    padding String 表单padding值 0
    showMessage Boolean 是否显示校验错误信息 true
    radius String 表单圆角值 0
    disabled Boolean 是否禁用该表单内的所有组件,透明遮罩层 false
    tipTop Number,String 提示框top值,单位px H5:44,非H5:0
    tipPadding String 错误提示框padding值 20rpx
    tipBackgroundColor String 错误提示框背景色 #f74d54
    tipSize Number,String 错误提示字体大小,单位rpx 28
    tipColor String 错误提示字体颜色 #fff
    tipRidus String 错误提示框圆角值 12rpx
    duration Number,String 错误消息显示时间,单位ms 2000

    # Events

    事件名 说明 回调参数
    - - -

    # Methods

    rules 所有内置校验规则 查看:表单验证规则,如何调用方法详见 进阶用法 介绍

    方法名 说明 传入参数 回调参数
    validate 父级调用组件该方法进行表单验证 { model:表单数据对象,rules:表单验证规则 } { isPass:是否校验通过,errorMsg:错误消息 }
    方法调用
    //uni-app,需等组件初始化完成后调用方法
    this.$refs.form.validate(this.formData,this.rules).then(res => {
    	console.log(this.formData)
    	 console.log('校验通过!')
    }).catch(errors => {
    	console.log(errors)
    })
    
    //微信小程序,需等组件初始化完成后调用方法
    this.selectComponent("#form").validate(this.data.formData,this.data.rules).then(res => {
      // console.log(this.data.formData)
      console.log('校验通过!')
    }).catch(errors => {
      console.log(errors)
    })
    

    # 预览

    请以移动端效果为准,touch事件目前尚未在PC端做兼容。

    # 特别说明

    该组件为 会员组件,非开源内容,需开通会员才可获取使用。

    # 线上程序扫码预览

    ThorUI组件库 H5二维码 ThorUI示例
    ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
    Last Updated: 6/20/2023, 11:10:44 AM