使用JS手写一个类似 Laravel 验证器的表单验证器

 更新时间:2023年06月28日 09:57:39   作者:church  
这篇文章主要为大家介绍了使用JS手写一个类似 Laravel 验证器的表单验证器实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

介绍

Laravel 的表单验证很方便,想在前端也用这样的方式进行验证。

git 地址,欢迎star

期待这个表单验证库有这样的功能。

let validator = new Validation(this.registerForm, {
    telephone: "required|telephone",
    captcha: "required|length:5",
}, {
    telephone: {
        required: "手机号不能为空",
        telephone: "手机号格式不正确",
    },
    captcha: "验证码不正确"
})
try {
    validator.validate()
} catch(e) {
    uni.showToast({
        icon: 'error',
        title: e.message
    })
}

构造函数的第三个参数 messages 可以不要,默认是英文提示。而且该参数支持不同粒度的错误信息,如果传对象,则如果对应的规则校验不通过,就使用对应的错误信息;如果传字符串,则不论什么规则未通过,都使用该错误信息。

内置一些规则,如果不够用,还可以自己扩展。

根据以上的需求,就有了这个库 @church1117/form-validation

安装

npm install @church1117/form-validation

使用

import Validation from "@church1117/form-validation"
let data = {
        name: "church",
        mobile: "18565919379",
        age: 19,
        gender: '2',
        password: "123456",
        captcha: "12345",
        idcard: '42052919910727452X',
        email: "xxx@qq.com",
        test: "ttt",
        birthday: '1993/11/17',
    }
let rules = {
        name: "required|between:6,255",
        mobile: "required|telephone",
        age: "numeric|between:8,60",
        gender: "numeric|range:" + gender.join(','),
        password: "required|min:6|password",
        captcha: "required|length:5",
        idcard: "required|idcard",
        email: "email",
        // test: "required|testRule"
        birthday: "datetime"
    }
let messages = {
        name: {
            required: "名字不能为空",
            between: "名称长度必须在6~255之间",
        },
        mobile: "不正确的手机格式",
        age: {
            numeric: "年龄不是一个有效的数值",
            between: "年龄必须在18-60岁之间"
        },
        password: {
            required: "密码不能为空",
            min: "密码长度不能小于6位",
            regex: "密码只能由数字、大小写字母构成",
        },
        captcha: "验证码不正确",
        idcard: {
            required: "身份证不能为空",
            idcard: "身份证格式不正确",
        },
        test: {
            required: "测试字段不能为空",
            testRule: "该字段的值必须为test"
        }
    }
let validation = new Validation(data, rules, messages);
  • messages 可以定义不同粒度的错误信息,如果是字符串,那么该字段的所有验证规则都使用该错误信息。如果是对象,就只使用对应规则的错误信息。

内置规则

  • required
  • telephone
  • min
  • max
  • between
  • idcard
  • range
  • password
  • numeric
  • length
  • email
  • datetime

自定义规则

匿名函数参数(value, field, ...params)

  • value
  • field
  • ...params
Validation.register('testRule', function(value, field) {
    if (typeof value != 'undefined' && value != 'test') {
        throw new Error(`${field} must equal test`)
    }
});

测试

npm test

以上就是使用JS手写一个类似 Laravel 验证器的表单验证器的详细内容,更多关于JS Laravel表单验证器的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript新特性ECMAScript 2024(ES2024)核心功能的完整指南

    JavaScript新特性ECMAScript 2024(ES2024)核心功能的完整指南

    JavaScript 作为 Web 开发的核心语言,每年都在不断演进,ECMAScript 2024(ES15)为开发者带来了一系列实用的新特性,本文将深入解析 ES2024 的核心新功能,并通过实际示例帮助你快速上手
    2025-11-11
  • javascript中checkbox使用方法实例演示

    javascript中checkbox使用方法实例演示

    这篇文章通过简单的实例演示了javascript中checkbox使用方法,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 使用focus方法让光标默认停留在INPUT框

    使用focus方法让光标默认停留在INPUT框

    让光标默认停留在INPUT框中,用focus方法可以实现,下面有个示例代码,需要的朋友可以参考下
    2014-07-07
  • javascript包装对象实例分析

    javascript包装对象实例分析

    这篇文章主要介绍了javascript包装对象,实例分析分析了javascript对象操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 前端开发中常见的数据结构优化问题与解决

    前端开发中常见的数据结构优化问题与解决

    在实际前端开发中,后端返回的数据结构往往不能直接满足前端展示或业务逻辑的需求,需要进行各种优化处理,下面我们来看看常见的几个优化问题及解决方案吧
    2025-04-04
  • layui框架中layer父子页面交互的方法分析

    layui框架中layer父子页面交互的方法分析

    这篇文章主要介绍了layui框架中layer父子页面交互的方法,结合实例形式分析了layer父子页面交互的常用技巧以及layer弹出多个iframe找到父页面的操作方法,需要的朋友可以参考下
    2017-11-11
  • 性能优化篇之Webpack构建速度优化的建议

    性能优化篇之Webpack构建速度优化的建议

    这篇文章主要介绍了性能优化篇之Webpack构建速度优化的建议,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • javascript简化代码 A=alert w=document.writeln

    javascript简化代码 A=alert w=document.writeln

    建议不要这样写代码,考虑以后的修改才是最重要的,代码分层.多把一个功能写成一个js代码或一个类,然后提供接口,这种写法代码会更多,速度也更慢,但人人都推荐这样写,是因为这样子维护方便.而程序不可能一次性写得完美的,永远都可以改进
    2008-02-02
  • JavaScript中三个等号和两个等号的区别(== 和 ===)浅析

    JavaScript中三个等号和两个等号的区别(== 和 ===)浅析

    javascript中比较运算符'=='与'==='可能大家用的比较多,但是大家对他的区别不是很清楚,接下来小编给大家介绍下js中三个等号和两个等号的区别(== 和 ===),感兴趣的朋友可以参考下
    2016-09-09
  • js Clip的奇思妙想之文字拼接效果

    js Clip的奇思妙想之文字拼接效果

    CSS的确是很强大,很奇妙。很多爱好者时常可以用CSS做出一些让人意想不到的效果,比如用CSS做的灯笼、用CSS画的房子!然而这些东西酷归酷,说到底还只是一些不实用的东西。过滤之,过滤之……
    2008-11-11

最新评论