HTML表单验证库SMValidator(form表单验证)

yumo66610个月前 (04-30)技术文章102

SMValidator是一个易用、轻量且强大的表单验证工具。支持html和javascript两种配置方式,可以立即或手动触发验证,独立显示每条规则的信息,可自定义表单或信息容器的样式。目前minify文件还不到5KB,而且不依赖任何第三方库。

使用方法:

1. 给input指定验证规则

<!--使用data-rule属性指定验证规则-->
<input type="text" data-rule="required">

或者使用js配置

//fields字段与input的name对应,指定这个input的验证规则
//<input type="text" name="field1">
new SMValidator('form', {
    fields:{
        field1: 'required'
    }
});

2. 绑定需要验证的表单

selector是css选择器,内部使用document.querySelectorAll解析,你可以使用浏览器支持的任何css选择器规则。SMValidator从选择结果中筛选出指定的input进行绑定,并在适当的时机较验其value是否符合要求。

其他详细的功能请到移步到github上查看文档和demo源码,可以实现很多自定义效果

相关文章

172号卡分销系统推荐人手机号操作步骤_号卡分销平台登录_

内容最后可以获取一级名额172号卡分销系统推荐人手机号操作步骤详解172号卡分销系统是一款高效便捷的分销管理工具。本文将详细介绍如何在该系统中操作推荐人的手机号,为您的分销业务提供精准的指导。无论您是...

前端入门——html 表单(炫酷的前端表单和表格)

前言前面已经学习相关html大部分知识,基本上可以制作出简单的页面,但是这些页面都是静态的,一个网站如果要实现用户的互动交流,这时表单就起到关键的作用,表单的用途很多,它主要用来收集用户的相关信息,是...

AI驱动的表单自动填写(ai表格插件)

我们都同意,填写表格是一项枯燥且耗时的任务。如果我们可以创建一个可以为我们填写表格的 AI 助手,让我们将时间投入到更有建设性的任务中,那会怎样?AI 助手将能够通过调用以表单字段为参数的函数来填写表...

阿里开源可跨组件体系的表单配置生成方案,淘宝、天猫都在使用

FormRender通过 JSON Schema 生成标准 Form,常用于自定义搭建配置界面生成如上图,使用 shema 编辑器可实现低上手成本、快速搭建支持 Ant Design 和 Fusion...

HTML的表单(HTML的表单中保存分类标签tag)

表单标签的作用<form>标签及其属性<from></form>标签对用来创建一个表单,即定义表单的开始和结束位置,<form>标签具有下面等属性。ac...

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

为什么学习网页制作?互联网时代的今天,各种各样的网页充斥着我们的生活。只要使用浏览器,打开的每一个页面都可以称之为网页。即使使用头条这样的APP,其内容布局、展示的方法也脱胎于网页页面设计的方法与原则...