jquery에서 입력 오류 메시지가 표시됨

웹사이트 디자인에서 양식은 일반적인 요소 중 하나입니다. 양식 사용자는 제출해야 할 정보를 입력하고, 웹사이트는 양식 검증을 통해 데이터의 유효성을 확인합니다. 양식에서는 사용자 경험을 향상시키기 위해 jQuery 플러그인을 사용하여 몇 가지 팁과 피드백을 제공하는 경우가 많습니다. 그 중 일반적인 플러그인은 입력 오류 프롬프트입니다.

입력 오류 프롬프트를 통해 사용자는 양식을 제출하기 전에 어떤 데이터가 불법인지 알 수 있으므로 시간을 절약하고 오류를 줄일 수 있습니다. 다음은 입력 오류 프롬프트를 구현하는 방법을 보여주는 예입니다.

먼저 간단한 HTML 양식을 만듭니다. 양식에는 이름, 이메일, 비밀번호라는 세 가지 필드가 포함되어 있습니다.

<form id="signup-form">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
  </div>
  <div class="form-group">
    <label for="email">电子邮件</label>
    <input type="email" class="form-control" id="email" placeholder="请输入您的电子邮件">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

다음으로 jQuery 플러그인을 사용하여 입력 오류를 표시합니다. jQuery의 유효성 검사 플러그인을 사용하면 사용자가 양식 필드(예: 필수 필드 또는 이메일 형식)에 대한 규칙을 기반으로 제출하기 전에 양식을 동적으로 확인할 수 있습니다. 필드가 규칙을 준수하지 않으면 입력 오류가 표시됩니다. 다음은 이 기능을 구현하는 방법에 대한 예입니다.

$(document).ready(function(){
  $("#signup-form").validate({
    rules: {
      name: {
        required: true
      },
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      name: {
        required: "姓名不能为空"
      },
      email: {
        required: "电子邮件不能为空",
        email: "电子邮件格式不正确"
      },
      password: {
        required: "密码不能为空",
        minlength: "密码至少需要6个字符"
      }
    },
    errorElement: "div",
    errorPlacement: function(error, element) {
      error.addClass("invalid-feedback");
      element.closest(".form-group").append(error);
    },
    highlight: function(element, errorClass, validClass) {
      $(element).addClass("is-invalid").removeClass("is-valid");
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).removeClass("is-invalid").addClass("is-valid");
    }
  });
});

위 예에서 유효성 검사 플러그인은 $(document).ready() 메서드를 통해 페이지 로드 시 사용됩니다. rules 개체는 규칙을 지정하고 messages 개체는 오류 메시지를 지정합니다. 오류 메시지에서 특수 문자 "$" 기호를 사용하여 양식 필드의 이름을 참조할 수 있습니다. $(document).ready()方法在页面加载时使用了validate插件。rules对象指定了规则，messages对象指定了错误信息。在错误信息中，可以使用特殊字符“$”符号来引用表单字段的名称。

errorElement选项将使用div元素来呈现错误消息。errorPlacement选项将错误消息插入到与输入字段相关联的 form-group 类中。highlight和unhighlight

errorElement 옵션은 div 요소를 사용하여 오류 메시지를 렌더링합니다. errorPlacement 옵션은 입력 필드와 연결된 form-group 클래스에 오류 메시지를 삽입합니다. highlight 및 unhighlight 옵션은 각각 입력 상자에 초점이 맞춰지거나 초점이 맞지 않을 때 트리거됩니다. 이 두 가지 방법은 오류 필드를 더 잘 강조하기 위해 테두리 색상을 빨간색과 녹색으로 설정합니다.

마지막으로 사용자가 양식을 제출하면 유효성 검사 플러그인이 유효성 검사를 수행합니다. 필드가 규칙을 준수하지 않으면 오류 메시지가 나타납니다. 이러한 메시지는 제출 버튼 아래에 해당 필드별로 표시됩니다.

위는 입력 오류 프롬프트의 예입니다. jQuery와 이 플러그인을 사용하면 디자이너는 양식의 기본 확인을 구현하고 사용자에게 양식을 제출하기 전에 어떤 데이터가 불법인지 이해하도록 유도할 수 있습니다. 🎜

위 내용은 jquery에서 입력 오류 메시지가 표시됨의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!