javascript - 键入时进行验证、预填充和潜在阻止

Question

我有一个字段，用户必须填写他们的社会安全号码。

如果用户的出生日期是 1990 年 11 月 14 日

社保以90.11.14-XXX.XX开头(X代表0-9的随机数)

我正在使用 simple_form

<%= f.input :ssn, 
            label: t('employee.social_security_no'),
            input_html: { placeholder: "XX.XX.XX - XXX.XX" }%>

我想实现以下目标:

1) 如何预设输入字段设置为 90.11.27-_ _ _ 。 _ _

2) 并验证剩余的 5 个数字实际上是数字

3) 并限制字段，以便用户不能填写超过 5 个额外数字。

非常感谢任何帮助我上路的帮助。

Answer 1

我不确定您真正想要实现什么，但您可以执行以下操作:

1) 预设如下“value”选项。(但用户应自行删除“_”字符)

<%= f.input :ssn,
  label: t('employee.social_security_no'),
  input_html: { value: "#{@user.birthdate.strftime('%y.%m.%d')}-___.__" },
  maxlength: 15
%>

2)在服务器端使用正则表达式检查数字格式，因此在模型中添加这些行。 (这将验证整个 ssn 格式为 XX.XX.XX-XXX.XX)

ssn_regexp = /\A\d{2}\.\d{2}\.\d{2}-\d{3}\.\d{2}\z/

validates :ssn,
  format: { with: ssn_regexp }

3) 'maxlength' 选项限制输入字段中要填写的数字的长度。