uview-ui表单使用总结

文章介绍了如何在uView框架中进行表单验证,包括使用内置的手机号和身份证验证规则,以及如何动态配置校验规则,特别是在v-for循环中判断必填项。还提到了错误处理和validate方法的正确使用,确保表单提交时能正确触发验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

官网地址:https://v1.uviewui.com
表单校验的规则注意点:
在这里插入图片描述
uView自带验证规则
常用的手机号身份证之类的都可以直接用内置校验规则地址
使用方法:

this.$u.test.mobile(val)

如果是动态配置的表单,使用v-for循环,校验规则不确定是否必填可以在validator函数判断

rules:{
 	idCard: [{
				validator: (rule, value, callback) => {
					// 判断是否必填
					let isRequired = this.getIsRequired('idCard') //获取是否必填
						if (isRequired) {
							if (!value) {
								callback('请输入身份证号')
							} else {
								callback()
							}
						} else {
								callback()
							}
						},
					trigger: ['change', 'blur'],
				},
				{
					validator: (rule, value, callback) => {
						return this.$u.test.idCard(value)
					},
					message: '请输入正确的身份证号码',
					trigger: ['change', 'blur'],
				}
			],
}

表单:

<u-form :model="form" ref="uForm" :rules="rules" class="form_content" :label-width="260">
		<template v-for="(item,index) in applyConfigList">
			<view class="mlr-30" :key="index">
				<u-form-item :label="item.label" :required="item.isReuired" :prop="item.field">
					<u-input placeholder="请输入" v-model="form[item.field]" />
				</u-form-item>
			</view>
	</template>
</u-form>

其余的其它属性看官网吧,切记rules一定要写正确,要不他提交的时候this.$refs.uForm.validate()点击没有反应,一直不能触发。

### uView 表单下拉框使用教程 在构建基于 `uView` 的表单项时,对于下拉框的选择项通常采用特定的方式进行配置和交互处理。为了创建一个功能完善的下拉菜单组件,在模板部分定义 `<u-select>` 组件,并设置其参数来控制显示行为以及选项数据源。 #### 定义下拉框基本结构 ```html <u-form> <u-form-item label="城市选择"> <!-- 下拉框 --> <u-select v-model="cityIndex" :list="cities"></u-select> </u-form-item> </u-form> ``` 此处 `v-model` 双向绑定到变量 `cityIndex` 来追踪用户选择了哪个城市的索引位置;而 `:list` 属性接收的是由对象组成的数组 `cities`,每个对象代表一个可选项[^3]。 #### 初始化数据 在 Vue 实例的数据属性中初始化上述使用的两个变量: ```javascript data() { return { cityIndex: null, cities: [ { value: 'beijing', label: '北京' }, { value: 'shanghai', label: '上海' }, { value: 'guangzhou', label: '广州' } ] }; } ``` 当页面加载完成或者发生某些事件触发重新渲染时,这些初始值会被用来填充界面控件。 #### 处理用户选择后的逻辑 每当用户做出新的选择后,可以通过监听器捕获变化并执行相应操作: ```javascript watch: { cityIndex(newValue) { console.log(`您选择了 ${this.cities[newValue].label}`); // 这里可以根据业务需求做更多事情... } } ``` 此段代码展示了如何响应用户的输入改变,从而进一步影响应用状态或其他UI元素的行为。 #### 添加样式调整与其他特性支持 针对可能存在的布局问题,比如标签与输入区域间距过宽的情况,可以直接修改 `u-form-item` 中的 `label-width` 样式属性来进行微调。此外,若希望给普通的文本输入框增加边框,则可以在对应的 HTML 标签内利用 `customStyle` 自定义CSS样式的机制达成目的[^1]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值