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

yumo6668个月前 (04-30)技术文章78

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源码,可以实现很多自定义效果

相关文章

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

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

【20201119】登录页面模板的制作(登录页面怎么写)

介绍介绍前面我们以及学会了Bootstrap框架和jQuery库的基本使用方法,并且已经把这两个软件包整合到了我们的TFPHP框架里面,接下来我们就可以使用它们去制作用户管理系统的视图模板了。用户管理...

HTML表单number和range高级元素的使用

number类型元素number属性提供了一个输入数字的输入类型,用户可以直接输入数字,或者通过单击微调框中的向上或者向下按钮选择数字。 代码格式如下。<input type="numb...

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

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

关于编码的那些事 - URL 编码(url编码规则)

作者:redmed背景Web 项目中经常会遇到处理 URL 中 Query 的情况,来看下下面问题你有疑惑吗?项目中发现会用到 qs、query-string、URLSearchParams、甚至 q...

表格技术七十二变丨手把手教你用Canvas电子表格做电子签名

日常生活工作学习中,大家对电子表格必定不陌生。从工作数据汇总分析到出门收据各种电子发票,这些都是由电子表格制作出来的。不过大家对电子表格的印象可能停留在这里:标准行列数据统计的表格样式。但其实,表格也...