uni-app跨平台开发小程序表单校验

1.获取表单数据，根据接口需要来定义数据名称并获取数据(以手机号，验证码为例)

<script setup lang="ts">import { ref } from 'vue'// 1. 表单数据const formData = ref({//手机号mobile: '',//验证码code: '',})</script>

 2.定义数据验证规则

为不同的表单数据定义不同的验证规：

• 验证中文姓名正则 ^[\u4e00-\u9fa5]{2,5}$
• 验证身份证 ^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$

<script setup lang="ts">
// 验证表单数据的规则
const rules = {mobile: {rules: [{ required: true, errorMessage: '手机号不能为空' },{ pattern: '^[1][3-9][0-9]{9}$', errorMessage: '手机号格式不正确' }]},code: {rules: [{ required: true, errorMessage: '验证码不能为空' },{ pattern: '^[0-9]{6}$', errorMessage: '请输入6位数字验证码' }]}
}
</script>

 3.调用验证方法

 await form.value.validateField(['mobile'])

validateField：校验部分表单

validate：校验全部表单

<script setup>import { ref } from 'vue'// 表单组件 ref// 省略前面的代码...// 3. 提交表单数据const formRef = ref()async function onFormSubmit() {try {// 根据验证规则验证数据await formRef.value.validate()} catch(error) {console.log(error)}}
</script>

<uni-forms class="" ref="formRef" :rules="rules" :model-value="formData"><button @click="onFormSubmit"> 提交表单数据 </button></uni-forms>