表单校验、发送验证码、本地校验验证码是否正确、表单提交——uniapp+uview组件

1.HTML

<u--form labelPosition="left" :model="model1" ref="form1">
					<u-form-item label="卡号" prop="cardNo" labelWidth="80" borderBottom>
						<u--input v-model="model1.cardNo" border="none" placeholder="请填写绑定卡号"></u--input>
						<!-- <u-button slot="right" @tap="getCode" :text="tips" type="primary" size="mini"
							:disabled="disabled1"></u-button> -->
					</u-form-item>
					<u-form-item label="手机号" prop="mobile" labelWidth="80" borderBottom>
						<u--input v-model="model1.mobile" border="none" placeholder="请填写手机号"></u--input>
						<!-- <u-button slot="right" @tap="getCode" :text="tips" type="primary" size="mini"
							:disabled="disabled1"></u-button> -->
						<view class="getCode" :class="{activeCode:codeFlag}" @click="getCode">
							{{codeTxt}}
						</view>
					</u-form-item>
					<u-form-item label="验证码" prop="code" labelWidth="80" borderBottom ref="item1">
						<u--input v-model="model1.code" border="none" placeholder="请填写验证码"></u--input>
					</u-form-item>
				</u--form>
				<u-button type="primary" text="绑定" customStyle="margin-top: 50px" @click="submit"
					shape="circle"></u-button>

2.Script

data() {
			return {
				disabled1: false,
				tips: '',
				model1: {
					// cardNo: '57100677366', //卡号
					cardNo: '', //卡号
					mobile: '', //手机号
					code: ''
				},
				rules: {
					cardNo: [{
						type: 'string',
						required: true,
						message: '请填写绑定卡号',
						trigger: ['blur', 'change']
					}],
					mobile: [{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					}],
					code: {
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					}
				},
				openid: '',
				verificationCode: '',
				codeTxt: '获取验证码',
				codeFlag: true, // 控制按钮是否可点击
			}
		},
		// 一定要设置，否则校验不生效
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},

// 发送验证码
			getCode() {
				let that = this
				if (this.codeFlag == false) {
					return
				}
				if (that.model1.cardNo == '') {
					uni.$u.toast('卡号不能为空');
				} else if (that.model1.mobile == '') {
					uni.$u.toast('手机号码不能为空');
				} else {
					uni.showToast({
						title: '验证码发送成功',
						icon: 'none',
						duration: 2000
					})
					this.codeFlag = false;
					var time = 60
					this.codeTxt = time + 'S' + '重新获取'

					var timer = setInterval(() => {
						this.codeTxt = '获取验证码'
						if (time == 1) {
							this.codeFlag = true;
							clearInterval(timer)
						} else {
							time--
							this.codeTxt = time + 'S' + '重新获取'
						}

					}, 1000)
					// 发布接口,注意post请求携带参数的方式,这里将对象重新赋值
					setTimeout(() => {
						that.model1 = {
							cardNo: that.model1.cardNo,
							mobile: that.model1.mobile
						}
						uni.showLoading({
							title: '加载中...',
							mask: true
						});
						uni.request({
							// header: {
							// 	'Content-Type': 'application/x-www-form-urlencoded'
							// },
							url: 'http://wx.cunkou.co/api/wx/sendSms', //仅为示例，并非真实接口地址。
							method: 'POST',
							data: {
								cardNo: that.model1.cardNo,
								mobile: that.model1.mobile
							},
							// dataType: 'json',
							success: (res) => {
								uni.hideLoading();
								if (res.data.code == 0) {
									that.verificationCode = res.data.data
								} else {
									uni.showToast({
										title: res.data.message,
										icon: 'none',
										duration: 2000
									})
								}

							}

						});
					}, 2000)

				}

			},

// 表单提交
			submit() {
				let that = this
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {

					uni.showModal({
						content: '你确定要绑定吗？',
						success: function(res) {

							if (res.confirm) {
								if (that.model1.code !== that.verificationCode) {
									uni.$u.toast('验证码不正确');
								} else {
									that.model1 = {
										cardNo: that.model1.cardNo,
										mobile: that.model1.mobile,
										code: that.model1.code,
										openid: that.openid
									}
									uni.showLoading({
										title: '加载中...',
										mask: true
									});
									uni.request({
										// header: {
										// 	'Content-Type': 'application/x-www-form-urlencoded'
										// },
										url: 'http://wx.cunkou.co/api/wx/bindCard', //为示例，并非真实接口地址。
										method: 'POST', //一定要大写
										data: {
											cardNo: that.model1.cardNo,
											mobile: that.model1.mobile,
											code: that.model1.code,
											openid: that.openid
										},
										// dataType: 'json',
										success: (res) => {
											uni.hideLoading();
											if (res.data.code == 0) {
												uni.showToast({
													title: '绑定成功',
													icon: 'none',
													duration: 2000
												})
												// uni.setStorage({
												// 	key:'userInfo',
												// 	data:res.data
												// })
												// uni.setStorageSync(KEY,DATA)
												uni.setStorageSync('userInfo', res.data
													.data);

												setTimeout(function() {
													uni.reLaunch({
														url: '/pages/mine/mine'
													})
												}, 2000);

											} else {
												uni.showToast({
													title: res.data.message,
													icon: 'none',
													duration: 2000
												})
											}

										}

									});
								}

							} else if (res.cancel) {}
						}
					});

				}).catch(errors => {
					uni.$u.toast('请填写完整的信息')
				})
			},

3.Style

<style lang="scss">
	.u-demo-block__content {
		margin: 20rpx;
	}

	.getCode {
		height: 60rpx;
		width: 180rpx;
		background: #f7f7f7;
		color: #666666;
		line-height: 60rpx;
		font-size: 24rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.getCode.activeCode {
		background: #2D99F5;
		color: #FFFFFF;
	}
</style>