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 ...
随机推荐
- 在Linux下安装zotero
背景 系统:deepin15 zotero5.0 本来deepin的商店里是有zotero的,但貌似商店里的太老了,安装完打开之后什么功能都不能用,点击按钮没有反应.无奈之下,只能手动安装了 网上的教 ...
- VulnHub::DC-1
实验环境 一共有五个flag,有多种方法去提权,我们最终目标是去拿到/root的flag.总的来说,难度不高,适合新人练手 渗透过程 0x01 信息搜集 由于不知道靶机IP地址,进行D段扫描,获得靶机 ...
- java IO流 (一) File类的使用
1.File类的理解* 1. File类的一个对象,代表一个文件或一个文件目录(俗称:文件夹)* 2. File类声明在java.io包下* 3. File类中涉及到关于文件或文件目录的创建.删除.重 ...
- mysql groupby 字段合并问题(group_concat)
在我们的日常mysql查询中,我们可能会遇到这样的情况: 对表中的所有记录进行分类,并且我需要得到每个分类中某个字段的全部成员. 上面的话,大家看起来可能不太好懂,下面举一个例子来给大家说明. 现在我 ...
- P1290 欧几里德的游戏(洛谷)
欧几里德的两个后代 Stan 和 Ollie 正在玩一种数字游戏,这个游戏是他们的祖先欧几里德发明的.给定两个正整数 M 和 N,从 Stan 开始,从其中较大的一个数,减去较小的数的正整数倍,当然, ...
- JAVA集合一:ArrayList和LinkedList
JAVA集合一:ArrayList和LinkedList 参考链接: HOW2J.CN 前言 这几篇博客重点记录JAVA的几个重要的集合框架:ArrayList.LinkedList.HashMap. ...
- Shell基本语法---case语句
case语句 格式 case 变量 in 值1 ) 执行动作1 ;; 值2 ) 执行动作2 ;; 值3 ) 执行动作3 ;; .... * ) 如果变量的值都不是以上的值,则执行此程序 ;; esac ...
- 微信小程序-点餐系统
一.前言说明 博客声明:此文链接地址https://www.cnblogs.com/Vrapile/p/13353264.html,请尊重原创,未经允许禁止转载!!! 1. 主要功能 (1)后台定义分 ...
- MacOS系统隐藏文件操作
显示或关闭隐藏文件 显示:defaults write com.apple.finder AppleShowAllFiles -bool true ; killall Finder隐藏:default ...
- [jvm] -- 类加载器及双亲委派模板篇
类加载器 JVM 中内置了三个重要的 ClassLoader BootstrapClassLoader(启动类加载器):最顶层的加载类,由C++实现,负责加载 %JAVA_HOME%/lib目录下的j ...