如何用JavaScript或jQuery实现textarea提交前允许词白名单校验

需求梳理 #

• 白名单允许词汇：feel、appointment、only、attend、laser、submit
• 点击提交按钮时校验输入内容，只要存在不在白名单内的词汇，就弹出invalid codes提示

实现代码（原生JS+jQuery两种版本可选） #

1. 原生JavaScript版本 #

<textarea id="content" placeholder="请输入内容"></textarea>
<button id="submitBtn">提交</button>

<script>
// 用Set存储白名单，查找效率更高
const allowedWords = new Set(['feel', 'appointment', 'only', 'attend', 'laser', 'submit'])

document.getElementById('submitBtn').addEventListener('click', function() {
  const inputContent = document.getElementById('content').value.trim()
  // 空内容校验规则可根据业务需求调整
  if (!inputContent) {
    alert('invalid codes')
    return
  }
  // 按空格拆分输入词汇，需要支持标点分割可自行调整正则规则
  const inputWords = inputContent.split(/\s+/)
  // 校验所有词汇是否都在白名单内
  const isValid = inputWords.every(word => allowedWords.has(word))
  
  if (!isValid) {
    alert('invalid codes')
    return
  }
  // 校验通过后可写后续提交逻辑
  console.log('校验通过')
})
</script>

2. jQuery版本 #

<textarea id="content" placeholder="请输入内容"></textarea>
<button id="submitBtn">提交</button>

<script>
<!-- 请自行引入本地jQuery资源，不要使用外链 -->
const allowedWords = new Set(['feel', 'appointment', 'only', 'attend', 'laser', 'submit'])

$('#submitBtn').on('click', function() {
  const inputContent = $('#content').val().trim()
  if (!inputContent) {
    alert('invalid codes')
    return
  }
  const inputWords = inputContent.split(/\s+/)
  const isValid = inputWords.every(word => allowedWords.has(word))
  
  if (!isValid) {
    alert('invalid codes')
    return
  }
  // 校验通过后可写后续提交逻辑
  console.log('校验通过')
})
</script>

注意事项 #

• 示例默认按空格分割词汇，如果需要过滤标点再校验，可调整split的正则规则，比如改成/[\s,.!?;:]+/适配更多场景
• 前端校验仅用于优化用户体验，服务端必须同步做相同的白名单校验，避免前端规则被绕过后提交非法内容

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