uniapp vue3 ts语法表单实时校验

uniapp vue3 ts语法进行表单校验，要求是输入后失去焦点，进行规则验证

你可以使用 @blur事件当元素失去焦点时触发blur事件

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7659150
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：基于uniapp+vue3+ts的api请求封装，并可自定义拦截器
除此之外, 这篇博客: uniapp vue3 ＜script setup＞用法总结中的部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

1.监听ref

<script setup>

  import {ref,watch} from 'vue';

  const name=ref('');
  const age=ref(10);
  
  //普通监听
  watch(name,(newVal,oldVal=>{
      console.log(newVal,oldVal)
  })

  //初始化监听、深度监听
  	watch(name, (newVal, oldVal) => {
		console.log(newVal, oldVal)
	}, {
		immediate: true,
		deep: true
	})

 //多个值监听
  watch([name, age], (newVal, oldVal) => {
		console.log(newVal, oldVal)
	})

</script>

2.监听reactive

<script setup>

  import {reactive,watch} from 'vue';

 	const query=reactive({
		name:'xiaodong',
		age:10
	})
  
  //监听整个reactive
  watch(query,(newVal,oldVal=>{
      console.log(newVal,oldVal)
  })

 //监听单个属性
 watch(()=>query.name,(newVal,oldVal=>{
      console.log(newVal,oldVal)
  })

//监听多个属性
 watch([()=>query.name,()=>query.age],(newVal,oldVal=>{
      console.log(newVal,oldVal)
  })


</script>

<template>
	<view  @click="onClick">{{title}}</view>
</template>


<script setup>
	const props = defineProps({
		title: {
			type: String,
			default: '',
		},

	})
   
     const emits = defineEmits(['sumbit']);
     const onClick=()=>{
         emits('sumbit');
         emits('sumbit2',{value:props.title})//传值
   }

</script>

1.vue生命周期函数

Vue2              vue3

beforeCreate  => setup()
created       => setup()
beforeMount   => onBeforeMount
mounted       => onMounted
beforeUpdate  => onBeforeUpdate
updated       => onUpdated
beforeDestroy => onBeforeUnmount
destroyed     => onUnmounted
activated     => onActivated
deactivated   => onDeactivated
errorCaptured => onErrorCaptured

<script setup>
  import { onBeforeMount,onMounted,onUpdated} from 'vue';
    
    onBeforeMount(()=>{
          console.log('onBeforeMount')
     }); 

    onMounted(()=>{
          console.log('onMounted')
     });


    onUpdated(()=>{
          console.log('onUpdated')
     });

</script>

2.小程序生命周期

<script setup>
  import { onShow,onReady,onReachBottom,onShareAppMessage} 
  from '@dcloudio/uni-app';//不支持onLoad
   
   onShow(()=>{
     console.log('onShow')
   });
   
   onReady(()=>{
     console.log('onReady')
   });


  //页面触底监听函数
  onReachBottom(()=>{
    console.log('onReachBottom');
  })

  //分享
  onShareAppMessage(()=>{
    console.log('onShareAppMessage');

  })
</script>

1.传值和vue2一样

uni.navigateTo({
			url:"/pages/xx/index?id=1"
		})

2.取值

setup无法导入onLoad,采用vue2 vue3结合写法通过getCurrentInstance()获取组件实例获取

<script>
	export default {
		data() {
			return {
				_id: ''
			}
		},
		onLoad(e) {
			this._id = e.id;
		}
	}
</script>
<script setup>
    import {
		ref,
		getCurrentInstance,
		onBeforeMount,
 	 } from 'vue'
    
    const id=ref('');
    onBeforeMount(()=>{
		id.value=getCurrentInstance().data._id;	
	})
</script>

钩子函数对比

Vue2                       vue3

bind                     created
inserted                 beforeMount
update                   mounted
componentUpdated         beforeUpdate
unbind                   updated
                         beforeUnmount
                         unmounted

1.局部注册

<template>
	<view v-input></view>
</template>

<script setup>

  //命名v开头，v-input
  const vInput={
		created(el,binding){//el绑定元素
			console.log(binding)
		},
		mounted(el,binding){
			console.log(binding)
		},
	    updated(el, binding) {
		    console.log(binding)
		},

	}

</script>

2.全局注册

main.js

import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App);
	app.directive('input', {
            created(el,binding){
			    console.log(binding)
	     	},
			mounted(el, binding) {
				console.log(binding)
			},
			updated(el, binding) {
				console.log(binding)
			},


		})
	return {
		app
	}
}

//父组件

<script setup>
 	import { provide } from 'vue';
    provide('value',1);
</script>



//子组件

<script setup>
 	import { inject } from 'vue';
    const value=inject('value');
</script>

注意：inject()只能放在setup()生命周期里运行，诸如放在setTimeout或promise将获取失败

inject() can only be used inside setup() or functional components.

<script setup>
import { useSlots, useAttrs } from 'vue'

  const slots = useSlots()
  const attrs = useAttrs()
</script>

统一用v-model:xxx

//父组件
<parent v-model:visible="visible"></parent>



//子组件
<child v-show="visible" @click="onClose"></child>

<script setup>
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false,
		}
	})

   
    const emits = defineEmits(['update:visible'])
    const onClose=()=>{
        emits('update:visible', false);
     }
</script>

以下回答由chatgpt基于相关博客总结生成:
根据提供的参考资料和问题，需要在uniapp中使用Vue3和TypeScript语法实现表单实时校验。具体要求是在用户输入后失去焦点时进行表单规则验证。
首先，需要在uniapp项目中安装Vue3和TypeScript的依赖包，并在项目的配置文件中配置Vue3和TypeScript的支持。
1. 首先，打开项目的命令行终端，使用以下命令安装Vue3和TypeScript的依赖包：
```
npm install vue@next vue-router@next @vue/compiler-sfc typescript@latest --save
```
1. 然后，在项目的src目录下创建一个新的文件夹，命名为"components"，用于存放组件文件。
2. 在components文件夹中创建一个名为"FormInput"的组件文件，用于实现表单输入框组件。
3. 在FormInput组件中，使用template语法编写表单输入框的HTML结构，同时使用v-model指令将用户输入的值绑定到组件的数据变量中。
```
<template>
  <input type="text" v-model="value" @blur="handleBlur" />
</template>
```
1. 在FormInput组件的script标签中使用Vue3的语法编写组件逻辑代码。首先，在组件的props选项中定义一个名为"rule"的属性，用于接收表单验证规则。
```
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    rule: {
      type: Object,
      default: () => ({}) // 默认为空对象
    }
  },
  data() {
    return {
      value: ''
    };
  },
  methods: {
    handleBlur() {
      // 在失去焦点时进行表单规则验证
      if (this.rule.required && !this.value) {
        console.log('输入不能为空');
      }
      // 其他校验规则，请根据具体业务需求进行编写
    }
  }
});
</script>
```
1. 在需要使用表单输入框的地方，引入FormInput组件，并将需要的表单规则传递给组件的rule属性。
```
<template>
  <view>
    <form-input :rule="{ required: true }"></form-input>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import FormInput from '@/components/FormInput';

export default defineComponent({
  components: {
    FormInput
  }
});
</script>
```
这样，在用户输入后失去焦点时，表单输入框组件会根据传递的规则进行实时校验。
以上是一个基本的实现方案，根据具体业务需求，还可以进一步完善校验规则、错误提示等功能。具体的表单规则验证逻辑需要根据实际情况进行编写，请根据具体业务需求进行适当的调整。

uniapp vue3 ts语法 表单实时校验

uniapp vue3 ts语法表单实时校验