tmui-cli 5.3.1 → 5.3.3

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//350/241/250/345/215/225 xForm.md"

@@ -3,6 +3,7 @@
 ## 介绍
 
 从1.1.2开始允许xform可以嵌套view进行form-item布局了,但建议不要嵌套太深,影响性能.
+嵌套对象字段支持 / 和 . 两种写法，如 user/id、user.id，两者等价，rules 的 key 同样适用。
 
 ## 平台兼容
 
@@ -34,7 +35,7 @@
 | labelFontSize | `标签文本大小`<br>`不支持动态修改（uniappx 3.99不支持动态传递 inject）,可在子组件上动态修改`<br> | `string` | `"16"` |
 | showLabel | `是否显示标题,不支持动态修改（uniappx 3.99不支持动态传递 inject）,可在子组件上动态修改`<br> | `boolean` | `true` |
 | errorAlign | `错误标签的对齐方式,left,center,right`<br> | `errorAlignType` | `'left'` |
-| rules | `rules这里提供和与formItem上提供的不冲突都可以校验`<br>`如果两个名称相同会被校验两次。如果两有一边提供也会校验一次。`<br> | `Map` | `():Map<string,FORM_RULE[]> => new Map<string,FORM_RULE[]>()` |
+| rules | `字段规则集合，推荐对象：{ username: [{ type: 'string' }] }。`<br>`与 formItem 上的 rule 不冲突，两边都有时同名字段会校验两次，只提供一边则校验一次。`<br>`仍兼容旧的 Map<string, FORM_RULE[]>。`<br> | `union` | `():FORM_RULES => ({} as FORM_RULES)` |
 | watchValidStatus | `是否开启实时全部字段校验获取当前实时的校验状态，`<br>`通过vmodel:valid对外输出当前实时的校验值，当字段值改变时会一直监测并监听所有字段并返回结果到对外`<br>`如果你没有这个需求场景，请保持关闭状态，如果你确实外部需要实时改变并观察提交按钮状态可以打开，请在字段少的场景使用。`<br> | `boolean` | `false` |
 | modelValid | `当前的校验状态，请不要外部改变此值，此值只对外输出当前校验状态`<br>`需要设置watchValidStatus为true才会实时监听并检测状态。请通过v-model:valid来得到状态值`<br> | `boolean` | `false` |
 
@@ -60,8 +61,10 @@
 | ------ | ---- | ---- | ---- |
 | id | - | `-` | - |
 | checkAsyncVaildStatus | - | `-` | 用来首次同步检测：modelValid,一定要在onready生命期中执行，并且你赋值完表数据后再来个,nextTick中执行本方法，可以确保不会有遗漏。 |
-| valid | `keys: string[]` <br>  - `待校验的字段` <br>  | `-` | 手动执行触发校验函数，如果提供空数组，表示校验所有，如果提供了指定值，则表示只校验提供的字段。 |
+| valid | - | `-` | 手动校验。空数组校验全部已注册字段，model 里没有的键按空值处理。<br>options 不传时显示错误并触发 submit。静默校验传 showError / emitSubmit。 |
 | clearValid | - | `-` | 清除校验状态并回到初始状态。 |
+| setFieldError | - | `-` | 把服务端错误写到对应字段上，不重新跑本地规则。 |
+| clearFieldError | - | `-` | 清除一个字段的错误。key 为空时清除全部。 |
 | submit | - | `-` | - |
 
 
@@ -75,7 +78,7 @@
 
 ```vue
 <template>
-		<!-- #ifdef MP-WEIXIN -->
+		<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 		<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 			<navigation-bar :background-color="xThemeConfigNavBgColor"
 				:front-color="xThemeConfigNavFontColor"></navigation-bar>
@@ -84,8 +87,6 @@
 		<x-sheet>
 			<x-text font-size="18" class=" text-weight-b mb-8">表单 xForm</x-text>
 			<x-text color="#999999">与官方不同的是，它只为数据进行验证，因此不仅仅局限表单组件。而是任意数据进行的验证收集，比官方更灵活，与web组件对齐的校验。</x-text>
-			<x-text color="#999999">为了体验提供了属性：默认如果有字段校验不过，会把页面滚动到当前出错 的位置。</x-text>
-			<x-text color="#999999">1.1.17开始支持嵌套对象字段，key必须/分割如'user/id'</x-text>
 		</x-sheet>
 
 		<x-sheet>
@@ -96,7 +97,7 @@
 					<x-input cursor-color="red" color='transparent' v-model="(reqData.username as string)"
 						align="right"></x-input>
 				</x-form-item>
-				<x-form-item field="testChildrenForm/text" label="嵌套字段" :required="true">
+				<x-form-item field="testChildrenForm.text" label="嵌套字段" :required="true">
 					<x-input cursor-color="red" color='transparent' v-model="(reqData.testChildrenForm.text as string)"
 						align="right"></x-input>
 				</x-form-item>
@@ -118,7 +119,7 @@
 				</x-form-item>
 				<x-form-item label="上传图片" field="upload" :required="true" contentStyle="display:flex;flex-direction:row;justify-content:flex-end">
 					<x-upload-media :max-count="3" align="right" v-model="(reqData.upload as XUPLOADFILE_FILE_VALUE[])" :column="3"
-						style="width: 200px;" img-height="70px"></x-upload-media>
+						style="width: 200px;"></x-upload-media>
 				</x-form-item>
 
 				<x-form-item field="radio" label="选择性别" :required="true">
@@ -143,10 +144,10 @@
 		</x-sheet>
 		<x-sheet>
 			<x-text font-size="18" class=" text-weight-b mb-8">ref方法对上述表单验证</x-text>
-			<view class="flex flex-row ">
-				<x-button class="flex-1 mr-n6" @click="submitByClick">ref验证</x-button>
-				<x-button class="flex-1 mr-n6" @click="clearValid">清除验证</x-button>
-				<x-button class="flex-1" @click="submitref">只验证用户名</x-button>
+			<view class="flex flex-row flex-row-center-between">
+				<x-button style="width: calc(33.33% - 3px);" @click="submitByClick">ref验证</x-button>
+				<x-button style="width: calc(33.33% - 3px);"  @click="clearValid">清除验证</x-button>
+				<x-button style="width: calc(33.33% - 3px);"  @click="submitref">仅用户名</x-button>
 			</view>
 		</x-sheet>
 
@@ -157,12 +158,12 @@
 		<x-sheet>
 			<x-form v-model:modelValid="(isPass as boolean)" :watchValidStatus="true" @submit="(submit as resultTtype)" v-model="(logindata as LOGIN_TYPE)"
 				:label-direction="('vertical' as labelDirType)">
-				<x-form-item :cell-padding="['0','0']" :showBottomBorder="false" :rule="rules.get('username')!" field="user"
+				<x-form-item :cell-padding="['0','0']" :showBottomBorder="false" :rule="rules.username" field="user"
 					label="用户帐号" :required="true">
 					<x-input darkBgColor="" left-icon="account-pin-circle-fill" placeholder="请输入你的帐号"
 						v-model="(logindata.user as string)"></x-input>
 				</x-form-item>
-				<x-form-item :cell-padding="['0','0']" :showBottomBorder="false" :rule="rules.get('password')!" field="pass"
+				<x-form-item :cell-padding="['0','0']" :showBottomBorder="false" :rule="rules.password" field="pass"
 					label="登录密码" :required="true">
 					<x-input darkBgColor="" :password="true" left-icon="lock-password-fill" placeholder="请输入8位密码"
 						v-model="(logindata.pass as string)"></x-input>
@@ -171,15 +172,53 @@
 			</x-form>
 		</x-sheet>
 
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">JSON 规则</x-text>
+			<x-text color="#999999">邮箱选填，空值通过，有值才校验格式。编码、城市、确认密码只写数据规则，不写函数。动态字段卸掉后不再参与校验。</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-form ref="dslForm" :rules="dslRules" v-model="(dslData as DSL_TYPE)" @submit="(onDslSubmit as resultTtype)">
+				<x-form-item field="email" label="邮箱(选填)" :required="false">
+					<x-input color="transparent" align="right" placeholder="可空" v-model="(dslData.email as string)"></x-input>
+				</x-form-item>
+				<x-form-item field="code" label="编码" :required="true">
+					<x-input color="transparent" align="right" placeholder="字母或数字" v-model="(dslData.code as string)"></x-input>
+				</x-form-item>
+				<x-form-item field="city" label="城市" :required="true">
+					<x-input color="transparent" align="right" placeholder="北京/上海/深圳" v-model="(dslData.city as string)"></x-input>
+				</x-form-item>
+				<x-form-item field="password" label="密码" :required="true">
+					<x-input color="transparent" :password="true" align="right" v-model="(dslData.password as string)"></x-input>
+				</x-form-item>
+				<x-form-item field="confirm" label="确认密码" :required="true">
+					<x-input color="transparent" :password="true" align="right" v-model="(dslData.confirm as string)"></x-input>
+				</x-form-item>
+				<x-form-item v-if="showExtra" field="extra" label="动态字段" :required="true">
+					<x-input color="transparent" align="right" v-model="(dslData.extra as string)"></x-input>
+				</x-form-item>
+				<view class="flex flex-row flex-row-center-between mt-32">
+					<x-button style="width: calc(50% - 6px);" @click="toggleExtra">动态字段</x-button>
+					<x-button style="width: calc(50% - 6px);" @click="silentValid">静默校验</x-button>
+				</view>
+				<view class="flex flex-row flex-row-center-between mt-12">
+					<x-button style="width: calc(50% - 6px);" @click="markServer">服务端错误</x-button>
+					<x-button style="width: calc(50% - 6px);" @click="clearServer">清除错误</x-button>
+				</view>
+				<x-button form-type="form" class="mt-12" :block="true">提交 JSON 规则</x-button>
+			</x-form>
+		</x-sheet>
+
 		<view style="height: 550px;"></view>
 
 </template>
 
 <script lang="ts" setup>
 	import { ref } from "vue"
-	import type { FORM_RULE,FORM_SUBMIT_RESULT, XUPLOADFILE_FILE_VALUE } from "@/uni_modules/tmx-ui"
+	import type { FORM_RULE, FORM_SUBMIT_RESULT, FORM_VALID_OPTIONS, XUPLOADFILE_FILE_VALUE } from "@/uni_modules/tmx-ui"
 	// @ts-ignore
 	const form = ref<XFormComponentPublicInstance | null>(null)
+	// @ts-ignore
+	const dslForm = ref<XFormComponentPublicInstance | null>(null)
 	type resultTtype = (evt : FORM_SUBMIT_RESULT) => void;
 	type labelDirType = 'vertical' | 'horizontal'
 	type USER_TYPE_CHILDRENFORM = {
@@ -203,8 +242,17 @@
 	}
 	const isPass = ref(false)
 	// RULES可以集中管理，也可以单位分开管理。到form-item rule上或者form中的rules上
-	let rules = new Map<string, FORM_RULE[]>([
-		["username", [
+	type DEMO_FORM_RULES = {
+		username : FORM_RULE[],
+		"testChildrenForm.text" : FORM_RULE[],
+		password : FORM_RULE[],
+		title : FORM_RULE[],
+		price : FORM_RULE[],
+		num : FORM_RULE[],
+		upload : FORM_RULE[],
+	}
+	const rules : DEMO_FORM_RULES = {
+		username: [
 			{
 				type: "string",
 				errorMessage: "姓名填写不正确，不能空，且要小于4个字符",
@@ -214,8 +262,8 @@
 					return pval.length > 0 && pval.length <= 4
 				}
 			}
-		]],
-		["testChildrenForm/text", [
+		],
+		"testChildrenForm.text": [
 			{
 				type: "string",
 				errorMessage: "嵌套字段不能空，且要小于4个字符",
@@ -225,8 +273,8 @@
 					return pval.length > 0 && pval.length <= 4
 				}
 			}
-		]],
-		["password", [
+		],
+		password: [
 			{
 				type: "number",
 				errorMessage: "请输入8位密码",
@@ -235,8 +283,8 @@
 					return pval.length == 8
 				}
 			}
-		]],
-		["title",[
+		],
+		title: [
 			{
 				type: "string",
 				errorMessage: "产品标题不空，且大于5个字符小于12个字符",
@@ -245,31 +293,31 @@
 					return pval.length > 5 && pval.length <= 12
 				}
 			}
-		]],
-		["price",[
+		],
+		price: [
 			{
 				type: "number",
 				errorMessage: "价格不能小于30元",
 				min: 30
 			}
-		]],
-		["num",[
+		],
+		num: [
 			{
 				type: "number",
 				errorMessage: "商品库存在2-200之间",
 				min: 2,
 				max: 100
 			}
-		]],
-		["upload",[
+		],
+		upload: [
 			{
 				type: "array",
 				errorMessage: "请最少选择1张图片最多3张",
 				min: 1,
 				max: 3
-			} as FORM_RULE
-		]]
-	])
+			}
+		]
+	}
 
 	const reqData = ref<USER_TYPE>({
 		username: "",
@@ -315,6 +363,102 @@
 	const clearValid = () => {
 		form.value!.clearValid()
 	}
+
+	const showExtra = ref(false)
+	type DSL_TYPE = {
+		email : string,
+		code : string,
+		city : string,
+		password : string,
+		confirm : string,
+		extra : string
+	}
+	type DSL_RULES = {
+		email : FORM_RULE[],
+		code : FORM_RULE[],
+		city : FORM_RULE[],
+		password : FORM_RULE[],
+		confirm : FORM_RULE[],
+		extra : FORM_RULE[]
+	}
+	const dslData = ref<DSL_TYPE>({
+		email: "",
+		code: "",
+		city: "",
+		password: "",
+		confirm: "",
+		extra: ""
+	})
+	const dslRules : DSL_RULES = {
+		email: [
+			{
+				type: "email",
+				errorMessage: "邮箱格式不正确"
+			}
+		],
+		code: [
+			{
+				required: true,
+				errorMessage: "请填写编码"
+			},
+			{
+				pattern: "^[A-Za-z0-9]+$",
+				errorMessage: "编码只能是字母或数字"
+			}
+		],
+		city: [
+			{
+				required: true,
+				oneOf: ["北京", "上海", "深圳"] as string[],
+				errorMessage: "城市只能是北京、上海、深圳"
+			}
+		],
+		password: [
+			{
+				type: "string",
+				min: 6,
+				max: 16,
+				errorMessage: "密码需要 6-16 位"
+			}
+		],
+		confirm: [
+			{
+				required: true,
+				errorMessage: "请再次输入密码"
+			},
+			{
+				validator: "equalTo",
+				validatorArgs: "password",
+				errorMessage: "两次密码不一致"
+			}
+		],
+		extra: [
+			{
+				type: "string",
+				min: 1,
+				errorMessage: "请填写动态字段"
+			}
+		]
+	}
+	const onDslSubmit = (evt : FORM_SUBMIT_RESULT) => {
+		uni.showToast({ title: evt.valid ? "通过" : evt.errorMessage, icon: "none" })
+	}
+	const toggleExtra = () => {
+		showExtra.value = !showExtra.value
+	}
+	const silentValid = () => {
+		let result = dslForm.value!.valid([] as string[], {
+			showError: true,
+			emitSubmit: false
+		} as FORM_VALID_OPTIONS) as FORM_SUBMIT_RESULT
+		uni.showToast({ title: result.valid ? "静默校验通过" : result.errorMessage, icon: "none" })
+	}
+	const markServer = () => {
+		dslForm.value!.setFieldError("code", "服务端：编码已存在")
+	}
+	const clearServer = () => {
+		dslForm.value!.clearFieldError("code")
+	}
 	
 </script>