JavaScript로 등록 양식 확인을 구현하는 방법에 대한 분석 예(그림)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript로 등록 양식 확인을 구현하는 방법에 대한 분석 예(그림)

黄舟

Jul 24, 2017 am 10:22 AM

javascriptjs형태

说明：在点击提交时进行表单校验，具体要求如下：

1）用户名为3~16个字符，且不能包含”@”和”#”字符；

2）密码和校验密码必须一致，且长度在8个字符到16个字符；

3）兴趣爱好至少选择一项；

4）政治面貌必须为党员；

5) 所有输入符合要求后提示“注册成功”。

HTML代码为：在（register.html中）

<!DOCTYPE html><html lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--<meta charset="UTF-8">-->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/myStyle.css">
    <title>用户注册</title></head><body><p class="container">

    <form class="form-horizontal"  role="form">
        <p class="form-group">
        <p class="col-sm-6" >
            <legend class="title" >用户注册信息</legend>
        </p>
        </p>

        <p class="form-group">
            <label for="user-name" class="col-sm-2 control-label">用户名：</label>
            <p class="col-sm-3">
                <input type="text" class="form-control" id="user-name" onblur="checkUserName()"
                       placeholder="请输入用户名"/>
            </p>
            <p class="col-sm-2">
                <span id="nameInfo"></span>
            </p>
        </p>
        <p class="form-group">
            <label for="password" class="col-sm-2 control-label">密码：</label>
            <p class="col-sm-3">
                <input type="password" class="form-control" id="password"  onblur="checkRepassword()"
                       placeholder="请输入密码"/>
            </p>
            <p class="col-sm-2">
                <span id="passwordInfo"></span>
            </p>

        </p>
        <p class="form-group">
            <label for="repassword" class="col-sm-2 control-label">校验密码：</label>
            <p class="col-sm-3">
                <input type="password" class="form-control" id="repassword" onblur="checkRepassword()"
                       placeholder="请输入校验密码">
            </p>
            <p class="col-sm-2">
                <span id="repasswordInfo"></span>
            </p>
        </p>
        <p class="form-group">
            <label  for="nativeplace" class="col-sm-2 control-label">籍贯：</label>
            <p class="col-sm-2">
                <select id="nativeplace">
                    <option value="zhejiang">浙江</option>
                    <option value="fujian">福建</option>
                    <option value="anhui">安徽</option>
                    <option value="sichuan">四川</option>
                </select>
            </p>

        </p>
        <p class="form-group">
            <label class="col-sm-2 control-label">兴趣爱好：</label>
            <p class="col-sm-6" >
                <p onblur="checkHobby()">
                <!--通过将 .checkbox-inline 或 . 类应用到一系列的多选框或单选框空间上，可以使这些控件排列在一行-->
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox1" name="hobby" value="basketball">篮球                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox2" name="hobby" value="soccer">足球                </label>
                <label class="checkbox-inline">
                   <input type="checkbox" id="inlineCheckbox3" name="hobby"  value="writing" checked="checked">书法                </label>
                <label class="checkbox-inline">
                   <input type="checkbox" id="inlineCheckbox4"  name="hobby" value="music">音乐                </label>
                <br/>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox5" name="hobby" value="painting">绘画                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox6" name="hobby" value="free-combat">散打                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox7" name="hobby" value="yoga" >瑜伽                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox8" name="hobby" value="other">其他                </label>
                <span id="hobbyInfo"></span>
                    </p>
            </p>
       </p>
        <p class="form-group" onblur="checkStatus()">
            <label  class="col-sm-2 control-label">政治面貌：</label>
            <p class="col-sm-4">
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" value="党员" checked="checked">党员                </label>
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" value="团员" checked="" >团员                </label>
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" value="群众" checked="">群众                </label>
            </p>
        </p>

        <p class="form-group">
            <p class="col-sm-offset-2 col-sm-10">
                <button type="submit" id="submit" class="btn btn-success" onclick="validateForm()">提交</button>
                <button type="submit" class="btn btn-warning">重置</button>
                <br/>
                <br/>
                <label><a href="#">注册帮助信息请点击这里</a></label>
            </p>
        </p>
        </form>
        </p>
        <script type="text/javascript" src="../js/jquery-2.1.4.min.js">
        </script>
        <script type="text/javascript" src="../js/bootstrap.min.js">
        </script>
        <script type="text/javascript" src="../js/register.js">
        </script>
        </body>
        </html>

CSS代码为：（在myStyle.css中）

form{
  background-color: #fafdec;

}legend{
   position: relative;
    text-align: center;
    height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 2px;
    background-color: #e9e9e9;
    font-family: Consolas;
    font-size: 1.5em;
}label{
    align-content: center;
    text-align: center;
    font-size: 1.1em;
}button{
    margin-right: 18px;
}.text{
    width: 500px;
    height: 100px;
}.col-sm-2 span{
    color:red;
}

JavaScript代码为：（封装在register.js文件中）

/* Created by Microsoft on 2016/7/30.*/$(document).ready(function () {   
function validateForm(){     
if(checkUserName()&&checkPassword()&&checkRepassword()&&checkHobby()&&checkStatus()){
         alert("恭喜您！注册成功！");
     }
}
});//验证用户名（为3~16个字符，且不能包含”@”和”#”字符）function checkUserName(){    
var name=document.getElementById("user-name").value.trim();    
var nameRegex=/^[^@#]{3,16}$/;    
if(!nameRegex.test(name)){
        document.getElementById("nameInfo").innerHTML="用户名为3~16个字符，且不能包含”@”和”#”字符";
    }else{
        document.getElementById("nameInfo").innerHTML="";        
        return true;
    }

}//验证密码（长度在8个字符到16个字符）function checkPassword(){    
var password=document.getElementById("password").value.trim();    
//var password=$("#password").value;
    $("#passwordInfo").innerHTML="";    //密码长度在8个字符到16个字符，由字母、数字和".""-""_""@""#""$"组成
    //var passwordRegex=/^[0-9A-Za-z.\-\_\@\#\$]{8,16}$/;
    //密码长度在8个字符到16个字符，由字母、数字和"_"组成
    var passwordRegex=/^[0-9A-Za-z_]\w{7,15}$/;    
    if(!passwordRegex.test(password)){
        document.getElementById("passwordInfo").innerHTML="密码长度必须在8个字符到16个字符之间";
    }else{
        document.getElementById("passwordInfo").innerHTML="";
    }
}//验证校验密码（和上面密码必须一致）function checkRepassword(){    
var repassword=document.getElementById("repassword").value.trim();    
//校验密码和上面密码必须一致
    if(repassword!==password){
        document.getElementById("repasswordInfo").innerHTML="两次输入的密码不一致";
    }else if(repassword==password){
        document.getElementById("repasswordInfo").innerHTML="";
    }
}//验证兴趣爱好（至少选择一项）即，多选框非空function checkHobby(){    
var textbox=document.getElementsByName("hobby");
    $(&#39;input[type=checkbox]&#39;).click(function(){        
    if($("input[name=&#39;hobby&#39;]:checked").length!=0 ) {            
    return true;
        }
    });
}//验证政治面貌（必须为党员）function checkStatus(){
    $(function(){
        $("#submit").click(function(){            
        var val=$(&#39;input:radio[name="inlineRadioOptions"]:checked&#39;).val();            
        if(val==null){
                alert("请选中一个!");                
                return false;
            }            
            else if(val=="党员"){                
            return true;
            }
        });
    });
}

效果截图：

总体界面为：

1）用户名为3~16个字符，且不能包含”@”和”#”字符；

2）密码和校验密码必须一致，且长度在8个字符到16个字符；

3) 验证符合要求后提示“注册成功”

위 내용은 JavaScript로 등록 양식 확인을 구현하는 방법에 대한 분석 예(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는