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>
相关推荐
meng半颗糖4 分钟前
JavaScript 性能优化实战指南
前端·javascript·servlet·性能优化
EndingCoder5 分钟前
离线应用开发:Service Worker 与缓存
前端·javascript·缓存·性能优化·electron·前端框架
孫治AllenSun14 分钟前
【Springboot】介绍启动类和启动过程
java·spring boot·后端
遗憾随她而去.18 分钟前
css3的 --自定义属性, 变量
前端·css·css3
haogexiaole2 小时前
vue知识点总结
前端·javascript·vue.js
励志码农4 小时前
JavaWeb 30 天入门:第二十三天 —— 监听器(Listener)
java·开发语言·spring boot·学习·servlet
哆啦A梦15884 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
@小匠4 小时前
Spring Cache 多租户缓存隔离解决方案实践
java·spring·缓存
智码看视界5 小时前
老梁聊全栈系列:(阶段一)架构思维与全局观
java·javascript·架构