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>
