폼 검증

1. 잡고 양식 유효성 검사의 구현 과정

1.1 폼 검증 역할

사용자가 입력 한 내용이 우리의 프로젝트의 요구 사항을 충족하는지 확인
서버에 압력을 감소
사용자 경험을 향상

아이디어의 1.2 폼 유효성 검사 실현

입학 프로그램 : 이벤트 (양식이 제출 한이 onsubmit이벤트가 포커스를 잃었을 onblur푸시 버튼 클릭 이벤트, onclick포커스 이벤트를 얻을 onfocus, 키보드 입력 이벤트 onkeydown)
주요 프로그램 :
1. 데이터 (폼 콘텐츠가 저장된다 얻는다 value특성)
2. 상관 관계 방법과 데이터 유효성 검사 문자열 등을 사용하여
3. 경보 () 또는 다른 자동 그래피 (경고는 일반적으로 우측 또는 요소의 하측에 형성하는 것) 알리기 위해
4. 이 이벤트 노트는 가로 채기 위해 제출해야하는 경우!

<body>
    <form action="success.html" method="GET">
        <p>
            帐号： <input type="text" id="" name="username" value="" />
        </p>
        <p>
            密码： <input type="password" name="password"  />
        </p>
        <input type="submit" value="提交"/>
    </form>

    <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        // 1.绑定事件
        // 提交事件是属于表单form的一个事件
        $("form").submit(function(){
            // alert(1);
            // 2.获取数据
            var username = $("input[name=username]").val();
            // alert(username);
            // 3.利用字符串等相关方法进行验证
            if(username == null || username == ""){
                alert("用户名不能为空！");
                // 默认返回true 表示提交表单
                return false;
            }

            return true;
        });

    </script>
</body>

문자열을 마스터하는 인증 방법의 1.3 일반적인 형태

모두 공백을 제거) (트림
같이 IndexOf () 지정된 문자 인덱스를 가져옵니다
lastIndexOf에서도 ()는 마지막 인덱스의 문자를 가져옵니다
문자열 길이의 속성 길이를 가져옵니다
수 charAt ()는 문자의 인덱스를 가져옵니다

3. 정규 표현식의 기본 사용을 파악

기본 정규 표현식 쓰기

우리는 기본 정규식 볼 것이다

일반 식 (정규식) 문자열 (패턴)의 세트를 설명은 특정 기준에 맞는 서브 스트링 매칭을 대체하는 특정 문자열을 포함하는 문자열이 있는지 여부를 확인하기 위해 사용 또는 문자열로부터 제거 될 수있다 하위 문자열 등등. 복잡하고 엄격한 검증 간결한 코드를 처리 할 수있는 정규 표현식을 사용.

语法：
// 普通方式定义
var reg = /正则的表达式/[附加参数];
// 通过对象的构造来定义
var reg = new RegExp(正则表达式[,附加参数]);

분류 및 표현 다음 복합 모드 간단한 모드는 혼합 될 수있다

표현의 단순 모드 var reg = /abc/;
복잡한 발현 패턴 var reg = /[a-z]{6,16}/;은 6-16 작은 중소 Z에 일치시킬 수 있습니다 A-
- 예를 들어 메타 - 문자 : AZ] \ D \ S \ w
- 한정자 예 : {6, 16}

추가 매개 변수 :

g : 글로벌은 전 세계적으로 다른 방법에 다른 영향을 미칠

문자열이 방법은 다음 g를 추가 긍정적 아닌 교체 할 경우 속도 매칭 글로벌-g를 교체 할 경우 한 번만 대체

내가 : 케이스를 무시 IGNORECASE

m : 행 (M)의 여러 정합 복수 g과 함께 사용되는 경향

일반적인 정준 상관 방법

일반 객체 :

간부는 () 일치하는 문자열을 찾아 그 위치를 반환합니다
테스트 () 일치하는 문자열을 일정한 것으로 확인

문자열 방법 :

경기 () 하나 또는 정규 경기 이상 내용을 찾을 수
검색 () 정규 일치하는 콘텐츠를 찾을 수 있습니다

검색 () 메서드는 징후 g를 무시하고 항상 항상 호출자의 첫 번째 일치의 위치를 반환한다는 것을 의미 문자열의 시작에서 검색, 글로벌 일치를 수행하지 않습니다. 경우에 당신은 반환하지 않습니다 -1.
() 대신 일반 매칭을 대체
스플릿 () 절단 문자열을 절단하는 규칙적인 배열에있어서,

4. 폼 검증 특성 H5의 마스터

부동산 4.1 H5의 새로운 형태

필요한이 양식이 필요하다는 것을 나타냅니다.
이 형태의 프롬프트 자리의 내용을 표시합니다
규칙적인 패턴과 조합
최대 최대
최소값 분
최대 길이
유형 = "숫자"
= "이메일"을 입력
...

4.2 H5는 DOM에서 검증 동작을 제공한다

var validateState(验证状态对象) = DOM对象.validity; 
validateState.valueMissing
validateState.typeMismatch
我们可以借助下方的这些属性验证当前表单元素的验证状态，根据此状态可以去进行自定义操作。(自定义提示信息)
DOM对象.setCustomValidity(自定义提示信息);

여기에 그림 삽입 설명

// DOM对象属性和函数
$("input[type=submit]").click(function(){

    // alert(1);
    var emailEle = $("input[name=email]")[0];
    // 通过validity属性验证是否合法
    if(emailEle.validity.valueMissing){
        emailEle.setCustomValidity("邮箱不能为空！");
    }else if(emailEle.validity.patternMismatch){
        emailEle.setCustomValidity("邮箱格式非法！");
    }else{
        emailEle.setCustomValidity("");
    }

});

빠른 자기 수준의 언어 프로그래밍 자바 건조 노트 - 양식 유효성 검사