uniapp微信小程序自定义表单校验失效

解决方法:

1.html部分,添加ref="Uform",

2.js部分,添加

onReady(){
    this.$nextTick(() => {
         this.$refs.form.setRules(this.rules);
     });
}

3.如果还不行,报错:Cannot read property 'setRules' of undefined"。这是因为表单使用了v-for,将v-for改为v-show即可!

上代码:

<template>
    <view>
        <view @click="handleResetPwd()">修改密码</view>
		<!-- 修改密码框弹窗 -->
		<view class="prompt-box" v-show="isHidden">
				<u-form :model="form"  ref="form"  >
					<u-form-item label="旧密码" prop="OldPwd" border-bottom="true" >
						<u-input v-model="form.OldPwd" border="none" inputAlign="right" placeholder="请填写旧密码" type="password" />
					</u-form-item>
					<u-form-item label="新密码" prop="NewPwd" border-bottom="true">
						<u-input v-model="form.NewPwd" border="none" inputAlign="right" placeholder="请填写新密码" type="password" />
					</u-form-item>
					<u-form-item label="确认密码" prop="confirmpwd" border-bottom="true">
						<u-input v-model="form.confirmpwd" border="none" inputAlign="right" placeholder="请确定新密码" type="password" />
					</u-form-item>
				</u-form>
				<view class="handle-btn">
					<view class="cancel-btn" @click="cancel">
						<text>取消</text>
					</view>
					<view class="confirm-btn" @click="confirm">
						<text>确定</text>
					</view>
				</view>
		</view>
    </view>

</template>

<script>
	export default {
		data() {
			var equalToPassword = (rule, value, callback) => {
			  if ( value!==this.form.NewPwd ) {
			    callback(new Error("两次输入的密码不一致"));
			  } else {
			    callback();
			  }
			};
			return {
				isHidden: false,
				form: {
						OldPwd: '',
						NewPwd: '',
						confirmpwd:"",
					},
				rules: {
					OldPwd: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
					NewPwd: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }],
					confirmpwd: [{ required: true, message: "确认新密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
				}
			}
		},
		methods: {
			cancel() {
				this.isHidden = false;
			},
			confirm() {
				this.$refs.form.validate().then(res=>{
					//发请求,逻辑处理
					})
				})
			},
			handleResetPwd() {
				this.form.OldPwd="";
				this.form.NewPwd = "";
				this.form.confirmpwd = "";
				this.isHidden = true;
			}
		},
		onReady(){
		    this.$nextTick(() => {
		         this.$refs.form.setRules(this.rules);
		     });
		}
	}
</script>

对于uniapp微信小程序,你可以通过自定义组件来实现自定义tabbar。以下是一种实现方法: 1. 在 uniapp 项目中创建一个新的自定义组件,例如 "custom-tabbar"。 2. 在 custom-tabbar 组件的文件夹中,创建一个 JSON 文件,命名为 "custom-tabbar.json"。在该文件中定义组件使用的自定义属性,例如: ```json { "component": true, "usingComponents": {} } ``` 3. 在 custom-tabbar 组件的文件夹中,创建一个 WXML 文件,命名为 "custom-tabbar.wxml"。在该文件中编写自定义tabbar的布局,例如: ```html <view class="custom-tabbar"> <!-- 自定义的tabbar按钮 --> <view class="custom-tabbar-item" bindtap="navigateToPage"> <!-- 按钮图标 --> <image src="{{ activeIndex === 0 ? 'icon1-active' : 'icon1' }}"></image> <!-- 按钮文字 --> <text class="{{ activeIndex === 0 ? 'active' : '' }}">Tab1</text> </view> <view class="custom-tabbar-item" bindtap="navigateToPage"> <!-- 按钮图标 --> <image src="{{ activeIndex === 1 ? 'icon2-active' : 'icon2' }}"></image> <!-- 按钮文字 --> <text class="{{ activeIndex === 1 ? 'active' : '' }}">Tab2</text> </view> <!-- 更多按钮 --> <view class="custom-tabbar-item more" bindtap="showMoreOptions"> <!-- 更多按钮图标 --> <image src="more-icon"></image> </view> </view> ``` 4. 在 custom-tabbar 组件的文件夹中,创建一个 WXSS 文件,命名为 "custom-tabbar.wxss"。在该文件中编写自定义tabbar的样式,例如: ```css .custom-tabbar { display: flex; align-items: center; height: 50px; background-color: #fff; } .custom-tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .custom-tabbar-item image { width: 30px; height: 30px; } .custom-tabbar-item text { font-size: 12px; margin-top: 5px; } .custom-tabbar-item.more { position: relative; } .custom-tabbar-item.more image { width: 40px; height: 40px; } .active { color: #007aff; } ``` 5. 在需要使用自定义tabbar的页面中,引入 custom-tabbar 组件,例如: ```html <template> <view> <!-- 页面内容 --> </view> <!-- 引入自定义tabbar组件 --> <custom-tabbar></custom-tabbar> </template> <script> import customTabbar from '@/components/custom-tabbar/custom-tabbar' export default { components: { customTabbar }, // 页面逻辑代码 } </script> <style> /* 页面样式 */ </style> ``` 通过以上步骤,你就可以在uniapp微信小程序中实现自定义tabbar了。你可以根据自己的需求修改自定义tabbar的布局和样式,以及处理相应的点击事件。希望能对你有所帮助!
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值