js 校验括号——括号不可嵌套且需成对出现

简介: js 校验括号——括号不可嵌套且需成对出现

实现原理

最终效果

完整代码

<template>
  <div style="padding: 30px">
    <p>校验规则 :</p>
    <ol>
      <li>括号不能嵌套</li>
      <li>括号必须成对出现</li>
    </ol>
    <el-input
      clearable
      placeholder="请输入例句!"
      v-model="exampleString"
      style="width: 400px"
    ></el-input>

    <p>
      校验结果:
      <span
        :style="{
          color: errorMsg ? 'red' : 'green',
        }"
      >
        {{ errorMsg || "校验通过" }}</span
      >
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      exampleString: "",
      errorMsg: "",
    };
  },
  watch: {
    exampleString(val) {
      this.errorMsg = this.check(val);
    },
  },
  methods: {
    check(str) {
      let errorMsg = "";
      let leftBracketsList = ["(", "(", "[", "{"];
      let rightBracketsList = [")", ")", "]", "}"];
      let BracketsDic = {
        "(": ")",
        "(": ")",
        "[": "]",
        "{": "}",
      };
      let leftBracket = null;
      let leftBracketIndex = null;
      let index = 1;

      for (let char of str) {
        // 是否左括号
        if (leftBracketsList.includes(char)) {
          // 是否已有左括号
          if (leftBracket) {
            errorMsg = `因括号不可嵌套,第${leftBracketIndex}个字符 ${leftBracket} 在匹配右括号前,不能出现第${index}个字符 ${char} `;
            break;
          } else {
            leftBracket = char;
            leftBracketIndex = index;
          }
        } else {
          // 是否右括号
          if (rightBracketsList.includes(char)) {
            // 是否已有左括号
            if (leftBracket) {
              // 是否匹配左括号
              if (BracketsDic[leftBracket] === char) {
                leftBracket = null;
                leftBracketIndex = null;
              } else {
                errorMsg = `第${leftBracketIndex}个字符 ${leftBracket} 与第${index}个字符 ${char} 不匹配`;
                break;
              }
            } else {
              errorMsg = `第${index}个字符 ${char} 前缺少左括号`;
              break;
            }
          }
        }
        index++;
      }

      if (!errorMsg) {
        if (leftBracket) {
          errorMsg = `第${leftBracketIndex}个字符 ${leftBracket} 后缺少右括号`;
        }
      }

      return errorMsg;
    },
  },
};
</script>
目录
相关文章
|
7月前
|
移动开发 JavaScript 前端开发
JavaScript的正则表达式实现邮箱校验
JavaScript的正则表达式实现邮箱校验
|
JavaScript 数据可视化 前端开发
【Vue.js】vue-cli搭建SPA项目并实现路由与嵌套路由---详细讲解
【Vue.js】vue-cli搭建SPA项目并实现路由与嵌套路由---详细讲解
110 0
|
JavaScript 前端开发 数据安全/隐私保护
Javascript知识【validation插件重写表单注册校验】
Javascript知识【validation插件重写表单注册校验】
|
3月前
|
JavaScript 前端开发
js_Ipv4以及ipv4段正则校验
几种JavaScript正则表达式,用于校验IPv4地址的有效性,包括支持CIDR表示法的变体。
80 4
|
2月前
|
Web App开发 JavaScript 前端开发
Javascript嵌套函数的调用
Javascript嵌套函数的调用
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
前端JS正则校验密码之3种实现方式
这篇文章展示了三种使用JavaScript正则表达式来校验密码的方法,密码需要满足包含大写字母、小写字母、数字及特殊字符,并在8到16位之间,同时提供了示例代码和实现效果。
142 1
前端JS正则校验密码之3种实现方式
|
5月前
|
JavaScript
js 区分中英文输入法(如中英文括号)
js 区分中英文输入法(如中英文括号)
89 4
|
7月前
|
JavaScript 索引
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
|
6月前
|
前端开发 JavaScript
JSX 中带有大括号的 JavaScript
JSX 中带有大括号的 JavaScript
|
5月前
|
移动开发 JavaScript
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
89 0