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

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

PHPz

풀어 주다： 2018-10-12 15:13:47

앞으로

1641명이 탐색했습니다.

1. 원리

입력 상자에 onblur 이벤트를 추가하여 양식을 확인합니다. 입력 상자가 포커스를 잃으면 js 함수가 호출되어 입력 값을 결정하고 문서를 작동합니다. innerHTML 속성을 통해 입력 상자 뒤의 내용을 변경하면 프롬프트가 표시됩니다.

마지막으로 form 태그에 onsubmit 이벤트를 추가하고, 등록 버튼을 클릭했을 때 js 함수를 호출하면 모든 입력 상자의 값이 요구 사항을 충족하는 경우에만 true가 반환되며, 양식이 제출됩니다. 그렇지 않으면 false를 반환하고 양식이 제출되지 않습니다.

2. 그림

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

3. 참고사항

js에서 정규식을 만들려면 "/^... $/" , ^는 처음부터 일치함을 의미하고, $는 마지막 문자와 일치함을 의미합니다. 예를 들어 var reg=/^w [@]w [.comn]{3,4}$/;

regular 표현식 w는 a-z, A-Z를 나타내며 0-9에는 밑줄도 포함됩니다.

일반적으로 일반 테스트 방법을 사용하여 문자열이 정규식과 일치하는지 확인합니다. 반환 값이 true이면 일치가 성공한 것입니다. false가 반환되면 일치가 실패합니다.

4. 구현 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用JavaScript完成表单的校验</title>
        <script>
            //校验用户名
            function checkName(){
                var name=document.getElementById("name").value;
                var nameSpan=document.getElementById("nameSpan")
                //正则表达式判断用户名
                var reg=/^\w+$/;
                if(name.length<1){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>用户名不能为空</font>"
                    }else if(name.length<=6){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>用户名要至少六位</font>"
                    }else if(!reg.test(name)){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>只能由字母数字下划线组成</font>"
                    }else{
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                        return true;
                    }
                }
            //校验密码
            function checkCode(){
                var code=document.getElementById("code").value;
                var codeSpan=document.getElementById("codeSpan")
                if(code==&#39;&#39;){
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>密码不能为空</font>"
                }else if(code.length<6){
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>密码至少六位</font>"
                }else{
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                    return true;
                }
            }
            //校验邮箱
            function checkEmail(){
                var email=document.getElementById("email").value;
                var emailSpan=document.getElementById("emailSpan")
                //用正则判断邮箱格式
                var reg=/^\w+[@]\w+[.comn]{3,4}$/;
                if(email==&#39;&#39;){
                        emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>邮箱不能为空</font>"
                }else if(!reg.test(email)){
                    emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>邮箱格式不正确</font>"
                }else{
                    emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                    return true;
                }
            }
            //校验所有信息，决定表单是否提交
            function checkForm(){
                if(checkName()&&checkCode()&&checkEmail()){
                    return true;
                }
                return false;
            }
        </script>
    </head>
    <body>
            <form id="regist" onsubmit="return checkForm()" action="http://www.baidu.com" method="get" style="margin-left: 520px;width: 400px;padding-left: 20px; height: 280px;border: 1px solid darkgray;">
                <h3>注册表单</h3>
                用户名：<input type="text" id="name" name="username" onblur="checkName()"/>
                    <span id="nameSpan" ></span><br/><br />
                 密码：<input type="password" id="code" name="password" onblur="checkCode()"/>
                    <span id="codeSpan"></span><br/><br />
                 邮箱：<input type="text" id="email" name="email" onblur="checkEmail()"/>
                    <span id="emailSpan"></span><br/><br />
                      <input type="submit" value="注册"/>
                 <input type="reset" value="重置"/>
            </form>
    </body>
</html>

로그인 후 복사

더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼

을 방문하세요.