前端Vue 常用表单rules校验规则小结

邪小新

已于 2023-07-15 16:56:23 修改

阅读量432

点赞数

文章标签：前端 vue.js javascript

于 2023-07-15 15:38:31 首次发布

本文链接：https://blog.csdn.net/qq_42074075/article/details/131740002

版权

前端表单提交中，需要对一些数值进行校验；下面就是总结的一些常用的表单校验规则：


//纯数字校验
function validateNumber(rule, value, callback) {
    let numberReg = /^\d+$|^\d+[.]?\d+$/
    if (value !== '') {
        if (!numberReg.test(value)) {
            callback(new Error('请输入数字'))
        } else {
            callback()
        }
    } else {
        callback(new Error('请输入值'))
    }
}
//最多一位小数校验
function onePoint(rule, value, callback) {
    if (!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value)) {
        callback(new Error('最多一位小数！！！'));
    } else {
        callback();
    }
};
//身份证号码校验
function idCard(rule, value, callback) {
    if (!value) {
        return callback(new Error('身份证不能为空'))
    }
    if (! /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback(new Error('请输入正确的二代身份证号码'))
    } else {
        callback()
    }
}
//两位小数校验
function validateValidity(rule, value, callback) {
    if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
        callback(new Error('最多两位小数！！！'));
    } else {
        callback();
    }
};
//邮箱校验
function validateEMail(rule, value, callback) {
    const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
    if (value == '' || value == undefined || value == null) {
        callback();
    } else {
        if (!reg.test(value)) {
            callback(new Error('请输入正确的邮箱'));
        } else {
            callback();
        }
    }
}
//手机号码校验
function validatePhone(rule, value, callback) {
    const reg = /^[1][3-9][0-9]{9}$/;
    if (value == '' || value == undefined || value == null) {
        callback();
    } else {
        if ((!reg.test(value)) && value != '') {
            callback(new Error('请输入正确的电话号码'));
        } else {
            callback();
        }
    }
}
//固定电话校验

function validateTelphone(rule, value, callback) {
    const reg = /0\d{2,3}-\d{7,8}/;
    if (value == '' || value == undefined || value == null) {
        callback();
    } else {
        if ((!reg.test(value)) && value != '') {
            callback(new Error('请输入正确的固定电话）'));
        } else {
            callback();
        }
    }
}
//手机号码或固定电话校验
function validatePhoneTwo(rule, value, callback) {
    const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
    if (value == '' || value == undefined || value == null) {
        callback();
    } else {
        if ((!reg.test(value)) && value != '') {
            callback(new Error('请输入正确的电话号码或者固话号码'));
        } else {
            callback();
        }
    }
}
//ip地址校验
function validateIP(rule, value, callback) {
    if (value == '' || value == undefined || value == null) {
        callback();
    } else {
        const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
        if ((!reg.test(value)) && value != '') {
            callback(new Error('请输入正确的IP地址'));
        } else {
            callback();
        }
    }
}

export default {
    validateIP, validatePhoneTwo, validateTelphone, validateEMail, validatePhone, validateValidity, idCard, onePoint, validateNumber
}

使用方法为：

import valiRules from '../components/module/validateRules.js';

  rules: {
        eMail: [{ required: true, message: '不能为空', trigger: 'blur' }, { validator: valiRules.validateEMail, trigger: 'blur' }],

      }