shuhi-app/pages/index/entry/book-weight.vue

<template>
	<view class="common-page">
		<u-form :model="form" :rules="rules" ref="formRef" labelWidth="80px" errorType="toast">
			<u-form-item label="重量（克）" prop="weight" required>
				<u-input v-model="form.weight" placeholder="请输入数值" clearable />
			</u-form-item>
			<u-form-item label="ISBN" prop="isbn" required>
				<u-input v-model="form.isbn" placeholder="请输入编码" clearable />
			</u-form-item>
		</u-form>

		<view class="fixed-bottom">
			<u-button size="large" type="warning" text="扫码" @click="handleScan" />
			<u-button size="large" type="success" text="提交" @click="submitForm" />
		</view>
	</view>
</template>

<script>
	import {
		ref
	} from 'vue';

	export default {
		setup() {
			const form = ref({
				weight: '',
				isbn: ''
			});

			const rules = {
				weight: [{
						required: true,
						message: '请输入重量',
						trigger: 'blur'
					},
					{
						type: 'number',
						message: '重量必须是数字',
						trigger: 'blur'
					}
				],
				isbn: [{
					required: true,
					message: '请输入ISBN',
					trigger: 'blur'
				}]
			};

			function handleScan() {

			}

			const formRef = ref(null);

			const submitForm = () => {
				formRef.value.validate((valid) => {
					if (valid) {
						// 提交表单
						console.log('表单验证成功', form.value);
					} else {
						console.log('表单验证失败');
						return false;
					}
				});
			};

			return {
				form,
				rules,
				formRef,
				submitForm
			};
		}
	};
</script>