input输入框输入数组、json后转为object格式

很久没写文章了,来一篇

有些需求是用户在输入框中输入数组、json对象,我们拿到后转成object格式。

用户输入的时候不可能严格的按照标准的json字符串格式来输入,所以用JSON.parse()来解析会很不友好,这时候可以使用eval()来解析。

下面是代码(jquery自己引入)

<!DOCTYPE html>
<html>
<head>
	<title>json</title>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<textarea name="" cols="30" rows="10" id="ipt"></textarea>
	<button class="btn">测试</button>

<script type="text/javascript">
	$(function() {
		$('.btn').click(function() {
			var ipt_text = $('#ipt').val();

			// 去除空格
			var ipt_str = ipt_text.replace(/\s*/g,"");

			// 构建函数字符串,供eval解析
			var fun_str = 'get(' + ipt_str + ')';
			
			var result;
			try {
				result = eval(fun_str);
			}
			catch(err) {
				// 这里可以给用户一些提示,让输入数组或json格式,而不是其它类型的字符串
				console.log('错误了');
				console.log(err);
			}
			console.log(result);
			console.log(typeof(result));
		})

		function get(text){
			return text;
		}
	})
</script>
</body>
</html>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要验证输入的内容是否是 JSON 对象、数组JSON 数组对象,你可以使用 Vue 的自定义指令或者计算属性来实现。下面是一个使用自定义指令的示例: ```html <template> <div> <el-input v-model="inputValue" v-json-validator></el-input> </div> </template> <script> export default { data() { return { inputValue: "" }; }, directives: { jsonValidator: { bind(el, binding, vnode) { el.addEventListener("input", () => { const value = el.value; try { // 尝试解析输入的内容为 JSON const json = JSON.parse(value); if (Array.isArray(json)) { // 验证是否为数组 vnode.context.inputValue = json; } else if (typeof json === "object" && json !== null) { // 验证是否为 JSON 对象 vnode.context.inputValue = json; } else { // 内容不是 JSON 对象或数组,清空输入框 vnode.context.inputValue = ""; } } catch (error) { // 内容不是有效的 JSON,清空输入框 vnode.context.inputValue = ""; } }); } } } }; </script> ``` 在上面的示例,我们创建了一个 `v-json-validator` 自定义指令来监听输入框的内容变化。当输入框内容发生变化时,我们尝试将其解析为 JSON。如果解析成功并且是数组或对象类型,我们将其赋值给 `inputValue` 数据属性。如果解析失败或者不是数组或对象类型,则清空输入框。 请注意,这只是一个简单的示例,仅验证输入内容是否符合 JSON 对象、数组JSON 数组对象的基本格式要求。如果需要更复杂的验证逻辑,你可能需要增加更多的代码。 希望这能满足你的需求!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值