为啥 JS 字符限制会在 Safari 中被打破？

Posted 2023-04-18

【中文标题】为啥 JS 字符限制会在 Safari 中被打破？

【英文标题】：Why would JS character limits break in Safari?为什么 JS 字符限制会在 Safari 中被打破？

【发布时间】：2018-10-11 12:18:37

【问题描述】：

我正在使用 JS 对输入进行一些字符限制（因为在 Shopify 上没有任何其他方法可以做到这一点），它在 FF 和 Chrome 中运行良好，但在 Safari 中我收到以下错误：

SyntaxError：字符串与预期的模式不匹配。

指下面form:内的定义

document.addEventListener('DOMContentLoaded', function () 
var shippingAddressEl = document.querySelector('.section--shipping-address')
if (shippingAddressEl) 
  var formValidation = 
    els: 
      el: shippingAddressEl,
      form: 
        firstname: shippingAddressEl.querySelector('input[name="checkout[shipping_address][first_name]"]:not([data-honeypot="true"]'),
        lastname: shippingAddressEl.querySelector('input[name="checkout[shipping_address][last_name]"]:not([data-honeypot="true"]'),
        company: shippingAddressEl.querySelector('input[name="checkout[shipping_address][company]"]:not([data-honeypot="true"]'),
        addressLine1: shippingAddressEl.querySelector('input[name="checkout[shipping_address][address1]"]:not([data-honeypot="true"]'),
        addressLine2: shippingAddressEl.querySelector('input[name="checkout[shipping_address][address2]"]:not([data-honeypot="true"]'),
        city: shippingAddressEl.querySelector('input[name="checkout[shipping_address][city]"]:not([data-honeypot="true"]'),
        postcode: shippingAddressEl.querySelector('input[name="checkout[shipping_address][zip]"]:not([data-honeypot="true"]'),
        phone: shippingAddressEl.querySelector('input[name="checkout[shipping_address][phone]"]:not([data-honeypot="true"]')
      
    
  
);

如何解决这个错误？

【参考方案1】：

编辑：我找到了原因：

form 对象中的几乎每个值都缺少 )：

city: shippingAddressEl.querySelector('input[name="checkout[shipping_address][city]"]:not([data-honeypot="true"]'),

【讨论】：

不，创建 JSON 不需要引号。试试var json = a: 1, b: 2 。它有效

@JagdeepSingh 更新了我的帖子。再次感谢。

@JagdeepSingh 是一个 object - JSON 是一个字符串

天啊，它总是最简单的事情！完全错过了！谢谢！

@tom_mai78101 我的意思是to create a JSON 评论。 JSON 代表 javascript Object Notation，它是一个字符串类型，而 a: 1, b: 2 是一个普通对象，不是 JSON。

【参考方案2】：

您在每一行都缺少右括号：

var formValidation = 
  els: 
    el: shippingAddressEl,
    form: 
      firstname: shippingAddressEl.querySelector('input[name="checkout[shipping_address][first_name]"]:not([data-honeypot="true"])'),
      lastname: shippingAddressEl.querySelector('input[name="checkout[shipping_address][last_name]"]:not([data-honeypot="true"])'),
      company: shippingAddressEl.querySelector('input[name="checkout[shipping_address][company]"]:not([data-honeypot="true"])'),
      addressLine1: shippingAddressEl.querySelector('input[name="checkout[shipping_address][address1]"]:not([data-honeypot="true"])'),
      addressLine2: shippingAddressEl.querySelector('input[name="checkout[shipping_address][address2]"]:not([data-honeypot="true"])'),
      city: shippingAddressEl.querySelector('input[name="checkout[shipping_address][city]"]:not([data-honeypot="true"])'),
      postcode: shippingAddressEl.querySelector('input[name="checkout[shipping_address][zip]"]:not([data-honeypot="true"])'),
      phone: shippingAddressEl.querySelector('input[name="checkout[shipping_address][phone]"]:not([data-honeypot="true"])')
    
  

这应该可行。

【讨论】：

天啊，它总是最简单的事情！完全错过了！谢谢！