仿照easy-ui并改进的表单验证
概述
easy-ui有自身的一套表单验证,扩展方便,但默认下也存在一些弱点,比如多规则验证、后台验证、远程异步验证等,这些功能要解决起来是比较吃力的。我仿照它的样式,写了一套前端表单验证的validBox.js脚本,支持多规则验证和远程异步验证,体积也比较小,再c#代码封装一下,项目为ValidBox4Mvc,能提供给Asp.net MVC使用,支持后台验证、实体使用特性描述验证规则等。
效果展示
使用方法
- 在Mvc的web工程引用ValidBox4Mvc.dll;
- 把ValidBox.js所在文件夹复制到web工程的Content或其它目录;
- 在View视图的Html页面引入ValidBox.js (jquery.js是前提);
- 生成表单,直接书写验证规则给html标签如下:
@Html.HiddenFor(item => item.Id)
<div>
<label>名称</label>
@Html.TextBoxFor(item => item.Name, Html.Valid().Required("名称为必填项").Length(2, 4).Remote("/home/CheckName", "Id", "Name").AsHtmlAttribute())
</div>
<div>
<label>邮箱</label>
@Html.TextBoxFor(item => item.Email, Html.Valid().Required("邮箱为必填项").Email().MaxLength(15).AsHtmlAttribute(new { style = "color:#005580" }))
</div>也可以在Model写上规则特性,html标签获取字段对应的规则:
[Serializable]
public class UserInfo
{
public int Id { get; set; } [Required(Message = "名称为必填项")]
[Length(, , Message = "名称为{0}到{1}个字")]
[Remote("/home/CheckName", "Id", "Name")]
public string Name { get; set; } [Required(Message = "邮箱为必填项")]
[Email]
[MaxLength()]
public string Email { get; set; }
}@Html.HiddenFor(item => item.Id)
<div>
<label>名称</label>
@Html.TextBoxFor(item => item.Name, Html.ValidFor(item => item.Name))
</div>
<div>
<label>邮箱</label>
@Html.TextBoxFor(item => item.Email, Html.ValidFor(item => item.Email, new { style = "color:#005580" }))
</div>- 表单提交前验证
function saveForm() {
// 前台验证 通过后再提交表单
$('.block').validInput(function (r) {
if (r == false) return;
$.post("/home/save", $('.block').find("input").serialize(), function (data) {
alert(data);
});
});
}
扩展
- ValidBox.js扩展:扩展jQuery.validRules空间下的方法即可;
- 特性添加:新建特性,派生于ValidRuleBase,关联对应ValidBox.js扩展的规则,并实现后台验证的IsValid方法;
- Html扩展:请仿照HtmlHeplerExtend.cs的扩展。
完整项目和例子
仿照easy-ui并改进的表单验证的更多相关文章
- amaze UI 如何添加原生表单验证
这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证 在amaze ui官网找到 表单验证. 但是ama ...
- jquery easy ui 1.3.4 表单(7)
7.1.ValidateBox(表单验证) 使用validType属性指定验证方法 1.标签方式创建 <input type="text" class="easyu ...
- Element Ui使用技巧——Form表单的校验规则rules详细说明
Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...
- jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)
1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({o ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- 【表单验证】基于jQuery的高度灵活的表单验证(无UI)
表单验证是前端开发过程中常见的一个需求,产品需求.业务逻辑的不同,表单验证的方式方法也有所区别.而最重要的是我们要清楚,表单验证的核心原则是--错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体 ...
- jQuery学习之路(8)- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
随机推荐
- ARP协议的报文格式
原文链接地址:http://www.cnblogs.com/laojie4321/archive/2012/04/12/2444187.html 结构ether_header定义了以太网帧首部:结 ...
- c++基础回顾
#include <iostream> #include <vector> #include <string> int main(int argc, const c ...
- JSON、使用JSON进行数据交换的基础和原理
1. JSON 1.1. JSON 1.1.1. 什么是JSON JSON即Javascript对象表示法,是一种现在主流的数据交换格式.之所以应用广泛还是由其简单易读所决定的. 简单,只有六种类型的 ...
- 烂泥:KVM、kickstart与NFS集成
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 其实这篇文章原本是可以不写的,不过为了学习NFS的使用形式还是写下,算是作为一个笔记. 有关NFS的搭建与配置,可以参考我以前的文档<烂泥:NFS ...
- C++ new(3)
转载自:http://www.builder.com.cn/2008/0104/696370.shtml “new”是C++的一个关键字,同时也是操作符.关于new的话题非常多,因为它确实比较复杂,也 ...
- windows下 MySQL数据库双向同步 配置步骤
最近在项目中遇到了要实现服务器上MySql数据双向同步,在网上找了很多资料,但是大部分都是在liux系统下配置的, 而且都是互相转载,没有一个详细的步骤,于是决定写一个windows系统下 ...
- NOIP2008 普及组T2 排座椅 解题报告-S.B.S
题目描述 上课的时候总会有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了一些有趣的现象,当同学们的座次确定下来之后,只有有限的D对同学上课时会交头接耳.同学 ...
- 【软件使用】用IntelliJ IDEA开发Android程序图解
博主这里使用的最新的14.0.3版本,下载地址:http://www.jetbrains.com/idea/, 下载后直接安装就可以了. 环境: OS:Win 8 IDE:IntelliJ IDEA ...
- UVA-10828 (概率期望+高斯消元)
题意: 给个有向图,每个节点等概率转移到它的后继节点,现在问一些节点的期望访问次数; 思路: 对于一个点v,Ev=Ea/d[a]+Eb/d[b]+Ec/d[c];a,b,c是v的前驱节点; 然后按这个 ...
- codeforces 487B B. Strip(RMQ+二分+dp)
题目链接: B. Strip time limit per test 1 second memory limit per test 256 megabytes input standard input ...