第四节：常用uni-ui组件剖析(uni-forms)

一.  uni-froms剖析

（详见官网：https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html）

1. form标签

     (1).  ref：绑定form自身

     (2).  modelValue： 绑定表单数据

     (3).  rules：绑定校验规则，这里的名称通常是和modelValue中名称一样（可以不一样），但是必须和 form-item中的name标签一致。 

     (4).  validateTrigger：表单校验的触发形式

     (5).  err-show-type：表单校验未通过的提示字的展示位置

 

2. form-item标签

     (1).  label：输入框左边的文字提示

     (2).  name：表单域的属性名，在使用校验规则时必填

 

3.  校验

   主要通过validate()+then+catch进行校验。

 

4. 自定义规则

   可以通过 validateFunction 自定义表单的校验规则，但是一旦自定义了，通过属性rules绑定的方式失效了，需要在onReady中通过 setRules方法进行绑定

 

页面代码：

<uni-forms ref="formRef" :modelValue="feeObj" :rules="formRules" validateTrigger="bind" err-show-type="undertext">
    
				<uni-forms-item name="feeType"  label="费用类别">
					<uni-data-select v-model="feeObj.feeType" :localdata="array" placeholder="请选择费用类别"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item name="feeName"  label="费用名称">
					<uni-easyinput v-model="feeObj.feeName" placeholder="请输入费用名称" maxlength="20" :inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item name="feeMoney" label="费用(元)">
					<uni-easyinput v-model="feeObj.feeMoney" placeholder="请输入费用" maxlength="100" :inputBorder="false" />
				</uni-forms-item>
</uni-forms>

 js代码： 

<script setup>
    
let feeObj = reactive({
	feeType: '',
	feeName: '',
	feeMoney: '',
});
const formRef = ref(null);
let formRules = reactive({
	feeType: {
		rules: [{ required: true, errorMessage: '请选择费用类别' }]
	},
	feeName: {
		rules: [{ required: true, errorMessage: '请输入费用名称' }]
	},
	feeMoney: {
		rules: [
			{ required: true, errorMessage: '请输入费用(元)' },
			{
				format: 'number',
				errorMessage: '请正确输入费用的格式'
			}
		]
	}
});
    
//5. 综合提交
const submitInfo = async param => {
	formRef.value
		.validate()
		.then(async res => {
			console.log('表单校验通过：', res);
			
		})
		.catch(err => {
			console.log('表单错误信息：', err);
			
		});
};
       
</script>

 

二. xxx

 

 

 

 

 

 

 

三. xxx

 

 

 

 

 

 

 

 

!

• 作       者 : Yaopengfei(姚鹏飞)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
• 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。