등록 페이지에서 JavaScript로 양식 확인을 완료하는 예-JS 튜토리얼-php.cn

다음 편집기는 등록 페이지양식 확인의 JavaScript 완성 예를 제공합니다. 에디터가 꽤 괜찮다고 생각해서 지금 js 소스코드를 공유해서 참고용으로 올려드리겠습니다. JavaScript에 관심이 있다면 편집자를 따라 살펴보세요

1. 단계 분석

1단계: 이벤트를 결정하고(onsubmit) 함수를 바인딩합니다

2단계: 다음을 작성합니다. 기능 (사용자가 입력한 데이터를 가져옵니다 <데이터를 가져올 때 지정된 위치에 ID를 정의해야 합니다>)

3단계: 사용자가 입력한 데이터를 판단합니다

4단계: 데이터가 합법적입니다( 양식을 제출하도록 하세요)

5단계: 데이터가 불법입니다(오류 메시지를 표시하고 양식이 제출되지 않도록 방지)

질문: 양식 제출을 제어하는 방법은 무엇입니까?

제출 시 이벤트 정보: 일반적으로 양식 제출에 사용되므로 함수 정의 시 반환 값을 제공해야 합니다.

onsubmit = return checkForm()

2. 등록 페이지 양식 확인을 완료하세요

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>注册页面</title>
  <script>
   function checkForm(){
    //alert("aa");
    
    /**校验用户名*/
    //1.获取用户输入的数据
    var uValue=document.getElementById("user").value;
    //alert(uValue);
    if(uValue==""){
     //2.给出错误提示信息
     alert("用户名不能为空");
     return false;
    }
    
    /**校验密码*/
    var pValue=document.getElementById("password").value;
    if(pValue==""){     //注意空的表示方法
     alert("密码不能为空");
     return false;
    }
     
    /** 校验确认密码*/
    var rpValue=document.getElementById("repassword").value;
    if(rpValue!=pValue){
     alert("两次密码输入不一致！");
     return false;
    }
    
    /**校验邮箱*/
    var eValue=document.getElementById("email").value;
    if(！/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
     alert("邮箱格式不正确！");
    }
   }
  </script>
 </head>
 <body>
  <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
   
   <!--1.logo部分-->
   <tr>
    <td>
     <!--嵌套一个一行三列的表格-->
     <table border="1px" width="100%">
      <tr height="50px">
       <td width="33.3%">
        <img src="../img/logo2.png" height="47px" />
       </td>
       <td width="33.3%">
        <img src="../img/header.png" height="47px"/>
       </td>
       <td width="33.3%">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >购物车</a>
       </td>
      </tr>
     </table>
    </td>
   </tr>
   
   <!--2.导航栏部分-->
   <tr height="50px" >
    <td bgcolor="black">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font size="3" color="white">首页</font></a>           
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">手机数码</font></a>        
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">电脑办公</font></a>       
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">鞋靴箱包</font></a>       
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font color="white">家用电器</font></a>
    </td>
   </tr>
   
   <!--3.注册表单-->
   <tr>
    <td height="600px" background="../img/regist_bg.jpg">
     <!--嵌套一个十行二列的表格-->
     <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
     <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
      <tr height="40px">
       <td colspan="2">
        <font size="4">会员注册</font>   USER REGISTER
       </td>
      </tr>
      <tr>
       <td>用户名</td>
       <td>
        <input type="text" name="user" size="35px" id="user"/>
       </td>
      </tr>
      <tr>
       <td>密码</td>
       <td>
        <input type="password" name="password" size="35px" id="password"/>
       </td>
      </tr>
      <tr>
       <td>确认密码</td>
       <td>
        <input type="password" name="repassword" size="35px" id="repassword"/>
       </td>
      </tr>
      <tr>
       <td>E-mail</td>
       <td>
        <input type="text" name="e-mail" size="35px" id="email"/>
       </td>
      </tr>
      <tr>
       <td>姓名</td>
       <td>
        <input type="text" name="username" size="35px"/>
       </td>
      </tr>
      <tr>
       <td>性别</td>
       <td>
        <input type="radio" name="sex" value="男"/>男
        <input type="radio" name="sex" value="女"/>女
       </td>
      </tr>
      <tr>
       <td>出生日期</td>
       <td>
        <input type="text" name="birthday" size="35px"/>
       </td>
      </tr>
      <tr>
       <td>验证码</td>
       <td>
        <input type="text" name="yzm" />
        <img src="../img/yanzhengma.png" />
       </td>
      </tr>
      <tr align="center">
       <td colspan="2">
        <input type="submit" value="注册" />
       </td>
      </tr>
     </table>
     </form>
    </td>
   </tr>
   
   <!--4.广告图片-->
   <tr>
    <td>
     <img src="../img/footer.jpg" width="100%"/>
    </td>
   </tr>
   
   <!--5.友情链接和版权信息-->
   <tr>
    <td align="center">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>关于我们</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>联系我们</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>招贤纳士</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>法律声明</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>友情链接</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>支付方式</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>配送方式</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>服务声明</font></a>
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><font>广告声明</font></a>
     <p>
      Copyright © 2005-2016 hh商城 版权所有 
     </p>
    </td>
   </tr>
  </table>
 </body>
</html>

로그인 후 복사

인증 및 확인 비밀번호 부분에 정규식을 사용하세요. (기억할 필요가 없으며 필요할 때 문서를 찾아보세요)

정규식.test(검사 객체)는 조건을 만족하면 true이고, 만족하지 않으면 false입니다.

등록 페이지에서 양식 확인을 완료하기 위해 JavaScript를 사용하는 위의 예는 편집자가 공유한 모든 내용이 참고가 되기를 바라며, PHP 중국어 웹사이트를 지원해 주시길 바랍니다.