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

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

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

相关文章

HTML+JS 实现手机号码归属地查询功能

手机号码归属地 API 是一种提供号码归属地信息的接口,它通过与运营商和电信数据库交互,根据手机号码查询相关归属地信息并返回结果。通过使用手机号码归属地API,开发者可以轻松地集成号码归属地查询功能到...

如何使用java.net.URLConnection发起和处理HTTP请求

技术背景在Java开发中,经常需要与网络进行交互,发送HTTP请求并处理响应。java.net.URLConnection 是Java提供的一个用于处理URL连接的抽象类,通过它可以方便地发起和处理H...

快速了解JavaScript的表单操作(js实现表单)

前言在 HTML 中使用 <form> 表单元素在 JavaScript 中对应的是 HTMLFormElement 类型,而HTMLFormElement继承了HTMLElement接口...

HTML 标签(html标签属性大全)

提示:点击上方"蓝色字体"↑ 可以订阅噢!摘要 51RGB官方微信掌握基础知识,成就未来大神梦想……定义和用法<label> 标签为 input 元素定义标注(标记)。label 元素不会...

HTML DOM Keygen 对象(js dom对象)

Keygen 对象 Keygen 对象代表着HTML form表单的 keygen 字段。该对象提供了一个安全的方式来验证用户。当提交表单时,私钥存储在本地,公钥发送到服务器。在 HTML 文档中...

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

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