上述代码
HZH8997
- 发布：2023-04-25 10:44
- 更新：2023-04-26 09:20
- 阅读：431
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： mac os13
HBuilderX类型： 正式
HBuilderX版本号： 3.7.9
第三方开发者工具版本号： 当前已是最新版本 （1.06.2303220 darwin-arm64)
基础库版本号： 2.30.4 灰度中
项目创建方式： HBuilderX
操作步骤：
预期结果：
上述代码
上述代码
实际结果：
上述代码
上述代码
bug描述：
进入validateFunction验证的时候，会报 【 "提交的字段["account"]在数据库中并不存在" 】，没使用 云服务器
下面是代码
表单验证
export const validations = {
login: {
// 字段名称
account: {
rules: [{
required: true,
errorMessage: '账号不能为空'
},
{
validateFunction: (rule, value, data, callback) => {
if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value)) {
callback('请输入正确的手机号码')
} else {
callback()
}
}
}
]
},
password: {
rules: [{
required: true,
errorMessage: '密码不能为空'
}]
}
}
}
表单组件
<template>
<view>
<uni-forms ref="form" :modelValue="subForms" :rules="validation[rulesKey]" :label-position="formCig.align">
<uni-forms-item
v-for="item in schemas"
:label="item.label"
:name="item.name"
:required="undefined !== item.required ? item.required : false"
:key="item.name"
>
<!-- 文本框 -->
<view class="form-item" v-if="item.formType == 'input'">
<uni-easyinput v-model="subForms[item.name]" :type="undefined !== item.attrs.type ? item.attrs.type : ''" />
</view>
<!-- 插槽 -->
<view v-if="item.formType == 'slot'"><slot :name="item.slot"></slot></view>
</uni-forms-item>
</uni-forms>
<view class="button-group flex-r flex-ai-fe flex-jc-e" v-if="buttonCig.show">
<view v-if="!buttonCig.slot">
<button :type="buttonCig.subBtnCig.type" :size="buttonCig.subBtnCig.size" @click="submit()">
{{ buttonCig.subBtnName }}
</button>
</view>
<view v-else><slot name="buttonGroup"></slot></view>
</view>
</view>
</template>
<script>
import { validations } from '@/utils/validation/validation.js'
export default {
name: 'froms',
data() {
return {
validation: validations,
subForms: {}
}
},
props: {
rulesKey: {
type: String,
default: ''
},
formCig: {
type: Object,
default: () => {
return {
align: 'left'
}
}
},
formData: {
default: () => {
return {}
},
type: Object
},
schemas: {
default: () => {
return []
},
type: Array
},
buttonCig: {
default: () => {
return {
show: true,
isSlot: false,
subBtnName: '提交',
subBtnCig: {
type: 'primary',
size: 'mini'
}
}
},
type: Object
}
},
created() {
this.subForms = JSON.parse(JSON.stringify(this.formData))
},
mounted() {
this.$refs.form.setRules(this.validation[this.rulesKey])
},
methods: {
submit() {
console.log(this.$refs.form)
this.$refs.form
.validate()
.then(res => {
console.log('表单数据信息：', res)
})
.catch(err => {
console.log('表单错误信息：', err)
})
}
}
}
</script>
<style lang="scss">
.form-item {
display: flex;
align-items: center;
}
</style>
<forms
ref="formRef"
rulesKey="login"
:schemas="schemas"
:formData="formData"
:buttonCig="{ show: false }"
:formCig="{ align: 'top' }"
/>
HZH8997 (作者)
要这样才可以
<template>
<view>
<uni-forms ref="form" :modelValue="subForms" :label-position="formCig.align">
<uni-forms-item
v-for="(item, index) in subForms.dynamicForms"
:label="item.label"
:name="['dynamicForms', index, 'value']"
:required="undefined !== item.required ? item.required : false"
:key="item.name"
:rules="
[
[
{
required: true,
errorMessage: '账号不能为空'
},
{
validateFunction: phoneV
}
],
[
{
required: true,
errorMessage: '密码不能为空'
}
]
][index]
"
>
<!-- 文本框 -->
<view class="form-item" v-if="item.formType == 'input'">
<uni-easyinput
v-model="subForms.dynamicForms[index].value"
:type="undefined !== item.attrs.type ? item.attrs.type : ''"
/>
</view>
<!-- 插槽 -->
<view v-if="item.formType == 'slot'"><slot :name="item.slot"></slot></view>
</uni-forms-item>
</uni-forms>
<view class="button-group flex-r flex-ai-fe flex-jc-e" v-if="buttonCig.show">
<view v-if="!buttonCig.slot">
<button :type="buttonCig.subBtnCig.type" :size="buttonCig.subBtnCig.size" @click="submit()">
{{ buttonCig.subBtnName }}
</button>
</view>
<view v-else><slot name="buttonGroup"></slot></view>
</view>
</view>
</template>
<script>
import { loginValidation } from '@/utils/validation/validation.js'
export default {
name: 'froms',
data() {
return {
subForms: {
dynamicForms: []
},
//Validation
phoneV: (rule, value, data, callback) => {
if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value)) {
callback('请输入正确的手机号码')
} else {
callback()
}
}
}
},
props: {
rulesKey: {
type: String,
default: ''
},
formCig: {
type: Object,
default: () => {
return {
align: 'left'
}
}
},
formData: {
default: () => {
return {}
},
type: Object
},
schemas: {
default: () => {
return []
},
type: Array
},
buttonCig: {
default: () => {
return {
show: true,
isSlot: false,
subBtnName: '提交',
subBtnCig: {
type: 'primary',
size: 'mini'
}
}
},
type: Object
}
},
created() {
this.$set(this.subForms, 'dynamicForms', this.schemas)
},
mounted() {},
methods: {
submit() {
this.$refs.form
.validate()
.then(res => {
console.log('表单数据信息：', res)
})
.catch(err => {
console.log('表单错误信息：', err)
})
}
}
}
</script>
<style lang="scss">
.form-item {
display: flex;
align-items: center;
}
</style>
文档里有说明:
无法通过props传递变量，是因为微信小程序会过滤掉对象中的方法，导致自定义验证规则无效。
把你测试工程里的:rules="login"去掉就可以了，使用动态的setRules
-
HZH8997 (作者)
mounted() {
setTimeout(() => {
this.$refs.form.setRules(this.Validation)
}, 300)
},
v-for的数组是从父组件传下来的，上面这个故意执行一个延时
这种情况直接没有进行验证...
forms.vue 的代码贴下面，可以复制测一下的
2023-04-26 09:20
HZH8997 (作者)
<template>
<view>
<uni-forms ref="form" :modelValue="subForms" :label-position="formCig.align">
<uni-forms-item
v-for="(item, index) in subForms.dynamicForms"
:label="item.label"
:name="['dynamicForms', index, 'value']"
:required="undefined !== item.required ? item.required : false"
:key="item.name"
>
<!-- 文本框 -->
<view class="form-item" v-if="item.formType == 'input'">
<uni-easyinput
v-model="subForms.dynamicForms[index].value"
:type="undefined !== item.attrs.type ? item.attrs.type : ''"
/>
</view>
<!-- 插槽 -->
<view v-if="item.formType == 'slot'"><slot :name="item.slot"></slot></view>
</uni-forms-item>
</uni-forms>
<view class="button-group flex-r flex-ai-fe flex-jc-e" v-if="buttonCig.show">
<view v-if="!buttonCig.slot">
<button :type="buttonCig.subBtnCig.type" :size="buttonCig.subBtnCig.size" @click="submit()">
{{ buttonCig.subBtnName }}
</button>
</view>
<view v-else><slot name="buttonGroup"></slot></view>
</view>
</view>
</template>
<script>
import { loginValidation } from '@/utils/validation/validation.js'
export default {
name: 'froms',
data() {
return {
subForms: {
dynamicForms: []
},
Validation: {
account: [
{
required: true,
errorMessage: '账号不能为空'
},
{
validateFunction: (rule, value, data, callback) => {
if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value)) {
callback('请输入正确的手机号码')
} else {
callback()
}
}
}
],
password: [
{
required: true,
errorMessage: '密码不能为空'
}
]
}
}
},
props: {
rulesKey: {
type: String,
default: ''
},
formCig: {
type: Object,
default: () => {
return {
align: 'left'
}
}
},
formData: {
default: () => {
return {}
},
type: Object
},
schemas: {
default: () => {
return []
},
type: Array
},
buttonCig: {
default: () => {
return {
show: true,
isSlot: false,
subBtnName: '提交',
subBtnCig: {
type: 'primary',
size: 'mini'
}
}
},
type: Object
}
},
created() {
this.$set(this.subForms, 'dynamicForms', this.schemas)
},
mounted() {
setTimeout(() => {
this.$refs.form.setRules(this.Validation)
}, 300)
},
methods: {
submit() {
this.$refs.form
.validate()
.then(res => {
console.log('表单数据信息：', res)
})
.catch(err => {
console.log('表单错误信息：', err)
})
}
}
}
</script>
<style lang="scss">
.form-item {
display: flex;
align-items: center;
}
</style>
HZH8997 (作者)
现在用的是正式版最新的了，完整测试工程是把代码给你们吗？，我复制一份
2023-04-25 13:32
HZH8997 (作者)
下方有源码
2023-04-25 13:44