JQuery插件,轻量级表单模型验证(续 二)
好不容易,有心思,那就把没做完的JQuery轻量级表单验证做完吧
之前做到了空参数验证的,现在增加带参数的验证。
附上html
<form id="ValidataForm">
<input type="number" data-required="true" data-name="数字范围" data-type="required|Range:10,15" value="">
<button id="Send">提交</button>
</form>
一个很常见的输入框,输入框是数字类型,必填,范围是10到15之间
之前框架的实现修改了一下,原来eq是JQuery对象,JavaScript自带的Array是没有eq方法的,改了一通,代码附上
var validateForm = (function(model) {
model.Key = "[data-required='true']";
model.ElementList = new Array();
model.FunctionDictionary = new Dictionary();
model.ToastrCustom = function (msg) {
alert(msg);
}
model.AddElement = function (name) {
model.ElementList.push(name);
};
model.AddFunction = function (name, func) {
model.FunctionDictionary.add(name, func);
};
model.Validate = function (formName) {
for (var i = 0; i < model.ElementList.length; i++) {
var thisObj = model.ElementList[i];
var str = formName + " " + thisObj + model.Key;
var elements = $(str);
for (var j = 0; j < elements.length; j++) {
var element = elements.eq(j);
var value = element.val();
var elementType = element.data().type;
if (elementType.indexOf("|") > -1) {
var splitStrs = elementType.split("|");
for (var index in splitStrs) {
var splitStr = splitStrs[index];
var find = model.FunctionDictionary.contains(splitStr);
if (find) {
if (splitStr.indexOf(":") > -1) {
var params = splitStr.split(":");
var func = model.FunctionDictionary.find(params[0]);
if (func) {
var result = func(value, element, params[1]);
if (result.status) {
var errorInfo = result.message;
model.ToastrCustom(errorInfo);
return;
}
}
}
else {
var func = model.FunctionDictionary.find(splitStr);
if (func) {
var result = func(value, element);
if (result.status) {
var errorInfo = result.message;
model.ToastrCustom(errorInfo);
return;
}
}
}
}
}
}
else {
var func = model.FunctionDictionary.find(elementType);
if (func) {
var result = func(value, element);
if (result.status) {
var errorInfo = result.message;
model.ToastrCustom(errorInfo);
return;
}
}
}
}
}
};
model.ElementList.push("input");
model.ElementList.push("select");
model.FunctionDictionary.add("required", function (value, element) {
var name = element.data().name;
return {
status: (value === ""),
message: (value === "" && name + "不能为空")
};
});
return model;
})(window.validateForm || {});
扩展了一个方法
validateForm.AddFunction("Range", function (value, element, params) {
var name = element.data().name;
try {
var items = params.split(",");
if (items.length != 2) {
return {
status: false,
message: name + " 验证格式不对"
};
}
var min = new Number(items[0]);
var max = new Number(items[1]);
var valueNum = new Number(value);
var check = (min < max) && (min < valueNum && valueNum < max);
return {
status: check,
message: (check && name + " 范围不对")
};
} catch (error) {
console.log(error);
return {
status: false,
message: error.message
};
}
});
JQuery插件,轻量级表单模型验证(续 二)的更多相关文章
- JQuery插件,轻量级表单模型验证(续 一)
之前的代码结构,不方便扩展多结构的模型验证 重新结构设计了一下验证模型核心 var validateForm = (function(model) { model.Key = "[data- ...
- JQuery插件,轻量级表单模型验证
附上源码和Demo段 var validataForm = (function(model) { model.Key = "[data-required='true']"; mod ...
- 自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
- Jquery插件easyUi表单验证提交
<form id="myForm" method="post"> <table align="center" style= ...
- MVC遇上bootstrap后的ajax表单模型验证
MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...
- jQuery插件 -- Form表单插件jquery.form.js<转>
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi ...
- (转)jQuery插件 -- Form表单插件jquery.form.js
beforeSubmit: validate function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来 ...
- jQuery插件 -- Form表单插件jquery.form.js
http://blog.csdn.net/zzq58157383/article/details/7718956 http://my.oschina.net/i33/blog/77250
- 表单验证代码实例:jquery.validate.js表单验证插件
jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...
随机推荐
- 基于SpringBoot AOP面向切面编程实现Redis分布式锁
基于SpringBoot AOP面向切面编程实现Redis分布式锁 基于SpringBoot AOP面向切面编程实现Redis分布式锁 基于SpringBoot AOP面向切面编程实现Redis分布式 ...
- HTTP协议——详细版
一 HTTP协议简介 作为学习前端开发的开始,我们必须搞明白以下几件事 1.什么是互联网 互联网=物理连接介质+互联网协议 2.互联网建立的目的? 数据传输打破地域限制,否则 ...
- 05 drf源码剖析之认证
05 drf源码剖析之认证 目录 05 drf源码剖析之认证 1. 认证简述 2. 认证的使用 3. 源码剖析 4. 总结 1. 认证简述 当我们通过Web浏览器与API进行交互时,我们可以登录,然后 ...
- CRM【第三篇】: crm业务
1. 项目背景 crm系统是某某教育公司正在使用的项目,系统主要为 销售部.运营部.教质部门提供管理平台,随着公司规模的扩展,对公司员工的业务信息量化以及信息化建设越来越重要. crm系统为不同角色的 ...
- Cmd重定向
1.执行单条cmd命令 public static string ExecuteCmd(string command) { Process p = new Process(); p.StartInfo ...
- 【RPA Starter第三课】第一个Uipath项目:HelloWord
最后是一个小项目,开启使用Uipath.Uipath云平台,Uipath Orchestrator,Uipath Studio,发布项目.怎么启动机器人.都有详细的步骤. Uipath 的账号是通用的 ...
- static关键字有何魔法?竟让Spring Boot搞出那么多静态内部类
生命太短暂,不要去做一些根本没有人想要的东西.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免费学习 ...
- 一篇文章,学会jmeter模拟文件上传、下载操作
最近很多同学都在问jmeter上传,下载文件的脚本怎么做? 正巧这阵子忙完有时间,就来“折腾”一番,哈哈 现整理出来和大家分享 到底该怎么做? 一.准备工作: 上传接口一个(自行开发解决了) 下载接口 ...
- 用c#自己实现一个简单的JSON解析器
一.JSON格式介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.相对于另一种数据交换格式 XML,JSON 有着很多优点.例如易读性更好,占用空间更 ...
- Vue.js +pdf.js 处理响应pdf文件流数据,前端转图片预览不可下载
使用场景及原因 实际业务中,一些说明书或协议仅支持用户在线预览,为避免用户自行下载,并进行修改,引发纠纷,特将文件已文件流的形式,传给前端并转为图片显示,此时可能会有人问,为什么不直接在后端转图片,前 ...