附上源码和Demo段

  1. var validataForm = (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.Validata = 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. var func = model.FunctionDictionary.find(elementType);
  30. if (func) {
  31. var result = func(value, element);
  32.  
  33. if (result.status) {
  34. var errorInfo = result.message;
  35. model.ToastrCustom(errorInfo);
  36. return;
  37. }
  38. }
  39. }
  40. }
  41. };
  42.  
  43. model.ElementList.push("input");
  44. model.ElementList.push("select");
  45. model.FunctionDictionary.add("required", function (value, element) {
  46. var name = element.data().name;
  47.  
  48. return {
  49. status: (value === ""),
  50. message: (value === "" && name + "不能为空")
  51. };
  52. });
  53.  
  54. return model;
  55. })(window.validataForm || {});

调用处

  1. <form id="ValidataForm">
  2. <input data-required="true" data-name="名称" data-type="required" value="">
  3. <input data-required="true" data-name="昵称" data-type="hello">
  4. <button id="Send">提交</button>
  5. </form>
  6. <script src="~/js/plugs/jquery-3.3.1.js"></script>
  7. <script src="~/js/Dictionary.js"></script>
  8. <script src="~/js/ValidataForm.js"></script>
  9. <script type="text/javascript">
  10. $("#Send").click(function () {
  11. validataForm.Validata("#ValidataForm");
  12. });
  13. </script>

Dictionary这个对象是抄一个博主的
代码附上,内置链接

  1. /* https://www.cnblogs.com/baiyangyuanzi/p/6689554.html */
  2. /*字典 Dictionary类*/
  3. function Dictionary() {
  4. this.add = add;
  5. this.datastore = new Array();
  6. this.find = find;
  7. this.remove = remove;
  8. this.count = count;
  9. this.clear = clear;
  10. }
  11.  
  12. function add(key, value) {
  13. this.datastore[key] = value;
  14. }
  15.  
  16. function find(key) {
  17. return this.datastore[key];
  18. }
  19.  
  20. function remove(key) {
  21. delete this.datastore[key];
  22. }
  23.  
  24. function count() {
  25. /*var ss = Object.keys(this.datastore).length;
  26. console.log("ssss "+ss);
  27. return Object.keys(this.datastore).length;*/
  28. /**/
  29. var n = 0;
  30. for (var key in Object.keys(this.datastore)) {
  31. ++n;
  32. }
  33. return n;
  34. }
  35.  
  36. function clear() {
  37. for (var key in this.datastore) {
  38. delete this.datastore[key];
  39. }
  40. }

萌新初试前端,有写得不好的地方,望各位前辈,多多指教

JQuery插件,轻量级表单模型验证的更多相关文章

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

    好不容易,有心思,那就把没做完的JQuery轻量级表单验证做完吧 之前做到了空参数验证的,现在增加带参数的验证. 附上html <form id="ValidataForm" ...

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

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

  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. Redis的主从复制(基本入门)

    描述 从主节点(主机)到从节点(从机)单向的数据复制 特性(主从复制是Redis高可用的基础) 数据冗余 故障恢复 负载均衡 读写分离(主节点有读写权限,从节点只有读的权限) 注:以下操作都是在cen ...

  2. ES6入门(二)

    目录 ES6入门(二) es6之解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 ES6入门(二) es6之解构赋值 数组的解构赋值 ...

  3. 006.Nginx访问控制

    一 Nginx连接限制 1.1 HTTP协议的连接与请求 HTTP是建立在TCP, 一次HTTP请求需要先建立TCP三次握手(称为TCP连接),在连接的基础上再进行HTTP请求. HTTP请求建立在一 ...

  4. Java标识符/数据类型,规范等详解

    Java标识符 类名/变量名/方法名都称之为标识符. Java 所有的组成部分都需要名字.类名.变量名以及方法名都被称为标识符. 关于 Java 标识符,有以下几点需要注意: 所有的标识符都应该以字母 ...

  5. LNMP安装composer install时出现Warning: putenv()

    layout: post title: LNMP安装composer install时出现Warning: putenv() has been disabled for security reason ...

  6. DVWA学习记录 PartⅡ

    Command Injection 1. 题目 Command Injection,即命令注入,是指通过提交恶意构造的参数破坏命令语句结构,从而达到执行恶意命令的目的. 2. Low a. 代码分析 ...

  7. scrapy shell 的使用

    是什么?:是一个终端下的调试工具,用来调试scrapy 安装ipython :pip install ipython 启动: scrapy shell + 需要请求的url 进来之后,response ...

  8. Centos7:python 安装。yum安装软件提示 cannot find a valid baseurl for repobase7x86_64

    方法一.   1.打开 vi /etc/sysconfig/network-scripts/ifcfg-enp4s0(每个机子都可能不一样,但格式会是“ifcfg-e...”).但内容包含: < ...

  9. java 面向对象(二十七):注解的使用

    1. 注解的理解① jdk 5.0 新增的功能*② Annotation 其实就是代码里的特殊标记, 这些标记可以在编译, 类加载, 运行时被读取, 并执行相应的处理.通过使用 Annotation, ...

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

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