注册表单验证

最新推荐文章于 2024-05-08 09:58:48 发布

hanzhao1213

最新推荐文章于 2024-05-08 09:58:48 发布

阅读量404

点赞数 1

本文链接：https://blog.csdn.net/han19911213/article/details/80429929

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           th{
               background-color: paleturquoise;
           }
           td{
               background-color: greenyellow;
           }
           h3{
               color: red;
           }
       </style>
       <script type="text/javascript" src="../js/jquery-1.8.2.min.js" ></script>
       <script type="text/javascript">
           $(function(){
           $("#add").click(function(){
               $("span").html("");
               //邮箱
               var email=$("#email").val();
               //姓名
               var name=$("#name").val();
               //密码
               var pwd=$("#pwd").val();
               //确认密码
               var qpwd=$("#qpwd").val();
               if(email.indexOf("@")!=-1){
                   //如果正确执行这个
                   $("#emailspan").html("√");
               }else{
                   //否则执行这个
                   $("#emailspan").html("×");
                   return;
               }
               if(name.length>=4||name.length>=20){
                   $("#namespan").html("用户名正确");
               }else{
                   $("#namespan").html("用户名错误");
                   return;
               }
               if(pwd.length>=6){
                   $("#pwdspan").html("用户名密码可用");
               }else{
                   $("#pwdspan").html("密码不可用");
                   return;
               }
               if(qpwd==pwd){
                   $("#qpwdspan").html("用户密码正确");
               }else{
                   $("#qpwdspan").html("两次密码不一样");
                   return;
               }
               //注册成功弹框
               alert("表单符合验证");
           })
           })
       </script>
   </head>
   <body>
       <h1>注册表单验证</h1>
       <h3>以下均为必填项</h3>
       
       <table border="1">
           <tr>
               
               <th>请填写您的Email地址:</th>
               
               <td><input type="email" id="email"><span id="emailspan"></span></td>
           </tr>
           <tr>
               <th>设置您在当当网的昵称:</th>
               <td><input type="name" id="name"><span id="namespan"></span></td>
           </tr>
           <tr>
               <th>设置密码:</th>
               <td><input type="pwd" id="pwd"><span id="pwdspan"></span></td>
           </tr>
           <tr>
               <th>再次输入您设置的密码:</th>
               <td><input type="qpwd" id="qpwd"><span id="qpwdspan"></span></td>
           </tr>
           <tr>
               
               <th colspan="2" align="center">
                   
                   <button id="add">注册</button>
               </th>
           </tr>
       </table>

   </body>
</html>

hanzhao1213

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
注册表单验证

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; th{ background-color:
复制链接

扫一扫