需求如下: 同时校验手机号和邮箱
实现代码:
<template>
<view class="container">
<uni-section title="自定义校验规则" type="line">
<view class="example">
<!-- 自定义表单校验 -->
<uni-forms ref="customForm" :rules="customRules" labelWidth="80px" :modelValue="customFormData">
<uni-forms-item label="用户名" required name="name">
<uni-easyinput v-model="customFormData.name" placeholder="请输入手机号或者邮箱" />
</uni-forms-item>
<uni-forms-item label="年龄" required name="age">
<uni-easyinput v-model="customFormData.age" placeholder="请输入年龄" />
</uni-forms-item>
</uni-forms>
<button type="primary" @click="submit('customForm')">提交</button>
</view>
</uni-section>
</view>
</template>
<script>
export default {
data() {
return {
// 自定义表单数据
customFormData: {
name: '',
age: '',
hobby: []
},
// 自定义表单校验规则
customRules: {
name: {
rules: [
{
required: true,
errorMessage: '用户名不能为空'
},
{
validateFunction: function(rule, value, data, callback) {
if (value.indexOf('.com')>-1||value.indexOf('@')>-1) {
let reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if (!reg.test(value)) {
callback('请输入正确的邮箱')
}
}else{
let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[1457]|19[0-9]|16[0-9])[0-9]{8}$/;
if (!reg.test(value)) {
callback('请输入正确的手机号')
}
}
return true
}
}
]
},
age: {
rules: [{
required: true,
errorMessage: '年龄不能为空'
}]
},
},
}
},
onReady() {
// 设置自定义表单校验规则,必须在节点渲染完毕后执行
this.$refs.customForm.setRules(this.customRules)
},
methods: {
submit(ref) {
console.log(this.baseFormData);
this.$refs[ref].validate().then(res => {
console.log('success', res);
uni.showToast({
title: `校验通过`
})
}).catch(err => {
console.log('err', err);
})
},
}
}
</script>