Nice validator领先的表单验证解决方案 转
Nice validator是一个简单智能的Web表单验证插件,可以验证现有的所有格式,比如邮箱地址、电话号码等,您还可以自定义规则验证,插件基于jQuery库,支持多种语言配置。
安装
1、您可以访问Nice validator的Github地址,下载Nice validator的源代码解压到你的项目中,然后通过下面的代码引入Nice validator文件。
local 参数用来加载对应的配置文件。如果不传 local 参数,配置以及样式就需要自行引入
<script src="nice-validator/jquery.validator.js?local=zh-CN"></script>
2、也通过 RequireJS 或者 Sea.js 模块系统安装
nice-validator 在 bower 和 npm 注册了 package,你可以通过以下命令安装 nice-validator 的最新版本。
通过 bower
$ bower install nice-validator
通过 npm
$ npm install nice-validator
注意:只能配置 nice-validator 为 local 下对应配置文件路径。
// requirejs 配置
requirejs.config({
paths: {
validator: 'path/to/nice-validator/local/en'
}
});
// seajs 配置
seajs.config({
alias: {
validator: 'path/to/nice-validator/local/zh-CN'
}
});
初始化验证
nice-validator 支持 JS 和 DOM 两种方式初始化验证,你可以根据自己的场景选择
(1)、DOM 绑定规则,无需 JS 代码
<form id="form1" action="register.php">
<label>Email</label>
<input type="email" name="email" data-rule="required;email">
<label>Password</label>
<input type="password" name="pwd" data-rule="required;length(6~16)">
</form>
(2)、JS 配置规则,无侵入 DOM
调用插件方法 .validator(),并使用 fileds 参数
<form id="form1" action="register.php">
<label>Email</label>
<input type="email" name="email">
<label>Password</label>
<input type="password" name="pwd">
</form>
// 初始化验证
$('#form1').validator({
fields: {
'email': 'required;email',
'pwd': 'required;length(6~16)'
}
});
当然,DOM 和 JS 两种方式也支持同时使用,你也可以通过 DOM 绑定规则,然后使用 js 初始化。
提交表单
nice-validator 一旦初始化就会阻止表单被提交,直到表单规则全部验证通过。
如果传递了
valid
参数回调或者valid.form
事件,表单即使验证通过也不会被提交,而是由valid
参数和valid.form
事件接管。然后你需要自己决定如何提交表单。
可以通过以下三种方式提交表单:
示例:点击提交按钮,表单验证通过后自动原生方式提交
<form id="form1" action="register.php">
<label>Email</label>
<input type="email" name="email" data-rule="required;email">
<label>Password</label>
<input type="password" name="pwd" data-rule="required;length(6~16)">
<button type="submit">提交</button>
</form>
示例:使用 valid 参数,并且使用原生 form 提交
$('#form1').validator({
fields: {
'email': 'required;email',
'pwd': 'required;length(6~16)'
},
valid: function(form) {
// do something
// use native submit.
form.submit();
}
});
示例:绑定表单验证通过的事件,使用 ajaxSUbmit 提交表单
$('#form1').on('valid.form', function(e){
$(this).ajaxSubmit();
});
浏览器兼容
- IE6+
- Chrome
- Safari 4+
- Firefox 3.5+
- Opera
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥