柯里化方法进行表单验证

已于 2024-03-27 13:28:33 修改
阅读量258 收藏
点赞数
文章标签： js javascript vue html
于 2020-10-14 17:48:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44599143/article/details/109079488
版权

柯里化 表单验证 正则表达式 函数封装 回调函数
关键词由CSDN通过智能技术生成

通过柯里化方法进行表达验证，简化验证步骤
之前验证步骤为

if(判断式(值1)){
	函数1
}
if(判断式(值2)){
	函数2
}
if(判断式(值3)){
	函数3
}

柯里化后

let demo = verificationData("值1","提示文案1","判断式1")
							("值2","提示文案2","判断式1")
							("值3","提示文案3","判断式1")

虽然不是标准柯里化函数，但是对于自己对柯里化了解有很大帮助
网上的柯里化函数给了一些经验，网址忘了，十分感谢作者

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>柯里化</title>
	</head>
	<body>

		<p>点击按钮计算数组元素相加后的总和。</p>
		<button onclick="myFunction()">点我</button>

		<p>a: <span id="demoa"></span></p>

		<p>b: <span id="demob"></span></p>

		<p>c: <span id="democ"></span></p>

		<p>d: <span id="demod"></span></p>

		<script>
			function add() {
				// 第一次执行时，定义一个数组专门用来存储所有的参数
				var _args = [].slice.call(arguments);

				// 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
				var adder = function() {
					var _adder = function() {
						// [].push.apply(_args, [].slice.call(arguments));
						_args.push(...arguments);
						return _adder;
					};

					// 利用隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
					_adder.toString = function() {
						return _args.reduce(function(a, b) {
								console.log("a为缓存的数据:",a,"\nb为新数据进入:",b)
							if (a == b) {
								return a * b;
							}
							return a + b
						});
					}

					return _adder;
				}
				// return adder.apply(null, _args);
				return adder(..._args);
			}

			var a = add(1)(1)(1)(1);
			var b = add(2)(2, 4)(16);
			var c = add("字符串")(1, 2)(3, 4); 
			var d = add(1, 2, 3)(0);


			function myFunction(item) {
				document.getElementById("demoa").innerHTML = a;
				document.getElementById("demob").innerHTML = b;
				document.getElementById("democ").innerHTML = c;
				document.getElementById("demod").innerHTML = d;
			}
		</script>

	</body>
</html>

以下是我对表单验证的函数进行柯里化的函数

/**
			 * @method 作者：古月孤魂
			 * @param {Type} data 验证目标对象
			 * 值1：被验证的数据
			 * 值2：toast文案
			 * 值3：验证规则，正则表达式
			 * 值4：验证规则：函数验证
			 * 值5：成功回调函数
			 * 值6：失败回调函数
			 * 值7：结束回调函数
			 * @returns {Type} 首个错误对象，无错误对象返回true表示通过
			 * @desc 对整体验证函数进行封装
			 * @throws {string} 正则表达式为非法输入
			 */
			function verificationData() {
				/**
				 * @method 作者：古月孤魂
				 * @param {List} 函数参数数组
				 * @returns {Type} 标准对象
				 * @desc 工厂函数=>将获取到的数据进行重新排列
				 */
				function arguments2Standard(arguments) {
					if(!arguments[1]) throw new Error('验证失败提示文案为必填项');
					let rule = (function(ruleRegExp = '') {
						if (ruleRegExp instanceof Function) {
							return ruleRegExp //执行自定义函数
						}
						if (!ruleRegExp) {
							return "isEmpty" //执行非空验证
						}
						if (ruleRegExp instanceof RegExp) {
							return ruleRegExp
						}
						
						switch (ruleRegExp) {
							case "phonenum":
								return /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
							case "E-mail":
								return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
							case "number":
								return /^[0-9]*$/;
							case "noString":
								return "isEmpty";
							case "select":
								return "isSelectJustData";
							default:

								throw new Error('验证规则中正则表达式为非法输入');
								return
						}
					})(arguments[2])
					return {
						data: arguments[0],
						toast: arguments[1],
						rule: rule,
						success_function: arguments[3],
						failed_function: arguments[4],
						complete_function: arguments[5]
					}
				}
				var _datas = [arguments2Standard(arguments)]
				var verifyData = function() {
					var _verifyData = function() {
						_datas.push(arguments2Standard(arguments));
						return _verifyData;
					};
					_verifyData.toString = function() {
						let failed = _datas.find(function(findListData) {
							let rule = findListData.rule;
							
							let verifyDataResult = false;
							if (rule instanceof RegExp) {
								verifyDataResult = rule.test(findListData.data)
							}
							if (typeof rule == 'string') {
								verifyDataResult = verifyDataConformRuleOfRuleIsString(findListData)
							}
							if(findListData.rule instanceof Function){
								let rule_return = findListData.rule(findListData.data);
								if(typeof rule_return != 'boolean') throw new Error('验证规则必须有布尔类型返回值');
								verifyDataResult =  rule_return
							}
							verifyDataResult?(findListData.success_function&&findListData.success_function(findListData.data)):(findListData.failed_function&&findListData.failed_function(findListData.data))
							findListData.complete_function&&findListData.complete_function(findListData.data)
							return !verifyDataResult
						})
						console.log("不符合规则的数据", failed||failed&&failed.data)
						
						return failed == undefined || failed.toast
					}
					
					function verifyDataConformRuleOfRuleIsString(verifyDataConformRuleData) {
						if(verifyDataConformRuleData.rule==='isEmpty'){
							return !!verifyDataConformRuleData.data
						}
						//作者：古月孤魂
						if(verifyDataConformRuleData.rule==='isSelectJustData'){
							return (function(isSelectJustData_Data){
								//无数据
								if (!isSelectJustData_Data) return false;
								//无名称
								if (!isSelectJustData_Data.name) return false; 
								//无id
								if (!isSelectJustData_Data.id) return false;
								//id为提示专用id
								if (isSelectJustData_Data.id == -1) return false;
								
								return true;
							})(verifyDataConformRuleData.data)
						}
						
					}
					return _verifyData;
				}
				return verifyData(_datas);
			}

html测试代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>柯里化_对象处理—古月孤魂</title>
	</head>
	<body>


		<p>a: <span id="demoa"></span></p>

		<!-- <p>b: <span id="demob"></span></p> -->

		<!-- <p>c: <span id="democ"></span></p> -->

		<!-- <p>d: <span id="demod"></span></p> -->

		<p>e: <span id="demoe"></span></p>

		<script>
			function add() {
				// 第一次执行时，定义一个数组专门用来存储所有的参数
				var _args = [].slice.call(arguments);

				// 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
				var adder = function() {
					var _adder = function() {
						// [].push.apply(_args, [].slice.call(arguments));
						_args.push(...arguments);
						return _adder;
					};

					// 利用隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
					_adder.toString = function() {
						let demo = _args.find(function(data) {
							return data.isOk == false
						})
						return demo == undefined
					}

					return _adder;
				}
				// return adder.apply(null, _args);
				return adder(..._args);
			}
			/**
			 * @method 作者：古月孤魂
			 * @param {Type} data 验证目标对象
			 * 值1：被验证的数据
			 * 值2：toast文案
			 * 值3：验证规则，正则表达式
			 * 值4：验证规则：函数验证
			 * 值5：成功回调函数
			 * 值6：失败回调函数
			 * 值7：结束回调函数
			 * @returns {Type} 首个错误对象，无错误对象返回true表示通过
			 * @desc 对整体验证函数进行封装
			 * @throws {string} 正则表达式为非法输入
			 */
			function verificationData() {
				/**
				 * @method 作者：古月孤魂
				 * @param {List} 函数参数数组
				 * @returns {Type} 标准对象
				 * @desc 工厂函数=>将获取到的数据进行重新排列
				 */
				function arguments2Standard(arguments) {
					if(!arguments[1]) throw new Error('验证失败提示文案为必填项');
					let rule = (function(ruleRegExp = '') {
						if (ruleRegExp instanceof Function) {
							return ruleRegExp //执行自定义函数
						}
						if (!ruleRegExp) {
							return "isEmpty" //执行非空验证
						}
						if (ruleRegExp instanceof RegExp) {
							return ruleRegExp
						}
						
						switch (ruleRegExp) {
							case "phonenum":
								return /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
							case "E-mail":
								return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
							case "number":
								return /^[0-9]*$/;
							case "noString":
								return "isEmpty";
							case "select":
								return "isSelectJustData";
							default:

								throw new Error('验证规则中正则表达式为非法输入');
								return
						}
					})(arguments[2])
					return {
						data: arguments[0],
						toast: arguments[1],
						rule: rule,
						success_function: arguments[3],
						failed_function: arguments[4],
						complete_function: arguments[5]
					}
				}
				var _datas = [arguments2Standard(arguments)]
				var verifyData = function() {
					var _verifyData = function() {
						_datas.push(arguments2Standard(arguments));
						return _verifyData;
					};
					_verifyData.toString = function() {
						let failed = _datas.find(function(findListData) {
							let rule = findListData.rule;
							
							let verifyDataResult = false;
							if (rule instanceof RegExp) {
								verifyDataResult = rule.test(findListData.data)
							}
							if (typeof rule == 'string') {
								verifyDataResult = verifyDataConformRuleOfRuleIsString(findListData)
							}
							if(findListData.rule instanceof Function){
								let rule_return = findListData.rule(findListData.data);
								if(typeof rule_return != 'boolean') throw new Error('验证规则必须有布尔类型返回值');
								verifyDataResult =  rule_return
							}
							verifyDataResult?(findListData.success_function&&findListData.success_function(findListData.data)):(findListData.failed_function&&findListData.failed_function(findListData.data))
							findListData.complete_function&&findListData.complete_function(findListData.data)
							return !verifyDataResult
						})
						console.log("不符合规则的数据", failed||failed&&failed.data)
						
						return failed == undefined || failed.toast
					}
					
					function verifyDataConformRuleOfRuleIsString(verifyDataConformRuleData) {
						if(verifyDataConformRuleData.rule==='isEmpty'){
							return !!verifyDataConformRuleData.data
						}
						// 作者：古月孤魂
						if(verifyDataConformRuleData.rule==='isSelectJustData'){
							return (function(isSelectJustData_Data){
								//无数据
								if (!isSelectJustData_Data) return false;
								//无名称
								if (!isSelectJustData_Data.name) return false; 
								//无id
								if (!isSelectJustData_Data.id) return false;
								//id为提示专用id
								if (isSelectJustData_Data.id == -1) return false;
								
								return true;
							})(verifyDataConformRuleData.data)
						}
						
					}
					return _verifyData;
				}
				return verifyData(_datas);
			}
			// var a = add({data:1,isOk:true})({data:2,isOk:false})({data:3,isOk:true})({data:4,isOk:true})({data:5,isOk:true})({data:6,isOk:true},{data:7,isOk:true})({data:8,isOk:true})({data:9,isOk:true})({data:10,isOk:false});
			// var b = add({data:1,isOk:true},{data:2,isOk:true},{data:3,isOk:true})({data:4,isOk:false}, {data:5,isOk:true})({data:6,isOk:true});
			// var c = add({data:1,isOk:true})({data:2,isOk:true}, {data:3,isOk:true})({data:4,isOk:true}, {data:5,isOk:true}); 
			var d = add({
				data: 1,
				isOk: false
			}, {
				data: 2,
				isOk: true
			}, {
				data: 3,
				isOk: false
			})({
				data: 4,
				isOk: false
			});
			var e = verificationData("13812341234", "吐司内容1",
					/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/)
				("123", "吐司内容2", /^[0-9]*$/)
				("undefined", "吐司内容9")
				("13812341234", "吐司内容3", "phonenum")
				("13812341234", "吐司内容4", "")
				("123", "吐司内容5", "")
				(123, "吐司内容6",data => data === 123)
				("123", "吐司内容6",function(data){return data==="123"})
				({id:123,name:"选择数据"}, "吐司内容6", "select",function(data){console.log("成功回调",data)},function(data){console.log("失败回调",data)},function(data){console.log("结束回调",data)})
				({id:1234,name:"13"}, "吐司内容6",function(data){return data.id==1234},function(data){console.log("成功回调",data)},function(data){console.log("失败回调",data)},function(data){console.log("结束回调",data)})
			var a = verificationData("数据1","文案1")
									("数据2","文案2")
									("","文案3")
			myFunction();

			function myFunction(item) {
				document.getElementById("demoa").innerHTML = a;
				// document.getElementById("demob").innerHTML = b;
				// document.getElementById("democ").innerHTML = c;
				// document.getElementById("demod").innerHTML = d;
				document.getElementById("demoe").innerHTML = e;
			}
		</script>

	</body>
</html>

哪里不对希望大家帮忙指点

_默_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
react（21）——不使用函数柯里化功能实现表单验证
木子 旭的博客
01-31 111
1.代码 <body> <div id="test"></div> <script type="text/babel"> "use strict"; class Login extends React.Component { state = { username: "", password: "", }; saveFormData = (dataType,value)
React多表单收集数据 函数柯里化
qq_43368845的博客
10-31 248
React 处理多个表单收集数据 函数柯里化
js实用方法-----柯里化
qq_44197554的博客
03-22 138
首先，什么是柯里化：用于固定某个函数的某些参数，得到另一个函数，该函数接收剩余参数。柯里化至少要有一个参数，就是要固定的那个函数。 先举个例子来解释一下什么是函数柯里化: function f(x, y, z){ return (x + y) * z; } //curry是需要写的柯里化函数 let f1 = curry(f, 2);//固定了f的第一个参数，返回一个可以传参的函数 let f...
js高级函数之（函数）柯里化方法
CSDNLFF的博客
02-13 292
初学柯里化
函数柯里化
少油少盐不要辣
12-01 219
1.什么是函数柯里化 是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。 （个人见解：将一个低阶函数转换成高阶函数） 举个栗子： // 普通的add函数 function add(x, y) { return x + y } // Currying后 function curryingAdd(x) { ...
使用函数柯里化（高阶函数）处理多个input
weixin_43090018的博客
06-08 158
有这样一个添加个人信息的form表单，点击确定的时候，在控制台输出他所填写的内容（以react为例） 要是按照我刚写代码的时候，肯定是一个输入框一个方法，然后在进行赋值；万一输入框多了那就真tm难受 我们可以通过调用一个函数传不同的参数来进行优化 函数柯里化的方式 import React, { Component } from 'react' export default class Demo extends Component { state = { name: '',
python数据分析第二章——正则表达式()、匿名函数，partial柯里化、迭代器（iter yield）、生成器表达式
weixin_42277616的博客
08-05 168
文章目录正则表达式 正则表达式
scala详细笔记(十)-scala高级语法之柯里化和闭包
HANG.NIAN
06-27 2682
1 柯力化 1.1 简介 语法 : 函数有多个参数列表 柯里化(Currying)指的是把原来接受多个参数的函数变换成接受一个参数的函数过程，并且返回接受余下的参数且返回结果为一个新函数的技术。所以柯力化的现象是 : 函数名()() 意义: 方便数据的演变, 后面的参数可以借助前面的参数推演 , foldLeft的实现 有多个参数列表 的函数就是柯里化函数，所谓的参数列表就是使用小括号括起来的函数参数列表 curry化最大的意义在于把多个参数的function等价转化成多个单参数funct..
Java柯里化函数的实现
mowushenght的专栏
06-09 1606
柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。 看定义还是不容易理解，打个比方：一块电路板上有多个电容和电阻，要同时插上电路板才能正常工作，传统的Java定义一个方法，入参就是各种电容、电阻，返回值是电路板工作结果，如果只插入电容，这其实也是一种转态，这种转态在Java8后就可以通过函数表示，也就是返回一个电路板上面已经插好了电容，我可以插入不同的电阻返回不同的结果，把f(电容,电阻)变成了f(电容)(
antd a-form-model 动态表单 自定义校验柯里化
weixin_38992765的博客
09-15 2550
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 732
注释很详细，直接上代码……
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 619
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 443
处理vite项目中src和url路径问题
RN高级interview
流星雨的博客
07-31 508
RN高级interview
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2773
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
linux命令行下使用的浏览器
没刮胡子的程序员专栏
08-01 99
从命令行浏览网页的原因有很多。 命令行工具通常具有丰富的选项和参数，可以根据用户的需求进行调整和配置。这种灵活性使得命令行在自动化和脚本编写方面非常有用。 对于系统管理员来说，命令行是管理和配置服务器的首选方式。通过命令行，管理员可以快速执行各种任务，例如安装软件包、配置网络、管理用户和权限等。与图形界面相比，命令行通常更高效，特别是在处理大量的重复性任务时。 使用Linux命令行浏览器可以提高工作效率，降低系统资源消耗，提高系统的稳定性。
vue3学习day01-vue3的优势、新的脚手架工具create-vue、创建vue3项目、vue3的项目文件内容、插件变化
2301_76648183的博客
07-31 483
（4）index.html 单页入口，提供id为app的挂载点。
Pinia和vueX的区别是什么，刷新数据丢失怎么处理？
ggq53219的博客
08-01 467
Pinia和Vuex都是Vue.js生态系统中的状态管理库，它们在设计理念、使用方式、性能以及生态系统支持等方面存在一些差异。以下是对Pinia和Vuex主要区别的详细分析，以及处理数据刷新丢失问题的建议。
JavaScript高级难点：this、闭包与函数柯里化解析
"JavaScript 高级知识讲解，包括 this 指向、闭包、沙箱模式、函数柯里化和继承等内容，适用于已掌握JavaScript基础的开发者学习。" 在JavaScript编程中，深入理解高级概念对于提升编程技能至关重要。这份资料涵盖...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_默_

别打赏了，点点赞，点点关注就行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值