博客

效果图：

代码实现：

<template>
	<view>
		<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
			<uni-group title="基本信息" top="0">
				<uni-forms-item name="name" required label="用户名">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入用户名"></uni-easyinput>
				</uni-forms-item>
				<!-- 使用原生input，需要绑定binddata -->
				<uni-forms-item name="age" required label="年龄">
					<input type="text" v-model="formData.age" class="uni-input-border" @blur="binddata('age', $event.detail.value)" placeholder="请输入年龄" />
				</uni-forms-item>
				<uni-forms-item name="weight" label="体重">
					<slider min="0" max="200" step="5" show-value v-model="formData.weight" @change="binddata('weight', $event.detail.value)"></slider>
				</uni-forms-item>
				<uni-forms-item required name="birth" label="出生日期">
					<uni-datetime-picker timestamp v-model="formData.birth"></uni-datetime-picker>
				</uni-forms-item>
				<uni-forms-item name="email" label="邮箱">
					<uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="checked" label="详细信息">
					<switch :checked="formData.checked" @change="change('checked', $event.detail.value)" />
				</uni-forms-item>
			</uni-group>
			<template v-if="formData.checked">
				<uni-group title="详细信息">
					<uni-forms-item required name="sex" label="性别">
						<uni-data-checkbox v-model="formData.sex" :localdata="sex"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item name="country" label="国家">
						<picker :value="formData.country" :range="range" @change="binddata('country', $event.detail.value)">
							<view>{{ formData.country === '' ? '请选择国家' : range[formData.country] }}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required name="hobby" label="兴趣爱好">
						<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby" />
					</uni-forms-item>
					<uni-forms-item name="remarks" label="备注">
						<uni-easyinput type="textarea" v-model="formData.remarks" :maxlength="20" placeholder="请输入备注"></uni-easyinput>
					</uni-forms-item>
				</uni-group>
			</template>
			<view>
				<button  @click="submitForm('form')">校验表单</button>
				<button size="mini" @click="validateField('form')">只校验用户名和邮箱项</button>
				<button size="mini" @click="clearValidate('form', 'name')">移除用户名的校验结果</button>
				<button size="mini" @click="clearValidate('form')">移除全部表单校验结果</button>
				<button  @click="resetForm">重置表单</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: 'DCloud',
					age: 21,
					email: '',
					sex: '0',
					hobby: [0, 2],
					remarks: '热爱学习，热爱生活',
					checked: false,
					country: 2,
					weight: 120,
					birth: ''
				},
				sex: [{
						text: '男',
						value: '0'
					},
					{
						text: '女',
						value: '1'
					},
					{
						text: '未知',
						value: '2'
					}
				],
				hobby: [{
						text: '足球',
						value: 0
					},
					{
						text: '篮球',
						value: 1
					},
					{
						text: '游泳',
						value: 2
					}
				],
				range: ['中国', '美国', '澳大利亚'],
				show: false,
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},
							{
								minLength: 3,
								maxLength: 15,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
							}
						]
					},
					age: {
						rules: [{
								required: true,
								errorMessage: '请输入年龄'
							},
							{
								format: 'int',
								errorMessage: '年龄必须是数字'
							},
							{
								minimum: 18,
								maximum: 30,
								errorMessage: '年龄应该大于 {minimum} 岁，小于 {maximum} 岁'
							}
						]
					},
					weight: {
						rules: [{
								format: 'number',
								errorMessage: '体重必须是数字'
							},
							{
								minimum: 100,
								maximum: 200,
								errorMessage: '体重应该大于 {minimum} 斤，小于 {maximum} 斤'
							}
						]
					},
					birth: {
						rules: [
							{
								required: true,
								errorMessage: '请选择时间'
							},
							{
								format: 'timestamp',
								errorMessage: '必须是时间戳'
							}
						]
					},
					email: {
						rules: [{
							format: 'email',
							errorMessage: '请输入正确的邮箱地址'
						}]
					},
					checked: {
						rules: [{
							format: 'bool'
						}]
					},
					sex: {
						rules: [{
							format: 'string'
						}]
					},
					hobby: {
						rules: [{
								format: 'array'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.length < 2) {
										callback('请至少勾选两个兴趣爱好')
									}
									return true
								}
							}
						]
					}
				}
			}
		},
		methods: {
			change(name, value) {
				this.formData.checked = value
				this.$refs.form.setValue(name, value)
			},

			submitForm(form) {
				this.$refs[form]
					.submit()
					.then(res => {
						console.log('表单的值：', res)
						uni.showToast({
							title: '验证成功'
						})
					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},

			//重置表单 。原生的组件input组件不能重置表单
			resetForm() {
				this.$refs.form.resetFields()
			},
			validateField(form) {
				this.$refs[form]
					.validateField(['name', 'email'])
					.then(res => {
						uni.showToast({
							title: '验证成功'
						})
						console.log('表单的值：', res)
					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},

			clearValidate(form, name) {
				if (!name) name = []
				this.$refs[form].clearValidate(name)
			}
		}
	}
</script>
<style>
	.uni-input-border {
		padding: 0 10px;
		height: 35px;
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}
</style>