常见表单输入验证函数-邮箱、手机号、身份证等验证规则

Z小明
345 阅读2分钟

本文介绍了常见的表单输入验证函数，帮助开发者在表单中进行输入数据验证。

1. 邮箱验证 (validateEmail)

用于验证输入是否为有效的邮箱格式。

const validateEmail = (rule, value, callback) => {
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
    if (value === '') {
        callback(new Error('请输入邮箱地址'));
    } else if (!emailPattern.test(value)) {
        callback(new Error('请输入正确格式的邮箱'));
    } else {
        callback();
    }
};

参数说明：

  • value: 用户输入的邮箱地址。
  • callback: 用于返回验证结果，若通过验证，调用 callback()；若失败，调用 callback(new Error('错误信息'))。

2. 手机号验证 (validatePhone)

用于验证输入是否为有效的中国大陆手机号。

const validatePhone = (rule, value, callback) => {
    const phonePattern = /^1[3-9]\d{9}$/;  // 适用于中国大陆手机号
    if (value === '') {
        callback(new Error('请输入手机号'));
    } else if (!phonePattern.test(value)) {
        callback(new Error('请输入正确格式的手机号'));
    } else {
        callback();
    }
};

常见应用场景： 注册、修改手机号时进行验证。

3. 身份证号验证 (validateIdCard)

用于验证输入的身份证号是否符合中国大陆身份证号的格式。

const validateIdCard = (rule, value, callback) => {
    const idCardPattern = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}[Xx\d]$/;
    if (value === '') {
        callback(new Error('请输入身份证号'));
    } else if (!idCardPattern.test(value)) {
        callback(new Error('请输入正确格式的身份证号'));
    } else {
        callback();
    }
};

常见应用场景： 身份验证，涉及中国身份证的输入场合。

4. 正整数验证 (validatePositiveNumber)

用于验证输入是否为大于零的正整数。

const validatePositiveNumber = (rule, value, callback) => {
    const numberPattern = /^[1-9]\d*$/;
    if (value === '') {
        callback(new Error('请输入数字'));
    } else if (!numberPattern.test(value)) {
        callback(new Error('请输入大于0的整数'));
    } else {
        callback();
    }
};

常见应用场景： 订单数量、数量输入框等。

5. 用户名验证 (validateUsername)

用于验证输入的用户名是否符合字母和数字组合、且长度在6到12位之间。

const validateUsername = (rule, value, callback) => {
    const usernamePattern = /^[a-zA-Z0-9]{6,12}$/;
    if (value === '') {
        callback(new Error('请输入用户名'));
    } else if (!usernamePattern.test(value)) {
        callback(new Error('用户名只能包含字母和数字，长度为6到12个字符'));
    } else {
        callback();
    }
};

常见应用场景： 用户注册、登录等。

6. 密码确认验证 (validatePasswordConfirm)

用于验证两次输入的密码是否一致。

const validatePasswordConfirm = (rule, value, callback, password) => {
    if (value === '') {
        callback(new Error('请确认密码'));
    } else if (value !== password) {
        callback(new Error('两次密码输入不一致'));
    } else {
        callback();
    }
};

常见应用场景： 用户注册时，验证密码和确认密码是否一致。

7. 金额验证 (validateAmount)

用于验证金额格式是否正确（大于零的数字，最多两位小数）。

const validateAmount = (rule, value, callback) => {
    const amountPattern = /^\d+(.\d{1,2})?$/;
    if (value === '') {
        callback(new Error('请输入金额'));
    } else if (!amountPattern.test(value)) {
        callback(new Error('请输入正确格式的金额'));
    } else {
        callback();
    }
};

常见应用场景： 购物结算、支付金额输入等。

8. 日期验证 (validateDate)

用于验证输入日期是否符合 YYYY-MM-DD 格式。

const validateDate = (rule, value, callback) => {
    const datePattern = /^\d{4}-\d{2}-\d{2}$/;
    if (value === '') {
        callback(new Error('请输入日期'));
    } else if (!datePattern.test(value)) {
        callback(new Error('请输入正确格式的日期（YYYY-MM-DD）'));
    } else {
        callback();
    }
};

常见应用场景： 日期选择框，特别是事件日期或截止日期。

9. 非空验证 (validateNotEmpty)

用于验证输入是否为空。

const validateNotEmpty = (rule, value, callback) => {
    if (value === '' || value === null || value === undefined) {
        callback(new Error('此项不能为空'));
    } else {
        callback();
    }
};

常见应用场景： 强制输入的字段，如姓名、地址等。

10. URL验证 (validateUrl)

用于验证输入是否为有效的URL地址。

const validateUrl = (rule, value, callback) => {
    const urlPattern = /^(https?|ftp)://[^\s/$.?#].[^\s]*$/i;
    if (value === '') {
        callback(new Error('请输入URL地址'));
    } else if (!urlPattern.test(value)) {
        callback(new Error('请输入正确格式的URL地址'));
    } else {
        callback();
    }
};

常见应用场景： 网站链接、外部资源地址等。

11. 邮政编码验证 (validatePostcode)

用于验证中国大陆的邮政编码格式。

const validatePostcode = (rule, value, callback) => {
    const postcodePattern = /^[1-9]\d{5}$/;
    if (value === '') {
        callback(new Error('请输入邮政编码'));
    } else if (!postcodePattern.test(value)) {
        callback(new Error('请输入正确格式的邮政编码'));
    } else {
        callback();
    }
};

常见应用场景： 地址填写中的邮政编码字段。

12. 信用卡号验证 (validateCreditCard)

用于验证信用卡号的格式。

const validateCreditCard = (rule, value, callback) => {
    const creditCardPattern = /^(\d{4}[- ]{0,1}){3}\d{4}$/;
    if (value === '') {
        callback(new Error('请输入信用卡号'));
    } else if (!creditCardPattern.test(value)) {
        callback(new Error('请输入正确格式的信用卡号'));
    } else {
        callback();
    }
};

常见应用场景： 支付或结账时的信用卡输入。

总结

本文提供了多种常见的输入验证函数，涵盖了邮箱、手机号、身份证、金额等多种场景。所有验证函数遵循 rule, value, callback 的标准格式，易于前端表单验证。根据需要，可以定制正则表达式或验证逻辑，以适应不同的业务需求。

avatar
文章
阅读
粉丝