字段验证
本指南介绍如何在 Kinlink 中实现字段验证,包括基础验证、复杂验证规则和异步验证。
基础验证
了解如何添加基本的字段验证规则,如格式验证、必填验证等。
JavaScript
// 基础验证示例
(function() {
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
const form = kinlink.formApi;
// 添加邮箱验证
form.addFieldValidator('邮箱', (value) => {
if (!value) return;
if (!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
return '请输入有效的邮箱地址';
}
return undefined; // 验证通过
});
// 添加手机号验证
form.addFieldValidator('手机号', (value) => {
if (!value) return;
if (!/^1[3-9]\d{9}$/.test(value)) {
return '请输入有效的手机号码';
}
return undefined;
});
});
})();复杂验证
学习如何实现更复杂的验证逻辑,如字段间的关联验证、条件验证等。
JavaScript
// 复杂验证示例
(function() {
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
const form = kinlink.formApi;
// 日期范围验证
form.addFieldValidator('开始日期', (value) => {
if (!value) return;
const endDate = form.getFieldValue('结束日期');
if (endDate && new Date(value) > new Date(endDate)) {
return '开始日期不能晚于结束日期';
}
return undefined;
});
// 金额验证
form.addFieldValidator('申请金额', (value) => {
if (!value) return;
const amount = parseFloat(value);
if (isNaN(amount) || amount <= 0) {
return '请输入有效的金额';
}
if (amount > 100000) {
return '单次申请金额不能超过100000';
}
return undefined;
});
});
// 监听字段变化重新触发验证
kinlink.events.on(kinlink.FormEvents.FIELD_CHANGE, (data) => {
const { fieldName } = data;
const form = kinlink.formApi;
if (fieldName === '结束日期') {
form.validateField('开始日期');
}
});
})();异步验证
了解如何实现需要调用外部 API 的异步验证逻辑。
JavaScript
// 异步验证示例
(function() {
// 模拟API调用
async function checkUserExists(email) {
try {
const response = await fetch(`/api/check-user?email=${email}`);
const data = await response.json();
return data.exists;
} catch (error) {
console.error('验证出错:', error);
return false;
}
}
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
const form = kinlink.formApi;
// 添加异步邮箱验证
form.addFieldValidator('用户邮箱', async (value) => {
if (!value) return;
// 基础格式验证
if (!/^\w+@\w+\.\w+$/.test(value)) {
return '请输入有效的邮箱地址';
}
// 检查邮箱是否已存在
const exists = await checkUserExists(value);
if (exists) {
return '该邮箱已被使用';
}
return undefined;
});
});
})();验证类型
- 格式验证
- 范围验证
- 关联字段验证
- 异步验证
最佳实践
- 合理使用错误提示
- 处理异步验证超时
- 避免过于复杂的验证逻辑
- 注意验证性能
提示
- 验证函数返回 undefined 表示验证通过
- 返回字符串表示验证失败,字符串内容会显示为错误提示
- 异步验证应该考虑添加加载状态提示
- 验证错误会自动显示在字段下方