妙妙屋

思而不学则殆

0%

form表单验证

发表于 更新于 分类于
本文字数： 2.4k 阅读时长 ≈ 9 分钟

form表单验证

前言：做获奖申报时，我想把一些输入框设置为必填，原生小程序中没有表单验证，如果在后端将输入框内的变量挨个使用 if ……else 似乎过于麻烦，结构太复杂，我想用vant组件的表单验证解决，但是遇到点问题：vant-form组件无法引入

image-20240401203626963

改变思路，尝试引入vue组件，经过一些操作，成功报错

发生错误SyntaxError: parse js file (D:\微信小程序开发\微信小程序练习\miniprogram-18/miniprogram/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js) failed: Unexpected token (333:15)

image-20240401200131194

解决方法：

清除npm缓存

1
npm cache clean --force

柳暗花明又一村

image-20240401202139114

uni-app

然后我选择了uni-app组件

组件官方文档：https://uniapp.dcloud.io/

uni-app 推荐使用 Hbuilderx 开发工具来开发项目

下载地址：https://www.dcloud.io/hbuilderx.html

Hbuilder X

使用HbuilderX打开微信开发者工具

1、安装 sass 插件

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

2、新建uni-app项目

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

3、配置 appid

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

image-20240401212830280

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

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

image-20240401212737689

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

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

image-20240401212706282

6、运行

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

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

成功：

image-20240401212623601

浅尝Hbuilder X

创建新页面

打开pages文件夹，右键创建新页面

image-20240401214421029

创建成功之后，pages.json中出现一下内容

image-20240401215210866

尝试创建tabbar

在pages.json中写入，同app.json中写法相同

image-20240401215544190

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

image-20240401215625920

尝试表单

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

image-20240402104926882

template前端（wxml）

script后端（js）

style样式（wxss）

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

1
2
3
4
5
6
7
8
data() {
    return {
       变量
    }
}
methods: {
    这里写事件
}

image-20240402105103849

经过官方文档发现，这里改变赋值不需要

1
2
3
4
5
this.setData({
    inputvalue: e.detail.value
})
而是以一种简单的方法
this.inputvalue = e.detail.value

再来看前端代码

image-20240402105612322

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

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

开始表单验证

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

官方文档提供的组件下载地址：https://ext.dcloud.net.cn/plugin?id=2773

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

一定要引入组件！！！找了好多文章，完全没有提引入的事情

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

引入之后，我的小程序依旧报错

1
2
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> 仅影响视觉效果。

来写一个简单的表单吧

前端

image-20240402195909896

源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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元素写在这个位置

一些属性：

image-20240402200724302

还要注意的是这里的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定义的

后端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<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 的变量，因此需要在后端进行补充，这里定义了需要用到的键值对

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 这里的rules是前端用 `:rules` 命名的无特殊含义
rules: {
   变量: {
       rules: [{
           required: true, 
           // 确定元素是否为必填项

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

rules的一些属性

image-20240403082244110

image-20240403082415300

这里学到了一个知识点，对代码简化很有帮助
1
2
3
4
5
6
7
binddata(fieldName, value, form) {
	// 这里实现 binddata 方法的逻辑
	// 例如，更新 formData 对象中对应字段的值
	this.formData[fieldName] = value;
	console.log(this.formData[fieldName])
	// 如果有额外的逻辑需要根据表单名处理，也可以在这里添加
    },

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

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

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

image-20240403081929654

提交/验证事件
1
2
3
4
5
6
7
submit() {
			this.$refs.form.validate().then(res=>{
				console.log('表单数据信息：', res);
			}).catch(err =>{
				console.log('表单错误信息：', err);
			})
		},

这里的$refs 是一个对象

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

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

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

这样一个简陋的表单验证就完成了

image-20240403081629036