Jquery Validate 소개 JQuery 양식 유효성 검사의 유효성 검사 및 코드 예제-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Jquery Validate 소개 JQuery 양식 유효성 검사의 유효성 검사 및 코드 예제

不言

Aug 14, 2018 pm 05:01 PM

jquery validate

이 글은 Jquery Validate 검증에 대한 소개와 jQuery 양식 검증의 코드 예제를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

jQuery 프레임워크 유효성 검사: 프레임워크 유효성 검사

Jquery 유효성 검사 규칙 유효성 검사#🎜 🎜#

(1)필수:true 필수 필드

(2)원격:”check.PHP” ajax 메서드를 사용하여 check.php를 호출하여 입력 값을 확인합니다#🎜 🎜 #(3)email:true 올바른 형식으로 이메일을 입력해야 합니다
(4)url:true 올바른 형식으로 URL을 입력해야 합니다
(5)date:true 올바른 형식의 날짜
(6)dateISO:true 올바른 형식으로 날짜(ISO)를 입력해야 합니다. 예: 2009-06-23, 1998/01/22 형식만 확인되며 형식은 확인되지 않습니다. 유효성
(7)number:true는 합법적으로 입력해야 합니다. 숫자(음수, 소수)
(8)digits:true는 정수를 입력해야 합니다
(9)creditcard: 법적 신용을 입력해야 합니다. 카드 번호
(10)equalTo:”#field” 입력 값 #field
(11)과 동일해야 함: 법적 접미사(업로드된 파일의 접미사)가 포함된 문자열을 입력하세요. #🎜 🎜#(12)maxlength:5 최대 길이가 5자(한자는 1로 계산됨)인 문자열을 입력하세요.
(13)minlength:10 입력 길이는 최소 10자( 한자는 한 글자로 계산됩니다)
(14)rangelength:[5,10] 입력 길이는 5~10 문자열이어야 합니다.") (한자는 한 글자로 계산됩니다.)
(15)range: [5,10] 입력 값은 5에서 10 사이여야 합니다.
(16)max:5 입력 값은 5보다 클 수 없습니다.
(17)min:10 입력 값은 10보다 작을 수 없습니다.

Jquery 사용자 정의 유효성 검사 규칙 검증

addMethod(name,method , message) 메서드: 매개 변수 이름은 다음의 이름입니다. 추가된 메소드

매개변수 메소드는 3개의 매개변수(value, element, param)를 받는 함수입니다. value는 요소의 값이고, element는 요소 자체입니다. param# 🎜🎜#은 매개변수로 사용할 수 있습니다. 내장된 Validation 메서드가 아닌 검증 메서드를 추가하는 addMethod 예를 들어 필드가 있는 경우

만 한 글자를 입력할 수 있으며 범위는 다음과 같습니다.

$.validator.addMethod(“af”,function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0] && value<=params[1]){
return true;
}else{
return false;
}
},”必须是一个字母,且a-f”);
用的时候,比如有个表单字段的id=”username”,则在rules 中写
username:{
af:["a","f"]
}

# 🎜🎜#method
addMethod 첫 번째 매개변수는 추가된 확인 방법의 이름입니다. 이것은 사용자 정의 오류 프롬프트인 af
addMethod의 세 번째 매개변수입니다. a letter, and a-f"
addMethod의 두 번째 매개변수는 함수입니다. 이 확인 방법을 사용할 때 이것이 더 중요하며 작성 방법을 결정합니다.

매개변수가 하나만 있는 경우 직접 작성합니다. af: "a", 그러면 a가 유일한 매개변수입니다. []에 여러 매개변수가 사용되는 경우 쉼표로 구분하세요.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .error{
            color: red;
        }
    </style>


<script src="js/jquery.min.js"></script>
<!-- 导入的框架 -->
<script src="js/jquery.validate.min.js"></script>
<script>
    $(function(){
        $(&#39;#a&#39;).validate({
            rules:{
                username:{
                    required:true
                },
                password_1:{
                    required:true,
                    rangelength:[5,10],

                },
                password_2:{
                    required:true,
                    equalTo:&#39;#pa&#39;
                },
                sex:{
                    required:true
                },
                you:{
                    required:true,
                    email:true
                },

            },
            messages:{
            username:{
                required:&#39;字段不能为空&#39;
               },
               password_1:{
                required:&#39;字段不能为空&#39;,
                rangelength:&#39;密码长度要在5到10位&#39;,
               },
               password_2:{
                required:&#39;字段不能为空&#39;,
                equalTo:&#39;两次密码不一样&#39;
               },
               sex:{
                required:&#39;性别不能为空&#39;,
               },
               you:{
                required:&#39;邮箱不能为空&#39;,
                email:&#39;邮箱格式不对&#39;
               }
           }
        })
    })
</script>
</head>
<body>
    <form action="a.jsp" method="post" id="a">
        请输入姓名:<input type="text" name="username" ><br>
        请输入密码: <input type="password" name="password_1" id="pa"><br>
        确认密码: <input type="password" name="password_2" ><br>
      
        性别: <input type="radio" name="sex" value="男">男
             <input type="radio" name="sex" value="女">女
             <label for="sex" generated="true"></label><br>
             邮箱: <input type="text" name="you" ><br>
             <input type="submit" value="submit">
    </form>
</body>
</html>

두 번째는 Blur of js 양식 확인입니다. 이벤트:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    /* form{
      margin-left:400px;
  } */
</style>
<script src="js/jquery.min.js"></script>

<script>
    $(function () {
        var a = b = c = d = e = f = g = false;
        $("#tables").css({ "border": &#39;1px solid blue&#39;, &#39;text-align&#39;: &#39;center&#39; }).css("width", "800").css("height", "400px")
        $(&#39;td&#39;).css({ "border": "1px solid blue" })
        $("#td1").css({ &#39;width&#39;: &#39;100&#39; })
        $("#td2").css({ "width": "400" })
        $("#td3").css({ "width": "300" })
        // 设置id a的颜色 
        $(&#39;span&#39;).css(&#39;color&#39;, &#39;red&#39;)
        //登录名的验证
        $("input[name=&#39;username&#39;]").blur(function () {
            var va = $(this).val();
            var char = va.charCodeAt(0);
            //alert(va);
            if (va == "") {
                a = false;
                // $(this).click(function(){
                //     $(&#39;#a&#39;).css(&#39;background&#39;,&#39;blue&#39;).css(&#39;width&#39;,&#39;100px&#39;)
                // })        
                $(&#39;#a&#39;).html(function () {
                    return "值不能为空";
                })
            }
            else if (va.length < 6) {
                a = false;
                $(&#39;#a&#39;).html(&#39;登录名不能少于6个字&#39;)
            }
            else if (!((char >= 65 && char <= 90) || (char >= 97 && char <= 122))) {
                a = false;
                $(&#39;#a&#39;).html(&#39;登录名的首字母只能为字母&#39;)
            }
            else {
                a = true;
                $(&#39;#a&#39;).html(function () {
                    return &#39;&#39;;
                })
            }
        })
        //验证姓氏
        $("input[name=&#39;xing&#39;]").blur(function () {
            var xing = $(this).val();
            if (xing == &#39;&#39;) {
                b = false;
                $(&#39;#b&#39;).html(&#39;值不能为空&#39;)
            }
            else if(xing.length>6){
                b=false;
                $(&#39;#b&#39;).html(&#39;你的姓氏不符合要求,字符长度超过6&#39;)
            }
            else{
                b=true;
                $(&#39;#b&#39;).html(function(){
                    return &#39;&#39;;
                })
            }
        })
        //验证密码
        $(&#39;#password_1&#39;).blur(function(){
            var va=$(&#39;#password_1&#39;).val();
            if(va==&#39;&#39;){
                c=false;
                $(&#39;#c&#39;).html(&#39;密码不能为空&#39;)
            }
           else if(va.length<8){
                c=false;
                $(&#39;#c&#39;).html(&#39;你的密码不足8位数不符合要求&#39;)
            }
            else{
                c=true;
                $(&#39;#c&#39;).html(&#39;&#39;);
            }
        })
        //密码重复验证
        $(&#39;#password_2&#39;).blur(function(){
            //拿到本身的密码
            var va1=$(this).val();
            //拿到之前的密码
            var va2=$(&#39;#password_1&#39;).val();
            if(va1==&#39;&#39;){
                d=false;
                $(&#39;#d&#39;).html(&#39;密码不能为空&#39;)
            }
            else if(va1!=va2){
                d=false;
                $(&#39;#d&#39;).html(&#39;两次密码不正确&#39;)
            }
            else{
                d=true;
                $(&#39;#d&#39;).html(&#39;&#39;)
            }
        })
        //性别选择直接选中下下标为1的
        $(&#39;input[name=sex]:eq(1)&#39;).prop(&#39;checked&#39;,&#39;checked&#39;)
        $(&#39;input[name=sex]&#39;).blur(function(){

        })
        //年验证
        $(&#39;#year&#39;).blur(function(){
            //拿到年的值
            var va=$(this).val();
            // var v=Number(va);
           //alert(va)
           var s=/^[0-9]+$/;
            if(va==&#39;&#39;){
                f=false;
                $(&#39;#f&#39;).hmtl(&#39;年不能为空&#39;)
            }
            // else if(!s.test(va)){
            //     f=false;
            //     $(&#39;#f&#39;).hmtl(&#39;年只能是数字&#39;)
            // }
            else if(isNaN(va)){
                f=false;
                $(&#39;#f&#39;).html(&#39;年只能是数字&#39;)
            }
            else if(va.length!=4){
                f=false;
                $(&#39;#f&#39;).html(&#39;值必须为4位数&#39;)
            }
            else{
                f=true;
                $(&#39;#f&#39;).html(&#39;&#39;) 
            }

        })
    //天数验证
    $("input[name=&#39;day&#39;]").blur(function(){
        var va=$(this).val();
        var t = /^(([1-9])|((1|2)[0-9])|30|31)$/; 
        if(va===&#39;&#39;){
            g=false;
            $(&#39;#f&#39;).html(&#39;天数不能为空&#39;)
        }
        else if(! t.test(va)){
            g=false;
            $(&#39;#f&#39;).html(&#39;对不起，天数必须在 1-31 之间!&#39;)
        }else{
            g=true;
            $(&#39;#f&#39;).html(&#39;&#39;) 
        }
    })
    $(&#39;#su&#39;).click(function(){
      return  a&&b&&c&&d&&f&&g
    })

    })
</script>

<body>
    <form action="s">
        <table id="tables">
            <tr>
                <td colspan="3">
                    <img src="images/d.png" alt="">
                </td>

            </tr>
            <tr>
                <td id="td1">登录名</td>
                <td id="td2">
                    <input id="input1" type="text" name="username">
                </td>
                <td id="td3">
                    <span id="a"></span>
                </td>
            </tr>
            <tr>
                <td>姓氏</td>
                <td>
                    <input type="text" name="xing">
                </td>
                <td>
                    <span id="b"></span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" name="password" id="password_1">
                </td>
                <td>
                    <span id="c"></span>
                </td>
            </tr>
            <tr>
                <td>再次输入密码</td>
                <td>
                    <input type="password" name="password" id="password_2">
                </td>
                <td>
                    <span id="d"></span>
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" value="男" >男
                    <input type="radio" name="sex" value="女">女
                </td>
                <td>
                    <span id="e"></span>
                </td>
            </tr>
            <tr>
                <td>生日</td>
                <td>
                    <input type="text" name="year" id="year">
                    <select name="month" id="select_1">
                        <option value="一月" selected>一月</option>
                        <option value="二月">二月</option>
                        <option value="三月">三月</option>
                    </select>
                    <input type="text" name="day">
                </td>
                <td>
                    <span id="f"></span>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="reset" value="reset">
                </td>

            </tr>
            <tr>
                <td colspan="3">
                    <input type="submit" value="提交" id="su">
                </td>
            </tr>
        </table>
    </form>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.error{
color: red;
}
</style>
<script src="js/jquery.min.js"></script>
<!-- 导入的框架 -->
<script src="js/jquery.validate.min.js"></script>
<script>
$(function(){
$(&#39;#a&#39;).validate({
rules:{
username:{
required:true
},
password_1:{
required:true,
rangelength:[5,10],
},
password_2:{
required:true,
equalTo:&#39;#pa&#39;
},
sex:{
required:true
},
you:{
required:true,
email:true
},
},
messages:{
username:{
required:&#39;字段不能为空&#39;
},
password_1:{
required:&#39;字段不能为空&#39;,
rangelength:&#39;密码长度要在5到10位&#39;,
},
password_2:{
required:&#39;字段不能为空&#39;,
equalTo:&#39;两次密码不一样&#39;
},
sex:{
required:&#39;性别不能为空&#39;,
},
you:{
required:&#39;邮箱不能为空&#39;,
email:&#39;邮箱格式不对&#39;
}
}
})
})
</script>
</head>
<body>
<form action="a.jsp" method="post" id="a">
请输入姓名:<input type="text" name="username" ><br>
请输入密码: <input type="password" name="password_1" id="pa"><br>
确认密码: <input type="password" name="password_2" ><br>
 
性别: <input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<label for="sex" generated="true" class="error"></label><br>
邮箱: <input type="text" name="you" ><br>
<input type="submit" value="submit">
</form>
</body>
</html>

관련 추천: #🎜🎜 ##🎜🎜 #jquery 유효성 검사 양식 유효성 검사 DEMO

jquery 양식 유효성 검사 제출

위 내용은 Jquery Validate 소개 JQuery 양식 유효성 검사의 유효성 검사 및 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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

핫 AI 도구

Undress AI Tool

무료로 이미지를 벗다

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

PHP 튜토리얼

1580

276

Related knowledge

고급 JavaScript 스코프 및 컨텍스트 Jul 24, 2025 am 12:42 AM

JavaScript의 범위는 변수의 접근성 범위를 결정하며, 이는 글로벌, 기능 및 블록 수준 범위로 나뉩니다. 컨텍스트는 이것의 방향을 결정하고 함수 호출 방법에 따라 다릅니다. 1. 스코프에는 글로벌 범위 (어디서나 액세스 가능), 함수 스코프 (함수 내에서만 유효 함) 및 블록 레벨 범위 ({} 내에서 유효 함)가 포함됩니다. 2. 실행 컨텍스트에는 가변 객체, 스코프 체인 및 이것의 값이 포함되어 있습니다. 이것은 일반 함수에서 글로벌 또는 정의되지 않은 것을 가리키며, 메소드 호출은 통화 객체를 가리키고 생성자는 새 객체를 가리키며 Call/Apply/Bind에 의해 명시 적으로 지정 될 수 있습니다. 3. 폐쇄는 외부 범위 변수에 액세스하고 기억하는 기능을 말합니다. 종종 캡슐화 및 캐시에 사용되지만

JavaScript 동시성 패턴 마스터 링 : 웹 작업자 대 Java 스레드 Jul 25, 2025 am 04:31 AM

동시 처리에서 JavaScript의 웹 워크와 Javathreads 사이에는 필수적인 차이가 있습니다. 1. JavaScript는 단일 스레드 모델을 채택합니다. 웹 워크 사람들은 브라우저에서 제공하는 독립 스레드입니다. UI를 차단하지는 않지만 DOM을 작동 할 수없는 시간 소모적 작업을 수행하는 데 적합합니다. 2. Java는 스레드 클래스를 통해 생성 된 언어 수준의 실제 멀티 스레딩을 지원하며 복잡한 동시 논리 및 서버 측 처리에 적합합니다. 3. 웹 워크는 postMessage ()를 사용하여 주 스레드와 통신하는데, 이는 매우 안전하고 고립된다. Java 스레드는 메모리를 공유 할 수 있으므로 동기화 문제에주의를 기울여야합니다. 4. 웹 워크는 이미지 처리 및와 같은 프론트 엔드 병렬 컴퓨팅에 더 적합합니다.

VUE 3 구성 API vs. 옵션 API : 세부 비교 Jul 25, 2025 am 03:46 AM

Vue3의 CompositionApi는 복잡한 논리 및 유형 파생에 더 적합하며 옵션 API는 간단한 시나리오 및 초보자에게 적합합니다. 1. OptionsApi는 데이터 및 방법과 같은 옵션에 따라 코드를 구성하며 명확한 구조를 가지지 만 복잡한 구성 요소는 조각화됩니다. 2. CompositionApi는 설정을 사용하여 관련 논리를 집중시킵니다.이 논리는 유지 관리 및 재사용에 도움이됩니다. 3. CompositionApi는 Composable 기능을 통해 충돌이없고 매개 변수화 가능한 논리 재사용을 인식합니다. 4. CompositionApi는 TypeScript와보다 정확한 유형 도출에 대한 더 나은 지원을 가지고 있습니다. 5.이 둘의 성능과 포장량에는 큰 차이가 없다. 6.

node.js로 CLI 도구 구축 Jul 24, 2025 am 03:39 AM

프로젝트를 초기화하고 package.json을 만듭니다. 2. Shebang을 사용하여 Entry Script Index.js를 만듭니다. 3. package.json의 빈 필드를 통한 명령을 등록합니다. 4. Yargs 및 기타 라이브러리를 사용하여 명령 줄 매개 변수를 구문 분석하십시오. 5. NPMLINK 로컬 테스트 사용; 6. 경험을 향상시키기 위해 도움말, 버전 및 옵션을 추가하십시오. 7. 선택적으로 NPMPUBLISH를 통해 출판; 8. 선택적으로 Yargs와의 자동 완료를 달성합니다. 마지막으로 합리적인 구조 및 사용자 경험 설계를 통해 실제 CLI 도구를 작성하고, 자동화 작업을 완료하거나 위젯을 배포하고 완전한 문장으로 끝납니다.

JS에서 요소를 생성하고 추가하는 방법? Jul 25, 2025 am 03:56 AM

새로운 요소를 생성하려면 document.createElement ()를 사용하십시오. 2. TextContent, 클래스리스트, SetAttribute 및 기타 방법을 통해 요소를 사용자 정의합니다. 3. DOM에 요소를 추가하기 위해 AppendChild () 또는보다 유연한 Append () 메소드를 사용하십시오. 4. 삽입 위치를 제어하기 위해 (), 이전 () 및 기타 방법을 선택적으로 사용합니다. 완전한 프로세스는 → Customize → Add를 작성하는 것이며 페이지 컨텐츠를 동적으로 업데이트 할 수 있습니다.

TypeScript의 고급 조건부 유형 Aug 04, 2025 am 06:32 AM

TypeScript의 고급 조건 유형은 TextEndsu? x : y 구문을 통해 유형간에 논리적 판단을 구현합니다. 핵심 기능은 분산 조건 유형, 유추 유형 추론 및 복잡한 유형 도구의 구성에 반영됩니다. 1. 조건부 유형은 베어 유형 매개 변수에 분산되며 문자열 [] | 번호 []를 얻기 위해 ToArray와 같이 조인트 유형을 자동으로 분할 할 수 있습니다. 2. 분포를 사용하여 필터링 및 추출 도구를 구축하기 위해 : textendsu를 통해 유형을 제외하고 textendu? t : never 및 null/undefined를 통해 공통점을 추출합니다. 3

마이크로 프론트 렌드 아키텍처 : 실용적인 구현 안내서 Aug 02, 2025 am 08:01 AM

microfrontendssolvesscalingchalingchalengesinlargeteams는 독립적 인 developmentanddeployment.1) chooseeanintegrationstrategy : usemodulefederation inwebpack5forruntimeloadingandtrueindence, build-timeintegrationforsimplesetups, oriframes/webcomponents

자바 스크립트에서 배열의 길이를 찾는 방법은 무엇입니까? Jul 26, 2025 am 07:52 AM

JavaScript 배열의 길이를 얻으려면 내장 길이 속성을 사용할 수 있습니다. 1. .length 속성을 사용하여 Constfruits = [ 'Apple', 'Banana', 'Orange']; Console.log (Fruits.length); // 출력 : 3; 2.이 속성은 문자열, 숫자, 객체 또는 배열과 같은 모든 유형의 데이터를 포함하는 배열에 적합합니다. 3. 길이 속성이 자동으로 업데이트되며 요소가 추가되거나 삭제 될 때 그에 따라 그 값이 변경됩니다. 4. 0 기반 카운트를 반환하고 빈 배열의 길이는 0입니다. 5. 길이 속성을 수동으로 수정하여 배열을 자르거나 확장 할 수 있습니다.

See all articles