양식 유효성 검사에 JavaScript를 사용하는 방법-JS 튜토리얼-php.cn

양식 유효성 검사에 JavaScript를 사용하는 방법

一个新手

풀어 주다： 2017-09-14 10:17:50

원래의

1614명이 탐색했습니다.

1. 데이터 유효성 및 보안 확인. 3단계 검증.

1. 클라이언트 js 스크립트 검증
2. 서버 측 Java-servlet 서버 언어 검증
3. 데이터베이스 데이터베이스 제약 조건

2. 제출 버튼을 클릭하면 양식 요소의 해당 이벤트가 트리거됩니다. (type="submit")

onsubmit은 true 또는 false 반환 값을 받습니다.

는 현재 양식을 제출하려면 true를 반환하고,
는 false를 반환하고 양식을 제출하지 않습니다.

3. 문자열 개체.

문자열 객체의 메서드: String object.Method name();

일반적인 메서드:
toLowerCase() 문자열을 소문자로 변환
toUpperCase() 문자열을 대문자로 변환
charAt( index) 지정된 위치의 문자
indexOf(string,index) 지정된 문자열이 처음 나타나는 위치를 찾습니다.
substring(zindex1.index2) 지정된 인덱스 index1과 index2 사이의 인덱스를 포함하여 문자열을 반환합니다. 문자를 제외하고 index1에 해당하는 문자 index2에 해당

이메일 형식 확인:

1. getElementById()를 사용하여 Email 값을 가져옵니다.
문자열 메소드 indexOf()를 사용하여 Email 값에 "@" 및 " ." 기호.
함수 반환 값이 true인지 false인지에 따라 양식을 제출할지 결정합니다.
```
var mail=document.getElementById("email").value;
if(mail.indexOf("@")==-1){
  alert("Email格式不正确\n必须包含@");
   return false;   
}
```
로그인 후 복사

2. String 개체의 길이 속성을 사용하여 비밀번호 길이를 확인합니다.

var pwd=document.getElementById("pwd").value;
if(pwd.length<6){
      alert("密码必须等于或大于6个字符");
      return false; 
}

로그인 후 복사

3. 두 번 입력한 비밀번호는 일치합니다

var repwd=document.getElementById("repwd").value;
if(pwd!=repwd){
     alert("两次输入的密码不一致");
     return false;   
}

로그인 후 복사

4. 길이 속성을 사용하여 텍스트의 길이를 가져오고 for 루프 및 substring() 메서드를 사용하여 개별 문자를 순서대로 자르고 각 문자가 숫자인지 확인합니다
```
var user=document.getElementById("user").value;
    for(var i=0;i<user.length;i++){
    var j=user.substring(i,i+1)
    if(isNaN(j)==false){
       alert("姓名中不能包含数字");
       return false;   
    }
}
```
로그인 후 복사

5. 텍스트 상자 개체의 속성, 메서드 및 이벤트

이벤트:
onblur는 커서가 텍스트 상자를 떠날 때 포커스를 잃습니다
onfocus는 포커스를 얻고 커서가 텍스트 상자에 들어갈 때 트리거됩니다
onkeypress 키보드 키를 눌렀다가 뗐다
메서드:
blur() 텍스트 필드에서 포커스를 제거합니다
focus() 텍스트 필드에 포커스를 설정합니다. 즉, 마우스 커서를 가져옵니다.
select()

속성의 텍스트 필드 내용:

1. 텍스트 상자의 초기 내용을 지우고 테두리를 빨간색으로 설정합니다.

function clearText(){
    var mail=document.getElementById("email");
    if(mail.value=="请输入正确的电子邮箱"){
    mail.value="";
    mail.style.borderColor="#ff0000";
    }
}
……
    <td>Email：<input id="email" type="text"  class="inputs" value="请输入正确的电子邮箱" onfocus="clearText()"/></td>
  </tr>

로그인 후 복사

2. 사용자가 잘못된 이메일 주소를 입력하면 이메일 텍스트 상자에 내용이 표시됩니다. 자동으로 선택되고 강조 표시되며 사용자에게 다시 입력하라는 메시지가 표시됩니다

if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
    alert("Email格式不正确\n必须包含符号@和.");
    document.getElementById("email").select();
    return false;
}

로그인 후 복사

3. 이메일을 비워둘 수 없다는 메시지를 표시합니다

function checkEmail(){
    var mail= document.getElementById ("email");
    var pID= document.getElementById ("pEmail");
    pID.innerHTML="";
    if(mail.value==""){
         pID.innerHTML="Email不能为空";
         return false;
    }
}
……
<input id="email" type="text" class="inputs"  onblur="checkEmail()"/>
<p class="red" id="pEmail"></p>

로그인 후 복사