>  기사  >  웹 프론트엔드  >  jquery를 사용하여 사용자 정의 유효성 검사를 확인하는 방법

jquery를 사용하여 사용자 정의 유효성 검사를 확인하는 방법

DDD
DDD원래의
2023-06-25 17:33:461629검색

jquery 검증 사용자 정의 검증 단계: 1. jQuery 라이브러리 및 jQuery 검증 플러그인 라이브러리를 소개합니다. 2. HTML 양식 코드를 작성하고 검증해야 하는 필드에 대한 클래스 및 사용자 정의 검증 규칙을 추가합니다. -JavaScript에 입력하고 사용자 정의 유효성 검사 방법을 추가합니다. 4.

jquery를 사용하여 사용자 정의 유효성 검사를 확인하는 방법

jQuery 유효성 검사를 사용하여 유효성 검사를 사용자 정의하는 단계는 다음과 같습니다.

1 jQuery 라이브러리를 소개합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

2. HTML 양식 코드를 작성하고 유효성을 검사해야 하는 필드에 대한 클래스 및 사용자 정의 유효성 검사 규칙을 추가합니다.

<form id="myForm">
<input type="text" name="username" class="required">
<input type="text" name="age" class="required customNumber">
<input type="submit" value="Submit">
</form>

3. JavaScript에서 유효성 검사 플러그인을 초기화하고 사용자 정의 유효성 검사 방법을 추가합니다.

$(document).ready(function () {
// 验证规则
$.validator.addMethod("customNumber", function (value, element) {
return /^[-+]?(\d+|\d+\.\d*|\d*\.\d+)$/.test(value);
}, "请输入有效的数字");
// 初始化validate插件
$("#myForm").validate();
});

4. 선택사항: 확인 오류 메시지를 맞춤설정합니다.

$(document).ready(function () {
// 自定义错误提示信息
$.extend($.validator.messages, {
required: "该字段不能为空",
customNumber: "请输入有效的数字"
});
// 初始化validate插件
$("#myForm").validate();
});

이제 사용자가 양식을 제출하면 jQuery 유효성 검사가 각 필드가 규칙을 준수하는지 자동으로 확인하고 해당 오류 메시지를 표시합니다. 맞춤 확인 방법은 맞춤 확인 규칙에 따라 확인하고 맞춤 오류 메시지를 표시합니다

위 내용은 jquery를 사용하여 사용자 정의 유효성 검사를 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.