Laravel+Vue2应用表单字段阿拉伯语输入正确实现方案

你原先自定义的字符映射方案存在大量硬伤：单键错误映射为多字符单词（如i映射为أنا、v映射为الخامس完全不符合键盘输入逻辑）、重复映射冲突、事件传参错误、链式replace性能差，必然出现转换错误。推荐按「前端拦截校验 + 可选标准键盘转写 + 后端兜底校验」三层实现，稳定性远高于自定义映射：

1. 基础输入框改造 #

先修正模板的事件绑定，保留RTL布局，新增阿拉伯语语言标记，不要用keyup事件（会出现输入先显示再替换的闪烁问题），改用input事件实时处理：

<input 
  type="text" 
  class="form-control" 
  dir="rtl"
  lang="ar"
  v-model="form.full_name" 
  @input="handleArabicInput"
  placeholder="الاسم الكامل"
>

2. 前端核心逻辑（Vue2 实现） #

逻辑分两部分：默认拦截所有非阿拉伯语字符，可选开启英文键盘转阿拉伯语的标准映射，同时修复输入时光标错位的问题：

// 标准阿拉伯语QWERTY键盘单字符映射表，无多字符错误映射
const ARABIC_KEY_MAP = {
  'q': 'ض', 'w': 'ص', 'e': 'ث', 'r': 'ق', 't': 'ف', 'y': 'غ', 'u': 'ع', 'i': 'ه', 'o': 'خ', 'p': 'ح',
  '[': 'ج', ']': 'د', 'a': 'ش', 's': 'س', 'd': 'ي', 'f': 'ب', 'g': 'ل', 'h': 'ا', 'j': 'ت', 'k': 'ن',
  'l': 'م', ';': 'ك', "'": 'ط', 'z': 'ئ', 'x': 'ء', 'c': 'ؤ', 'v': 'ر', 'b': 'لا', 'n': 'ى', 'm': 'ة',
  ',': 'و', '.': 'ز', '/': 'ظ', '`': 'ذ',
  'Q': 'َ', 'W': 'ً', 'E': 'ُ', 'R': 'ٌ', 'T': 'لإ', 'Y': 'إ', 'U': '‘', 'I': '÷', 'O': '×', 'P': '؛',
  '{': 'أ', '}': 'ؤ', 'A': 'ِ', 'S': 'ٍ', 'D': 'ـ', 'F': 'ّ', 'G': 'لأ', 'H': 'أ', 'J': 'ـ', 'K': '،',
  'L': '/', ':': ':', '"': 'ٌ', 'Z': '~', 'X': 'ْ', 'C': '}', 'V': '{', 'B': 'لآ', 'N': 'آ', 'M': "'",
  '?': '؟', '<': '،', '>': '؟', '~': 'ّ'
}

export default {
  data() {
    return {
      form: {
        full_name: ''
      },
      // 可配置是否开启英文键盘自动转阿语，默认建议关闭，提示用户用原生阿语键盘输入更准确
      enableKeyTransform: true
    }
  },
  methods: {
    handleArabicInput(e) {
      const inputEl = e.target
      // 记录光标位置，解决赋值后光标跳末尾的问题
      const cursorPos = inputEl.selectionStart
      let val = this.form.full_name

      if (this.enableKeyTransform) {
        // 逐字符按标准映射转换，避免链式replace的冲突问题
        val = val.split('').map(char => ARABIC_KEY_MAP[char] || char).join('')
      }

      // 过滤所有非允许的阿拉伯语字符：允许阿拉伯语字母、数字、常用标点、空格
      val = val.replace(/[^\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF\s؟،؛]/g, '')
      
      this.$nextTick(() => {
        this.form.full_name = val
        // 还原光标位置
        inputEl.setSelectionRange(cursorPos, cursorPos)
      })
    }
  }
}

注意：如果你的用户群体大多使用原生阿拉伯语键盘，建议默认关闭enableKeyTransform，只做非法字符过滤即可，自动转写仅作为辅助功能，避免和用户原生输入法冲突。

3. Laravel 后端兜底校验 #

前端校验可以被绕过，必须在后端表单验证层加强制规则，利用PHP正则的Unicode阿拉伯语属性匹配，准确率远高于手动写字符范围：

// 控制器内的验证规则
$validated = $request->validate([
    'full_name' => 'required|string|max:255|regex:/^[\p{Arabic}\s؟،؛]+$/u',
], [
    'full_name.required' => 'الاسم الكامل مطلوب',
    'full_name.regex' => 'يجب إدخال الاسم الكامل باللغة العربية فقط'
]);

规则里的\p{Arabic}会自动匹配所有Unicode标准定义的阿拉伯语字符，不会出现漏判、错判，/u修饰符是开启UTF-8模式必须加的参数。

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