JavaScript 양식 유효성 검사
양식의 입력 상자, 드롭다운 상자 등은 사용자 입력을 받을 수 있으므로 JavaScript를 사용하여 양식을 조작하면 사용자가 입력한 내용을 얻거나 입력 상자에 새 내용을 설정할 수 있습니다.
HTML 양식의 입력 컨트롤에는 주로 다음 유형이 포함됩니다.
텍스트 상자, 해당 <input type="text">, , 텍스트를 입력하는 데 사용됨
라디오 버튼, 해당 < ;입력 ;type="radio">, 하나의 항목을 선택하는 데 사용됨
확인란, 해당 <input type="checkbox">, 여러 항목을 선택하는 데 사용됨
드롭다운; 상자에서 해당
숨겨진 텍스트이며 해당
JavaScript 양식 유효성 검사
JavaScript는 데이터가 서버로 전송되기 전에 HTML 양식에서 이러한 입력 데이터의 유효성을 검사하는 데 사용할 수 있습니다.
양식 데이터의 정확성을 확인하려면 종종 JavaScript가 필요합니다.
양식 데이터가 비어 있는지 확인하시겠습니까?
입력한 이메일 주소가 올바른지 확인하시겠습니까?
날짜가 올바르게 입력되었는지 확인하시나요?
양식 입력 내용이 숫자인지 확인하시나요?
다음 기능은 사용자가 양식에 필수(또는 필수) 항목을 입력했는지 확인하는 데 사용됩니다. 필수 필드 또는 필수 필드가 비어 있으면 경고 상자가 팝업되고 함수의 반환 값이 false이고, 그렇지 않으면 함수의 반환 값이 true입니다(데이터에 문제가 없음을 의미):
함수 CheckForm()
{
if (document.form.name.value.length == 0) {
alert("이름을 입력하세요!");
document.form.name.focus();
return false;
}
return true;
}
중국어/영어/숫자/이메일 주소 적법성 판단:
function isEnglish(name) //英文值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name. charCodeAt(i) > 128)
return false;
}
return true;
}
function isChina(name) //中文值检测
{
if(name.length == 0)
return false;
for (i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}
function isMail(name) // E -mail值检测
{
if(!isEnglish(name))
return false;
i = name.indexOf(" at ");
j = name dot lastIndexOf(" at ");
if(i == - 1)
return false;
if(i != j)
return false;
if(i == 이름 도트 길이)
return false;
return true;
}
function isNumber(name) //数值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charAt(i) < "0" || 이름. charAt(i) > "9")
return false;
}
return true;
}
function CheckForm()
{
if(!isMail(form.Email.value)) {
alert("您的电子邮件불합법!");
form.Email.focus();
return false;
}
if(!isEnglish(form.name.value)) {
alert("英文name불합법!");
form.name.focus();
return false;
}
if(!isChina(form.cnname.value)) {
alert("中文name不합법!");
form.cnname.focus();
false를 반환;
}
if(! isNumber(form.PublicZipCode.value)) {
alert("邮政编码불합법!");
form.PublicZipCode.focus();
return false;
}
return true;
}
![프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
