1.html结构

<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
					<u-form-item prop="phone">
						<view class="cu-form-group">
							<text class=" cuIcon-mobilefill text-green"></text> <text style="margin-left: 8px;"></text>
							<u-input class="title" placeholder="请输入手机号" v-model="form.phone" type="text"
								confirm-type="search" @confirm="doSearch1" :focus="isFocus1" maxlength="11" />
						</view>
					</u-form-item>
					<u-form-item prop="users">
						<view class="cu-form-group">
							<u-icon name="man-add-fill" size="22" color="#f29100"></u-icon><text
								style="margin-left: 3px;"></text>
							<u-input class="title" placeholder="请输入联系人" v-model="form.users" type="text"
								confirm-type="search" @confirm="doSearch1" :focus="isFocus1" />
						</view>
					</u-form-item>
					<u-form-item prop="names">
						<view class="cu-form-group">
							<u-icon name="tags-fill" size="20" color="#2979ff"></u-icon><text
								style="margin-left: 5px;"></text>
							<u-input class="title" placeholder="请输入公司名称" v-model="form.names" type="text"
								confirm-type="search" @confirm="doSearch1" :focus="isFocus1" />
						</view>
					</u-form-item>
					<u-form-item prop="email">
						<view class="cu-form-group">
							<u-icon name="email-fill" size="20" color="#82848a"></u-icon><text
								style="margin-left: 5px;"></text>
							<u-input class="title" placeholder="请输入电子邮箱" v-model="form.email" type="text"
								confirm-type="search" @confirm="doSearch1" :focus="isFocus1" />
						</view>
					</u-form-item>
					<u-form-item prop="check">
						<view class="cu-form-group">
							<text class=" cuIcon-comment text-green" style="margin-right: 7px;"></text>
							<u-input class="title" placeholder="请输入验证码" v-model="form.check" type="text"
								confirm-type="search" @confirm="doSearch1" :focus="isFocus1" />
							<button class="cu-btn bg-blue xs" v-if="flagTime" @click="checkMsg">发送验证码</button>
							<text class="cu-btn bg-grey  border" v-else>{{times}}秒后重新获取</text>
						</view>
					</u-form-item>
				</u--form>

2. data设置rlues

          form: {
					phone: '',
					users: '',
					names: '',
					email: '',
					check: ''
				},
				rules: {
					phone: [{
							required: true,
							message: "请输入手机号",
							trigger: ["blur", "change"],
						},
                        // uniapp自带的手机号验证规则
						{
							validator: (rule, value, callback) => {
								if (value) {
									return this.$u.test.mobile(value);
								} else {
									return true
								}
							},
							message: "手机号格式不正确",
							trigger: ["blur", "change"],
						},
					],
					users: [{
						required: true,
						message: "请输入联系人",
						trigger: ["blur", "change"],
					}],
					names: [{
						required: true,
						message: "请输入公司名称",
						trigger: ["blur", "change"],
					}],
					email: [{
						required: true,
						message: "请输入电子邮箱",
						trigger: ["blur", "change"],
					},
                    // 自己定义的邮箱验证规则
                    {
						validator: (rule, value, callback) => {
							if (value) {
								var myReg =
									/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
								if (!myReg.test(value)) {
									return false
								} else {
									return true
								}
							} else {
								return true
							}
						},
						message: "邮箱格式不正确",
						trigger: ["blur", "change"],
					}],
					check: [{
						required: true,
						message: "请输入验证码",
						trigger: ["blur", "change"],
					}, 
                    // 自己定义的验证码验证规则
                    {
						validator: (rule, value, callback) => {
							if (value) {
								if (value.length > 6) {
									return false
								} else {
									return true
								}
							} else {
								return true
							}
						},
						message: "验证码格式不正确",
						trigger: ["blur", "change"],
					}]
				}

3.方法里整体验证和请求接口

            // 表单整体校验
			async registerFun() {
                // this.$refs.uForm 拿到ref上挂载的dom元素,也就是form,你在u--form里定义的ref等于什么,这个this.$refs.就是什么
				let valid = await this.$refs.uForm.validate()
				if (valid) {
                    //调用接口方法
					this.register()
				} else {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '您输入的信息有误'
					})
				}
			},
            // 注册
			async register() {
				const token = uni.getStorageSync('token')
				var url = 'userRegister'
				var method = 'POST'
				var params = {
					token: token,
					company: this.form.names,
					email: this.form.email,
					name: this.form.users,
					phone: this.form.phone,
					yzm: this.form.check
				}
				await request(url, method, params).then((res) => {
					console.log(res.data)
						if(res.data.code!=10000){
							uni.showToast({
								icon: 'none',
								title: res.data.message
							});
						}else{
							uni.showToast({
								title: '注册成功'
							});
							this.listIndex=0
						}
				})
			},
            
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐