好不容易,有心思,那就把没做完的JQuery轻量级表单验证做完吧

之前做到了空参数验证的,现在增加带参数的验证。

附上html

  1. <form id="ValidataForm">
  2. <input type="number" data-required="true" data-name="数字范围" data-type="required|Range:10,15" value="">
  3. <button id="Send">提交</button>
  4. </form>

一个很常见的输入框,输入框是数字类型,必填,范围是10到15之间

之前框架的实现修改了一下,原来eq是JQuery对象,JavaScript自带的Array是没有eq方法的,改了一通,代码附上

  1. var validateForm = (function(model) {
  2. model.Key = "[data-required='true']";
  3. model.ElementList = new Array();
  4. model.FunctionDictionary = new Dictionary();
  5. model.ToastrCustom = function (msg) {
  6. alert(msg);
  7. }
  8.  
  9. model.AddElement = function (name) {
  10. model.ElementList.push(name);
  11. };
  12.  
  13. model.AddFunction = function (name, func) {
  14. model.FunctionDictionary.add(name, func);
  15. };
  16.  
  17. model.Validate = function (formName) {
  18. for (var i = 0; i < model.ElementList.length; i++) {
  19. var thisObj = model.ElementList[i];
  20. var str = formName + " " + thisObj + model.Key;
  21. var elements = $(str);
  22.  
  23. for (var j = 0; j < elements.length; j++) {
  24. var element = elements.eq(j);
  25. var value = element.val();
  26.  
  27. var elementType = element.data().type;
  28.  
  29. if (elementType.indexOf("|") > -1) {
  30. var splitStrs = elementType.split("|");
  31.  
  32. for (var index in splitStrs) {
  33. var splitStr = splitStrs[index];
  34. var find = model.FunctionDictionary.contains(splitStr);
  35.  
  36. if (find) {
  37. if (splitStr.indexOf(":") > -1) {
  38. var params = splitStr.split(":");
  39.  
  40. var func = model.FunctionDictionary.find(params[0]);
  41. if (func) {
  42. var result = func(value, element, params[1]);
  43.  
  44. if (result.status) {
  45. var errorInfo = result.message;
  46. model.ToastrCustom(errorInfo);
  47. return;
  48. }
  49. }
  50. }
  51. else {
  52. var func = model.FunctionDictionary.find(splitStr);
  53. if (func) {
  54. var result = func(value, element);
  55.  
  56. if (result.status) {
  57. var errorInfo = result.message;
  58. model.ToastrCustom(errorInfo);
  59. return;
  60. }
  61. }
  62. }
  63. }
  64. }
  65. }
  66. else {
  67. var func = model.FunctionDictionary.find(elementType);
  68. if (func) {
  69. var result = func(value, element);
  70.  
  71. if (result.status) {
  72. var errorInfo = result.message;
  73. model.ToastrCustom(errorInfo);
  74. return;
  75. }
  76. }
  77. }
  78. }
  79. }
  80. };
  81.  
  82. model.ElementList.push("input");
  83. model.ElementList.push("select");
  84. model.FunctionDictionary.add("required", function (value, element) {
  85. var name = element.data().name;
  86.  
  87. return {
  88. status: (value === ""),
  89. message: (value === "" && name + "不能为空")
  90. };
  91. });
  92.  
  93. return model;
  94. })(window.validateForm || {});

扩展了一个方法

  1. validateForm.AddFunction("Range", function (value, element, params) {
  2. var name = element.data().name;
  3. try {
  4. var items = params.split(",");
  5.  
  6. if (items.length != 2) {
  7. return {
  8. status: false,
  9. message: name + " 验证格式不对"
  10. };
  11. }
  12.  
  13. var min = new Number(items[0]);
  14. var max = new Number(items[1]);
  15. var valueNum = new Number(value);
  16.  
  17. var check = (min < max) && (min < valueNum && valueNum < max);
  18. return {
  19. status: check,
  20. message: (check && name + " 范围不对")
  21. };
  22. } catch (error) {
  23. console.log(error);
  24. return {
  25. status: false,
  26. message: error.message
  27. };
  28. }
  29. });

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. 在Linux下安装zotero

    背景 系统:deepin15 zotero5.0 本来deepin的商店里是有zotero的,但貌似商店里的太老了,安装完打开之后什么功能都不能用,点击按钮没有反应.无奈之下,只能手动安装了 网上的教 ...

  2. VulnHub::DC-1

    实验环境 一共有五个flag,有多种方法去提权,我们最终目标是去拿到/root的flag.总的来说,难度不高,适合新人练手 渗透过程 0x01 信息搜集 由于不知道靶机IP地址,进行D段扫描,获得靶机 ...

  3. java IO流 (一) File类的使用

    1.File类的理解* 1. File类的一个对象,代表一个文件或一个文件目录(俗称:文件夹)* 2. File类声明在java.io包下* 3. File类中涉及到关于文件或文件目录的创建.删除.重 ...

  4. mysql groupby 字段合并问题(group_concat)

    在我们的日常mysql查询中,我们可能会遇到这样的情况: 对表中的所有记录进行分类,并且我需要得到每个分类中某个字段的全部成员. 上面的话,大家看起来可能不太好懂,下面举一个例子来给大家说明. 现在我 ...

  5. P1290 欧几里德的游戏(洛谷)

    欧几里德的两个后代 Stan 和 Ollie 正在玩一种数字游戏,这个游戏是他们的祖先欧几里德发明的.给定两个正整数 M 和 N,从 Stan 开始,从其中较大的一个数,减去较小的数的正整数倍,当然, ...

  6. JAVA集合一:ArrayList和LinkedList

    JAVA集合一:ArrayList和LinkedList 参考链接: HOW2J.CN 前言 这几篇博客重点记录JAVA的几个重要的集合框架:ArrayList.LinkedList.HashMap. ...

  7. Shell基本语法---case语句

    case语句 格式 case 变量 in 值1 ) 执行动作1 ;; 值2 ) 执行动作2 ;; 值3 ) 执行动作3 ;; .... * ) 如果变量的值都不是以上的值,则执行此程序 ;; esac ...

  8. 微信小程序-点餐系统

    一.前言说明 博客声明:此文链接地址https://www.cnblogs.com/Vrapile/p/13353264.html,请尊重原创,未经允许禁止转载!!! 1. 主要功能 (1)后台定义分 ...

  9. MacOS系统隐藏文件操作

    显示或关闭隐藏文件 显示:defaults write com.apple.finder AppleShowAllFiles -bool true ; killall Finder隐藏:default ...

  10. [jvm] -- 类加载器及双亲委派模板篇

    类加载器 JVM 中内置了三个重要的 ClassLoader BootstrapClassLoader(启动类加载器):最顶层的加载类,由C++实现,负责加载 %JAVA_HOME%/lib目录下的j ...