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>
