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 + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
(1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...
- VS插件 resharper安装破解教程
https://masuit.com/20 ReSharper是一款由jetbrains开发的针对C#, VB.NET, ASP.NET, XML,和XAML的编辑器.沿袭了jetbrains开发工具 ...
- Linux系统安装JDK8
一.卸载现用的JDK 1.查看Linux自带的JDK是否已安装 查看是否安装openjdk,java -version (yum安装的 一般都是 OpenJDK 命令:yum install ...
- Bootstrap 搭建基础页面
基于Bootstrap实现下图所示效果的页面,一个居中的标题和一个大按钮: <!DOCTYPE html> <html lang="zh-cn"> < ...
- mysql子查询习题98
#1.查询工资最低的员工信息:last name, salary SELECT last_name, salary FROM employees WHERE salary = ( SELECT MIN ...
- java大数据最全课程学习笔记(2)--Hadoop完全分布式运行模式
目前CSDN,博客园,简书同步发表中,更多精彩欢迎访问我的gitee pages 目录 Hadoop完全分布式运行模式 步骤分析: 编写集群分发脚本xsync 集群配置 集群部署规划 配置集群 集群单 ...
- Mybatis执行流程浅析(附深度文章推荐&面试题集锦)
首先推荐一个简单的Mybatis原理视频教程,可以作为入门教程进行学习:点我 (该教程讲解的是如何手写简易版Mybatis) 执行流程的理解 理解Mybatis的简单流程后自己手写一个,可以解决百分之 ...
- 集训作业 洛谷P1017 进制转换
这个题的题目真的太恶心了. 重点是他的题目描述和他的目标没啥关系. 和最终目的有关系的只有这么一句话:”输出此负进制数及其基数,若此基数超过10,则参照16进制的方法处理.“ 我们通过看这句话可以发现 ...
- 【Python学习笔记一】基础环境安装:idea+python
IDEA 安装 1.下载IDEA 官网下载地址: https://www.jetbrains.com/idea/ 2.安装的时候配置基本选择默认配置就行 参考链接:https://blog.csd ...
- python监控服务器应用日志,推送钉钉机器人,实时关注日志异常
生产环境多台服务器上部署了多个应用,日志出现报错时,无法及时反馈到开发人员.部署一个大型的运维监控应用,不但耗资源,而且配置也不简单. 简简单单写个python脚本来监控服务器日志就简单多了,废话不多 ...