Vue.js 类型(数字、整数、小数、负数、手机号、座机号等)校验规则

原创已于 2022-10-12 16:42:00 修改 · 1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #validator #positive #telephone #function

于 2019-01-10 09:41:07 首次发布

Front-end 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在Vue.js中实现表单验证的方法，通过定义原型方法validator，支持多种类型的数据验证，如数字、整数、浮点数、正数、手机号、座机号等。这有助于开发者快速构建具有数据完整性和一致性的Web应用。

创建.js文件：

Vue.prototype.validator = function (type) {
    switch (type) {
        case 'number':
            return /^(\-|\+)?\d+(\.\d+)?$/;///^[0-9]*$/;
        case 'integer':
            return /^\d*$/;
        case 'float':
            return /^[+-]?((0|([1-9]\d*))\.\d+)?$/;
        case 'positive':
            return /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;    
        case 'mobile': // 手机号
            return /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
        case 'phone': // 座机号
            return /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
        case 'telephone': // 手机号或座机号
            return /(^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$)|(^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)/;
    }
}