好不容易,有心思,那就把没做完的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插件,轻量级表单模型验证(续 二)的更多相关文章

  1. JQuery插件,轻量级表单模型验证(续 一)

    之前的代码结构,不方便扩展多结构的模型验证 重新结构设计了一下验证模型核心 var validateForm = (function(model) { model.Key = "[data- ...

  2. JQuery插件,轻量级表单模型验证

    附上源码和Demo段 var validataForm = (function(model) { model.Key = "[data-required='true']"; mod ...

  3. 自己编写jQuery插件之表单验证

    自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...

  4. Jquery插件easyUi表单验证提交

    <form id="myForm" method="post"> <table align="center" style= ...

  5. MVC遇上bootstrap后的ajax表单模型验证

    MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...

  6. jQuery插件 -- Form表单插件jquery.form.js<转>

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi ...

  7. (转)jQuery插件 -- Form表单插件jquery.form.js

    beforeSubmit: validate function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来 ...

  8. jQuery插件 -- Form表单插件jquery.form.js

    http://blog.csdn.net/zzq58157383/article/details/7718956 http://my.oschina.net/i33/blog/77250

  9. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

随机推荐

  1. Fetch.AI的最新发布speaks your language

    更新增强长期网络的稳定性 包括新的Etch功能,使我们的代码比以往对开发人员更加友好.我们现在支持太阳下的每一种语言,包括普通话,希腊语和希伯来语-甚至表情符号 介绍我们很高兴地宣布我们最新的技术更新 ...

  2. 不用破解版的 Navicat 了,几款免费且好用的 SQL 客户端送给你

    我是风筝,公众号「古时的风筝」. 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在里面. 没别的意思,今天就是为了给你推荐几款 MySQL 客户端,这几款 ...

  3. css3 文本行的斑马线

    背景知识 CSS 渐变, background-size ,“条纹背景”,“灵活的背景定位 难题 几年前,在刚刚获得 :nth-child() / :nth-of-type() 伪类之后,我们最常用其 ...

  4. 使用Git GUI工具 上传本地仓库到 gitee码云仓库

    前言: 网上关于git的命令操作与使用很多教程和博客,在使用git工具时我发现有一个 git Gui 可视化工具,我觉得十分的亲切,由于我之前一直是使用svn作为版本控制管理工具,都是可视化操作,使用 ...

  5. JVM 专题十六:StringTable

    1. String的基本特性 String:字符串,使用一对""引起来表示. String声明为final的,不可被继承. String实现了Serializable接口:表示字符 ...

  6. python 并发专题(十三):asyncio (二) 协程中的多任务

    . 本文目录# 协程中的并发 协程中的嵌套 协程中的状态 gather与wait . 协程中的并发# 协程的并发,和线程一样.举个例子来说,就好像 一个人同时吃三个馒头,咬了第一个馒头一口,就得等这口 ...

  7. Docker搭建部署Node项目

    前段时间做了个node全栈项目,服务端技术栈是 nginx + koa + postgresql.其中在centos上搭建环境和部署都挺费周折,部署测试服务器,接着上线的时候又部署生产环境服务器.这中 ...

  8. Idea 自定义快捷代码输入 如syso => System.out.println()

    前言 之前一直用的Eclipse System.out.println()的快捷代码输入 是 syso,但是在Idea 不好使用了,后来搜索了一番才知道,在Idea中的快捷输入是 sout,这里我就想 ...

  9. (五)学习了解OrchardCore笔记——灵魂中间件ModularTenantContainerMiddleware的第一行②模块的功能部分

    在(三)的时候已经说到模块集合用ForEachAsync的扩展方法分配多个任务,把每个modules的ManifestInfo分析出来的功能加入ConcurrentDictionary.我们先看看这个 ...

  10. UML学习笔记—基本概念和初始阶段

    chpater1 1.什么是分析和设计 分析:对问题和需求的调查研究 设计:满足需求的概念上的解决方案 做正确的事(分析)和正确地做事(设计) 2.什么是Object-Oriented-Analysi ...