【Vue3+Ts project】vant4 实现触发指定表单 rules校验、setTimeout和 setInterval 区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue3+Ts project】vant4 实现触发指定表单 rules校验、setTimeout和 setInterval 区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.使用vant组件 validate属性实现触发指定输入框rules校验，满足校验通过否则失败

1.给form表单绑定 ref并定义值名称，然后为你想校验的表单绑定 name值

<van-form  ref="form">

<van-field name="mobilenNmber"  v-model="mobile" :rules="[
  { required: true, message: '账号不能为空' },
  { pattern: /^(?:(?:\+|00)86)?1\d{10}$/, message: '请输入11位手机号' }
]"
></van-field>

</van-form>

2.为ref的值名称定义变量名，然后 ref值名称.value.validate('name值名称')，.then接收成功， .catch 接收失败

<script setup lang="ts">
const form = ref()

form.value.validate('mobilenNmber').then((result: any) => {
   
 console.log(result);  //成功后执行

  }).catch((err: any) => {

    console.log(err); //失败后执行

  });
</script>

二. setTimeout和 setInterval 区别

1.执行时间间隔

setinterval: 会按照设定的时间间隔循环执行，一直执行，直到被清除。
setTimeout: 会在设定的时间间隔之后只执行一次

2.循环执行与单次执行

setinterval：函数会按照设定的时间间隔周期性地重复执行，直到被清除。
setTimeout：函数只会执行一次，执行后不会再重复执行。

3.函数触发时机

setinterval：每个时间间隔过后立即触发函数执行。
setTimeout：在设定的时间间隔过后触发函数执行。

4.清除定时任务的方法

setInterval的清除方法是clearInterval，它接受一个参数，即setInterval返回的定时器标识符。调用clearInterval可以停止setInterval循环执行。
setTimeout的清除方法是clearTimeout，它接受一个参数，即setTimeout返回的定时器标识符。调用clearTimeout可以取消尚未执行的setTimeout。