微信小程序实现表单验证

目录

错误方向：

HbuilderX

使用HbuilderX打开微信小程序

浅尝Hbuilder X

创建新页面

尝试创建tabbar

开始尝试表单

表单验证 

下载组件

引入组件

组件说明

---

错误方向：

开始时想用vant中的form组件解决，但是没有找到办法引入，如果有好的办法欢迎指正

从这里一路找到vue组件，最终发现vue组件不支持微信小程序，然后找到了另外一个方法——uni-app组件：

组件官方文档：uni-app官网

下载推荐使用的 Hbuilder X 开发工具来开发项目

下载地址：HBuilderX-高效极客技巧

值得注意的是 Hbuilder X 是另一个开发者工具，之所以能实现微信小程序的表单验证，是因为其框架可以转化为其他的小程序

HbuilderX

使用HbuilderX打开微信小程序

1、安装sass插件

点击 工具 => 插件安装 => 安装新插件 => 前往插件市场安装 ，找到需要的插件之后点击下载 => 使用Hbuilderx 导入插件，这里需要登录 sass 的网站，如果登录成功则会打开 Hbuilderx 编译器，然后点击确定就可以安装了；

2、新建uni-app项目

Hbuilderx 点击 文件=>新增=>项目 ，本文新建一个小程序项目：uni-app => 填写项目名称、选择项目存放路径 => 模板 uni-ui 项目=>创建，然后就可以生成一个小程序项目；

3、配置appid

在 manifest.json 文件 => 微信小程序配置 填写微信小程序 appID；（在微信开放平台上找）

4、在 Hbuilderx 配置微信开发者工具的安装路径：这样可以在 Hbuilderx 里面运行的时候自动打开微信开发者工具查看项目

工具 => 设置 => 运行配置 => 小程序运行配置 配置微信开发者工具的安装路径，如：D:\微信小程序开发\微信web开发者工具

5、在微信开发者工具开启服务端口

设置 => 安全设置 => 安全 开启服务端口

6、运行

Hbuilderx 点击 运行=>运行到小程序模拟器 点击第一个就可以在 Hbuilderx 自动编译，成功之后会自动打开微信开发者工具；

注意：这个时候我们想修改项目里面的内容，需要在 Hbuilderx 里面修改，例如修改配置：manifest.json 文件 => 源码视图

成功：

浅尝Hbuilder X

创建新页面

打开page文件夹，右键创建新页面即可

创建成功后，pages.json中就会出现相应的内容

尝试创建tabbar

在pages.json中写入，同微信小程序中的app.json中写法相同

通过ctrl + s 快捷键保存自动运行，微信开发者工具上即可显示

开始尝试表单

HbuilderX页面中只有一个index.vue文件，因此要将前后端写在一起

template前端（wxml）

script后端（js）

style样式（wxss）

后端代码中，小程序中的 data:{} 中的变量相当于这里的

data() {
    return {
       变量
    }
}
methods: {
    这里写事件
}

 

 

经过官方文档发现，这里改变赋值和微信小程序不同

//微信小程序
this.setData({
    inputvalue: e.detail.value
})

//这里是一种更简单的方法
this.inputvalue = e.detail.value

再来看前端代码

这里的@submit 相当于微信小程序中的 bindsubmit @input 相当于 bindinput 大胆推测在vue中 @ 的作用相当于小程序中的 bind

这样似乎就写好了一个表单，但是我们的目的是做表单验证，让输入框为必填项

表单验证 

下载组件

这里需要引入 uni-forms 组件进入 Hbuilder X ：

官方文档提供的组件下载地址：uni-forms 表单 - DCloud 插件市场

引入组件

在vue文件中引入组件，注意文件夹位置为实际文件夹位置，不要复制粘贴

<script>
    
import uniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
import uniFormsItem from '@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue';

export default {
  components: {
    uniForms,
    uniFormsItem
    // 可以在这里注册其他在本页面使用的组件
  }
  // 其他数据和方法...
}
    
</script>

我出现了引入组件还是不行的情况

Component is not found in path "uni_modules/uni-forms/components/uni-forms/uni-forms" (using by "pages/index/index")(env: Windows,mp,1.06.2402021; lib: 3.3.4)
Component is not found in path "uni_modules/uni-forms/components/uni-forms-item/uni-forms-item" (using by "pages/index/index")(env: Windows,mp,1.06.2402021; lib: 3.3.4)

我这边是确认位置没有问题之后，清除缓存，重新启动小程序，报错消失

组件说明

<uni-forms> 提供了 rules属性来描述校验规则、 <uni-forms-item> 子组件来包裹具体的表单项，以及给原生或三方组件提供了 onFieldChange() 来校验表单值。

每个要校验的表单项，不管input还是checkbox，都必须放在 <uni-forms-item> 组件中，且一个 <uni-forms-item> 组件只能放置一个表单项。

<uni-forms-item> 组件内部预留了显示error message的区域，默认是在表单项的底部。

另外， <uni-forms> 组件下面的各个表单项，可以通过 <uni-group> 包裹为不同的分组。同一 <uni-group> 下的不同表单项目将聚拢在一起，同其他group保持垂直间距。 <uni-group> 仅影响视觉效果。

开始验证

前端

<template>
	<view class="content">
		<uni-forms ref="form" :model="formData" :rules="rules">
			<uni-forms-item label="姓名" required=true name="name">
				<input type="text" v-model="formData.name" @input="event => binddata('name',event.detail.value,'form')"/>
			</uni-forms-item>
			
			<uni-forms-item label="年龄" required=true name="age">
				<input type="text" v-model="formData.age" @input="event => binddata('age',event.detail.value,'form')"/>
			</uni-forms-item>
			<button @click="submit">提交</button>
		</uni-forms>
	</view>
</template>

 

这里要用到了两个之前引入的组件

ref 是这个表单的名字

:model 定义的是该表单储存数据的字典，内的元素以key/value这种键值对的形式存在

:rules 定义的是验证规则

实现表单验证主要依靠这个组件

之前提到过，uni-forms中要实现表单验证需要搭配uni-forms-item组件使用，一个组件内只能放一个input，因此可以get到这个组件类似于view且将表单中的name元素写在这个位置

一些属性：

 

还要注意的是这里的input内几个用法

1. v-model="formData.name"

   我的理解是这个相当于微信小程序input组件的value元素，这里的 v-model 指向的是之前:model 定义过的字典，对应的是name的value

2. @input="event => binddata('name',event.detail.value,'form')"

   之前提到过@相当于bind所有这个解释bindinput输入事件，作用是输入时改变字典内相对于的值

   'name'，就是指向字典内的key值；

   'event.detail.value'，是输入的内容；

   'form'，是指表单名称，由之前的ref定义的

后端

<script>
	import uniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
	import uniFormsItem from '@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue';
	
	export default {
		components: {
		  uniForms,
		  uniFormsItem
		  // 可以在这里注册其他在本页面使用的组件
		},
		data() {
			return {
				formData: {
					name: '',
					age: ''
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					}
				}
			}
		},
		onLoad() {

		},
		methods: {
			submit() {
						this.$refs.form.validate().then(res=>{
							console.log('表单数据信息：', res);
						}).catch(err =>{
							console.log('表单错误信息：', err);
						})
					},
			binddata(fieldName, value, form) {
			      // 这里实现 binddata 方法的逻辑
			      // 例如，更新 formData 对象中对应字段的值
			      this.formData[fieldName] = value;
			      console.log(this.formData[fieldName])
			      // 如果有额外的逻辑需要根据表单名处理，也可以在这里添加
			    },
		}
	}
</script>

 

后端相比于小程序的变化前面已经说过了，直接看代码，因为之前定义了一个 formData 的变量，因此需要在后端进行补充，这里定义了需要用到的键值对

然后定义表单验证规则，毕竟红点只是前端，只是看，这里的结构为

// 这里的rules是前端用 `:rules` 命名的无特殊含义
rules: {
   变量: {
       rules: [{
           required: true, 
           // 确定元素是否为必填项

		   errorMessage: '姓名不能为空'
           // 元素未填时的提示信息
       }]
   },
   变量: {}
}

rules的一些属性

 

 

这里学到了一个知识点，对代码简化很有帮助

binddata(fieldName, value, form) {
	// 这里实现 binddata 方法的逻辑
	// 例如，更新 formData 对象中对应字段的值
	this.formData[fieldName] = value;
	console.log(this.formData[fieldName])
	// 如果有额外的逻辑需要根据表单名处理，也可以在这里添加
    },

这里的fieldName 是一个动态参数，而且fieldName 并不固定可以由自己随意改变

这个函数为多输入框的单一函数提供了简单方法，去掉了一些机械重复的代码，爽了

注意官网上并没有用到这个方法，是直接通过v-model 绑定的，一些不支持绑定的组件才会使用@input事件

 

提交/验证事件

submit() {
			this.$refs.form.validate().then(res=>{
				console.log('表单数据信息：', res);
			}).catch(err =>{
				console.log('表单错误信息：', err);
			})
		},

 

这里的$refs 是一个对象

$refs.form 指向的就是命名为form 的表单

validate() 是组件内自带的一个方法，作用就是验证表单，比较有了规则，还有有执行规则的

• validate方法返回一个Promise，它在校验成功时会被解析，校验失败时会被拒绝。

 

一个简陋而且丑陋的表单验证就完成了