自定义验证示例
本页面展示如何使用 Kinlink API 实现各种自定义验证规则,包括基础验证、跨字段验证和异步验证。
基础验证
展示基本的字段验证规则实现,包括格式验证和复杂规则验证。
JavaScript
// 基础验证示例
(function() {
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
const form = kinlink.formApi;
// 手机号验证
form.addFieldValidator('手机号', (value) => {
if (!value) return;
if (!/^1[3-9]\d{9}$/.test(value)) {
return '请输入有效的手机号码';
}
return undefined;
});
// 密码强度验证
form.addFieldValidator('密码', (value) => {
if (!value) return;
if (value.length < 8) {
return '密码长度不能少于8位';
}
if (!/[A-Z]/.test(value)) {
return '密码必须包含大写字母';
}
if (!/[a-z]/.test(value)) {
return '密码必须包含小写字母';
}
if (!/\d/.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 startDate = form.getFieldValue('开始日期');
if (startDate && new Date(value) < new Date(startDate)) {
return '结束日期不能早于开始日期';
}
return undefined;
});
});
// 当日期变化时重新验证另一个日期字段
kinlink.events.on(kinlink.FormEvents.FIELD_CHANGE, (data) => {
const { fieldName } = data;
const form = kinlink.formApi;
if (fieldName === '开始日期') {
form.validateField('结束日期');
} else if (fieldName === '结束日期') {
form.validateField('开始日期');
}
});
})();异步验证
展示如何实现需要调用外部 API 的异步验证规则。
JavaScript
// 异步验证示例
(function() {
// 模拟远程验证
async function checkEmailExists(email) {
try {
const response = await fetch(`/api/check-email?email=${encodeURIComponent(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+([.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
return '请输入有效的邮箱地址';
}
try {
// 显示加载状态
form.showMessage('info', '正在验证邮箱...');
// 检查邮箱是否已存在
const exists = await checkEmailExists(value);
if (exists) {
return '该邮箱已被使用';
}
form.showMessage('success', '邮箱可用');
return undefined;
} catch (error) {
return '验证失败,请稍后重试';
}
});
});
})();验证类型
- 格式验证
- 跨字段验证
- 异步验证
- 复杂规则验证
实现技巧
- 合理使用正则表达式
- 处理异步操作超时
- 提供友好的错误提示
- 优化验证性能
注意事项
- 验证规则应该考虑空值情况
- 异步验证需要处理网络错误
- 避免过于复杂的验证逻辑
- 注意验证规则的性能影响