HTML5验证未捕获到“ ...”

Question

我有一个用于验证名称格式的正则表达式。您可以here看到它。 此正则表达式与...不匹配。但是在浏览器中，客户端验证以某种方式允许它，而我的服务器端验证才捕获到它。

查看

module ApplicationHelper
  class ActionView::Helpers::FormBuilder
    include ActionView::Helpers::FormTagHelper
    include ActionView::Helpers::FormOptionsHelper

    def name_field(name, options = {})
      validation_options = {
        pattern: "^(?!.*\.\S)[a-zA-Z àâäôéèëêïîçùûüÿæœÀÂÄÔÉÈËÊÏΟÇÙÛÜÆŒößÖẞąćęłńóśźżĄĆĘŁŃÓŚŹŻìíòúÌÍÒÚáñÁÑ ',.-]+$",
        oninvalid: "setCustomValidity('Contains unsupported characters.')",
        oninput: "setCustomValidity('')"
      }
      text_field name, validation_options.merge(options)
    end
  end


<%= f.name_field :last_name, class: 'form-control', placeholder: 'Last Name', required: true, maxlength: 50 %>

模型验证

  NAME_FORMAT = /^(?!.*\.\S)[a-zA-Z àâäôéèëêïîçùûüÿæœÀÂÄÔÉÈËÊÏΟÇÙÛÜÆŒößÖẞąćęłńóśźżĄĆĘŁŃÓŚŹŻìíòúÌÍÒÚáñÁÑ ',.-]+$/

  def name_is_acceptable
    [:first_name, :last_name].each do |attr|
      value = self.send(attr)
      next if value.blank? || value =~ NAME_FORMAT

      errors.add attr, I18n.t(:resident_name_invalid, scope: 'errors.messages')
    end
  end

Answer 1

您的正则表达式用双引号引起来，因此\转义由ruby处理（并且忽略，因为后面的字符并不特殊），而这些应在浏览器中转至正则表达式。

使用：

pattern: '^(?!.*\.\S)[a-zA-Z àâäôéèëêïîçùûüÿæœÀÂÄÔÉÈËÊÏΟÇÙÛÜÆŒößÖẞąćęłńóśźżĄĆĘŁŃÓŚŹŻìíòúÌÍÒÚáñÁÑ \',.-]+$'