Ruby On Rails 애플리케이션의 양식 유효성 검사.

이 기사에서는 요구 사항에 따라 서버 측 및 클라이언트 측 양식 유효성 검사를 관리하는 방법과 애플리케이션 수준에서 이를 관리하는 방법을 알아봅니다.

최근에 저는 두 개의 최신 Rails 앱에서 양식 유효성 검사 시스템에 대해 작업했으며 그 과정에서 공유하고 싶은 몇 가지 사항을 배웠습니다.

예제 및 소스 코드

demo project here 을 준비했습니다. 사용자 관리를 위해 생성된 스캐폴드가 있는 Rails 5.2 애플리케이션입니다. 사용자는 이름과 이메일의 2가지 속성을 가집니다. 유효성 검사는 다음과 같습니다.

이름과 이메일이 모두 필요합니다: 클라이언트 측 유효성 검사를 실행합니다.

서버 측 유효성 검사를 실행하려면 이메일이 고유해야 합니다.

Rails를 사용한 서버 측 검증

아이러브Rails validations . 모든 앱의 필수 구성 요소인 도메인 모델 유효성 검사 규칙을 캡처하는 강력한 메커니즘입니다. 이 예에서는 다음과 같이 모델 제약 조건을 캡처할 수 있습니다.

class User < ApplicationRecord
  validates :name, :email, presence: true
  validates :email, uniqueness: true
end

양식 오류를 처리하기 위한 일반적인 Rails 패턴은 오류를 알리기 위해 오류를 전달하는 잘못된 모델로 양식을 다시 렌더링하는 것입니다.

class UsersController < ApplicationController
  ...
  def create
    @user = User.new(user_params)
    if @user.save
      redirect_to @user, notice: 'User was successfully created.'
    else
      render :new
    end
  end

  def update
    if @user.update(user_params)
      redirect_to @user, notice: 'User was successfully updated.'
    else
      render :edit
    end
  end
  ...
end

이 접근 방식을 사용하려는 경우 필드 옆에 오류를 표시하는 방법에 문제가 있습니다.

문제를 처리하기 위해 Rails가 오류가 있는 필드를 렌더링하는 데 사용하는 코드 블록인 ActionView::Base.field_error_proc를 사용자 정의할 수 있습니다. 기본적으로 div.field_with_errors 태그로 래핑합니다. 클라이언트 측 유효성 검사와 동일한 구조를 렌더링하도록 구성할 수 있습니다. 이 예에서:

유효하지 않은 필드가 .invalid 클래스로 표시됩니다

.

잘못된 필드 옆에 있는 p.error 요소에 오류에 대한 정보가 표시됩니다.

# Place this code in a initializer. 
# E.g: config/initializers/form_errors.rb
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance_tag|
  fragment = Nokogiri::HTML.fragment(html_tag)
  field = fragment.at('input,select,textarea')

  html = if field
           field['class'] = "#{field['class']} invalid"
           html = <<-HTML
              #{fragment&.to_s}
              <p class="error">#{instance_tag&.error_message&.first}</p>
           HTML
           html
         else
           html_tag
         end

  html.html_safe
end

CSS — 요구 사항에 따라 사용자 정의할 수 있습니다.

# app/assets/stylesheets/application.css

.field p{
  margin-top: 0;
}

.error{
  color: red;
}

.invalid{
  border: 1px solid red;
}

새로운 양식 유효성 검사는 다음과 같습니다.



우리 시스템과 일관되게 중복 이메일을 검증하는 양식을 갖게 될 것입니다.



이 접근 방식에 대해 제가 좋아하는 점은 양식에 모델 오류를 표시하기 위해 추가 작업을 수행할 필요가 없다는 것입니다. 모델 검증을 추가하기만 하면 됩니다.

HTML 5를 사용한 클라이언트측 유효성 검사

양식 유효성 검사는 HTML 마크업에서 캡처됩니다. nice reference here을 읽을 수 있습니다. 목적을 위해 생성된 스캐폴드 양식을 수정하여 사용합니다.

<%= form.text_field :name, required: true %>
...
<%= form.email_field :email, required: true %>

이를 통해 브라우저는 유효하지 않은 데이터 제출을 허용하지 않으며 유효성 검사 종류에 따라 오류 메시지를 표시합니다.



이것은 효과가 있지만 아마도 모양이 마음에 들지 않을 것이며 스타일을 전혀 지정할 수 없습니다.

클라이언트 시스템이나 브라우저 또는 OS에 의존하지 않기 때문에 서버 측 유효성 검사를 좋아합니다.

결론

논의된 접근 방식은 약간의 인프라를 갖추고 있으면 강력하고 포괄적이면서 양식 유효성 검사를 매우 간결하게 표현할 수 있기 때문에 훌륭하게 작동합니다.

필요한 유효성 검사를 다루는 경우 HTML5 양식 유효성 검사를 사용하십시오

.

서버에서 모델 검증을 사용하십시오. 그럼에도 불구하고 이것은 당신이 하고 싶은 일입니다.

이 가이드가 귀하와 귀하의 팀에 도움이 되었다면 다른 사람들과 공유하십시오!