uniapp uni-forms实现表单校验

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

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

实现效果如下：

 

1. 需要设置 name 属性为当前字段名 （与 rules 中的相对应）

<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>

2. 在 onReady 中设置规则

onReady() {
  this.$refs.form.setRules(this.rules)
},

3. 自定义各个字段的校验规则（validateFunction）

<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>

4. 表单校验（this.$refs.form.validate）

<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>