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>
相关推荐
独立开阀者_FwtCoder几秒前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
张人玉6 分钟前
C# 常量与变量
java·算法·c#
Cacciatore->11 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~12 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo14 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
Java技术小馆20 分钟前
GitDiagram如何让你的GitHub项目可视化
java·后端·面试
贵沫末32 分钟前
React——基础
前端·react.js·前端框架
Codebee37 分钟前
“自举开发“范式:OneCode如何用低代码重构自身工具链
java·人工智能·架构
aklry44 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端