uniapp uni-forms实现表单校验

本文为自定义校验归责的实现方法。

uniapp官方文档:uni-app官网 (dcloud.net.cn)

实现效果如下:

  1. 需要设置 name 属性为当前字段名 (与 rules 中的相对应)
html 复制代码
<view class="form">
  <uni-forms ref="form" :modelValue="student">
    <uni-forms-item label="账号" name="account">
	  <uni-easyinput v-model="student.account" placeholder="请输入手机号"></uni-easyinput>
	</uni-forms-item>
	<uni-forms-item label="密码" name="password">
	  <uni-easyinput v-model="student.password" placeholder="请输入密码" type="password"> 
      </uni-easyinput>
	</uni-forms-item>
    <uni-forms-item label="确认" name="confirm">
	  <uni-easyinput v-model="student.confirm" placeholder="请确认密码" type="password"> 
      </uni-easyinput>
	</uni-forms-item>
  </uni-forms>
  <button type="primary" @click="register">注册</button>
</view>
  1. 在 onReady 中设置规则
javascript 复制代码
onReady() {
  this.$refs.form.setRules(this.rules)
},
  1. 自定义各个字段的校验规则(validateFunction)
javascript 复制代码
<script>
	export default {
		data() {
			return {
				student: {
					account: "",
					password: "",
					confirm: ""
				},
				rules: {
					account: {
						rules: [{
								required: true,
								errorMessage: "请输入手机号"
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let reg = /^1[3456789]\d{9}$/;
									if (!reg.test(value)) {
										callback("输入有效的手机号");
									}
								}
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: "请输入密码"
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let reg = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,16}$/
									if (!reg.test(value)) {
										callback("密码需为6-16位,同时包含数字和字母")
									}
								}
							}
						]
					},
					confirm: {
						rules: [{
								required: true,
								errorMessage: "请确认密码"
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value !== data.password) {
										callback("两次输入的密码不一致");
									}
								}
							}
						]
					},
				}
			}
		},
	}
</script>
  1. 表单校验(this.$refs.form.validate)
javascript 复制代码
<script>
	export default {
		methods: {
			/* 注册 */
			register() {
				this.$refs.form
					.validate()
					.then(() => {
						uni.request({
							url: 'http://localhost:8887/yoga/student/register',
							method: 'POST',
							data: {
								sid: this.student.account,
								password: this.student.password
							},
							success: (res) => {
								console.log(res)
								uni.showToast({
									title: res.data.message,
									duration: 2000,
									icon: 'none',
								})
								if (res.data.code == 1) {
									uni.redirectTo({
										url: '/pages/index/Login'
									})
								}
							}
						})
					})
					.catch((err) => {
						console.log('表单校验失败:', err)
					})
			}
		}
	}
</script>
相关推荐
留不住丨晚霞3 分钟前
说说SpringBoot常用的注解?
java·开发语言
老坛0016 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛0017 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
华科云商xiao徐9 分钟前
Java多线程爬虫动态线程管理实现
java·爬虫·数据挖掘
今禾10 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐14 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价15 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花16 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101316 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树17 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js