자바스크립트 양식 검증 encyclopedia_javascript 기술-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

자바스크립트 양식 검증 encyclopedia_javascript 기술

May 16, 2016 pm 03:45 PM

양식 유효성 검사

JavaScript로 검증하는 대표적인 폼 데이터는 다음과 같습니다.

1. 사용자가 양식에 필수 항목을 입력했습니까?

2. 사용자가 입력한 이메일 주소가 합법적인가요?

3. 사용자가 법적 날짜를 입력했나요?

4. 사용자가 숫자 필드에 텍스트를 입력했습니까?

사용자 이름과 비밀번호 확인 코드는 다음과 같습니다.

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;script&gt;
function validateForm()
{
 var username = document.forms["myForm"]["username"].value;
 var password = document.forms["myForm"]["password"].value;
 alert(username+" "+password);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name="myForm" action="" onSubmit=" return validateForm()" method="post"&gt;
用户名:&lt;input type="text" name="username"/&gt;&lt;br/&gt;
密码:&lt;input type="password" name="password"/&gt;&lt;br/&gt;
 &lt;input type="submit" value="提交"/&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

필수(또는 필수) 항목 확인:

다음 기능은 사용자가 양식에 필수(또는 필수) 항목을 입력했는지 확인하는 데 사용됩니다. 필수이거나 필수 필드가 비어 있으면 경고 상자가 나타나고 함수의 반환 값은 false입니다. 그렇지 않으면 함수의 반환 값이 true입니다(데이터에 문제가 없음을 의미).

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
 {alert(alerttxt);return false}
else {return true}
}
}

로그인 후 복사

HTML 양식과 코드는 다음과 같습니다.

&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
function validate_required(field,alerttxt)
{
with (field)
 {
 if (value==null||value=="")
 {alert(alerttxt);return false}
 else {return true}
 }
}
function validate_form(thisform)
{
with (thisform)
 {
 if (validate_required(email,"Email must be filled out!")==false)
 {email.focus();return false}
 }
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form action="submitpage.htm" onsubmit="return validate_form(this)" method="post"&gt;
Email: &lt;input type="text" name="email" size="30"&gt;
&lt;input type="submit" value="Submit"&gt; 
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

이메일 인증

아래 함수는 입력된 데이터가 이메일 주소의 기본 구문과 일치하는지 확인합니다.

즉, 입력 데이터에는 @ 기호와 마침표(.)가 포함되어야 합니다. 동시에 @는 이메일 주소의 첫 번째 문자가 될 수 없으며 @ 뒤에 마침표가 하나 이상 있어야 합니다:

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos&lt;1||dotpos-apos&lt;2) 
 {alert(alerttxt);return false}
else {return true}
}
}

로그인 후 복사

다음은 HTML 양식과 함께 전체 코드입니다.

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos&lt;1||dotpos-apos&lt;2) 
 {alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
 {email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>
</html>

로그인 후 복사

위 코드는 사용자 이름, 비밀번호, 필수 필드, 필수 옵션 및 이메일뿐만 아니라 양식의 코드도 모두가 자바스크립트 양식 확인을 배우는 데 도움이 되기를 바랍니다.

본 웹사이트의 성명

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