如何使用JavaScript检测HTML输入变量中包含的非法字符

问题原因 #

• 你声明的校验规则letters被双引号包裹，是普通字符串而非正则对象，无法用来执行字符合法性校验
• 非法字符的判断逻辑没有被加入到现有校验分支中，当前代码仅判断了姓名字段是否为空，只要字段非空就算包含非法字符也会直接进入下一步流程
• 单独用includes()只能校验单个指定字符，无法覆盖所有你需要拦截的非法字符场景，用正则匹配效率更高、覆盖场景更全

修正后的完整代码 #

nextBtnFirst.addEventListener("click", function(event) {
  event.preventDefault();
  //Validating the required Fields//
  var fname = document.getElementById("fname_id").value.trim();
  var lname = document.getElementById("lname_id").value.trim();
  // 去掉引号，声明为正则对象，当前规则是仅允许数字、大小写字母
  var letters = /^[0-9a-zA-Z]+$/;
  // 先判断是否为空
  if(fname == "" || lname == "") {
    updateError("First name and Last name is required!");
  // 再判断是否匹配合法字符规则，不匹配就抛出非法字符提示
  } else if (!letters.test(fname) || !letters.test(lname)) {
    updateError("Dont use forbidden Characters!");
  } else {
    slidePage.style.marginLeft = "-25%";
    bullet[current - 1].classList.add("active");
    progressCheck[current - 1].classList.add("active");
    progressText[current - 1].classList.add("active");
    current += 1;
  } 
});

如果需要调整允许的字符范围，直接修改正则表达式的规则即可。比如要允许空格、连字符这些姓名常用字符，可以把正则改为/^[0-9a-zA-Z\s-]+$/。

内容的提问来源于stack exchange，提问作者Temal