gongchengketang
  • Kvera 发布于2016年08月14日 21:08
    【作业】JS-作业3-Kvera
    研究了一天,最终也没实现实时判断密码一致的功能,按照我的思路,在确认密码的输入框使用onkeyup的话,一输入就会提示密码不一致,
    实在搞不懂怎么实现实时判断T_T……求教!!
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.         <title>js作业3</title>
    5.         <meta http-equiv="content-type" content="text/html;charset=utf-8">
    6.         <style type="text/css">
    7.                 form {
    8.                         font-size: 14px;
    9.                         line-height: 1.5em;
    10.                         width: 400px;
    11.                         margin: 10px auto;
    12.                         margin-top: 125px;
    13.                         padding: 30px 20px 20px 40px;
    14.                         background-color: #ddd;
    15.                         border-radius: 15px;
    16.                 }
    17.                 button {
    18.                         width: 80px;
    19.                         height: 25px;
    20.                         margin-left: 120px;
    21.                         margin-top: 20px;
    22.                 }
    23.                 .align {
    24.                         text-align: right;
    25.                 }
    26.                 input {
    27.                         width: 220px;
    28.                         height: 26px;
    29.                 }
    30.                 table {
    31.                         line-height: 3.8em;
    32.                 }
    33.                 span {
    34.                         color: #ee0909;
    35.                         line-height: 1em;
    36.                 }
    37.         </style>
    38. </head>
    39. <body>
    40.         <form>
    41.                 <table>
    42.                         <tr>
    43.                                 <td class="align">昵称:</td>
    44.                                 <td>
    45.                                         <input id="nickname" type="text" name="nickname" placeholder="请设置昵称"
    46.                                         onfocus="clearNameWarning()">
    47.                                 </td>
    48.                                 <td><span id="warning_name"></span></td>
    49.                         </tr>
    50.                         <tr>
    51.                                 <td class="align">邮箱:</td>
    52.                                 <td>
    53.                                         <input id="email" type="text" name="email" placeholder="请设置注册邮箱"
    54.                                         onblur="checkEmail()"onfocus="clearEmailWarning()">
    55.                                 </td>
    56.                                 <td><span id="warning_email"></span></td>
    57.                         </tr>
    58.                         <tr>
    59.                                 <td class="align">密码:</td>
    60.                                 <td>
    61.                                         <input id="password" type="password" name="password" placeholder="请输入登录密码"
    62.                                         onfocus="clearPswWarning()">
    63.                                 </td>
    64.                                 <td><span id="warning_pass"></span></td>
    65.                         </tr>
    66.                         <tr>
    67.                                 <td>确认密码:</td>
    68.                                 <td>
    69.                                         <input id="check_password" type="password" name="check_password" placeholder="请再次输入密码"
    70.                                         onfocus="clearCheckPswWarning()">
    71.                                 </td>
    72.                                 <td><span id="warning_check_pass"></span></td>
    73.                         </tr>
    74.                 </table>
    75.                         <button type="button" onclick="checkInformation();">注册</button>
    76.         </form>

    77.         <script type="text/javascript">
    78.                 // 修改输入信息时清除错误提示
    79.                 function clearNameWarning()
    80.                 {
    81.                         if( warning_name !== '') warning_name.innerHTML = '';
    82.                 }
    83.                 function clearEmailWarning()
    84.                 {
    85.                         if( warning_email !== '') warning_email.innerHTML = '';
    86.                 }
    87.                 function clearPswWarning()
    88.                 {
    89.                         if( warning_pass !== '') warning_pass.innerHTML = '';
    90.                 }
    91.                 function clearCheckPswWarning()
    92.                 {
    93.                         if( warning_check_pass !== '') warning_check_pass.innerHTML = '';
    94.                 }
    95.                 // 验证昵称
    96.                 function checkNickname()
    97.                 {
    98.                         var nickname = document.getElementById('nickname').value;
    99.                         if( nickname === '' )
    100.                         {
    101.                                 var warning_name = document.getElementById('warning_name');
    102.                                 warning_name.innerHTML = '没有输入昵称';
    103.                         }
    104.                         else return 1;               
    105.                 }
    106.                 // 验证邮箱
    107.                 function checkEmail()
    108.                 {
    109.                         var email = document.getElementById('email').value;
    110.                         var warning_email = document.getElementById('warning_email');
    111.                         if( email === '' )
    112.                         {                               
    113.                                 warning_email.innerHTML = '没有输入邮箱';
    114.                         }
    115.                         else if(!(/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(email)))
    116.                         {
    117.                                 warning_email.innerHTML = '邮箱格式不正确';
    118.                         }
    119.                         else return 1;
    120.                 }
    121.                 // 验证密码
    122.                 function checkPassword()
    123.                 {
    124.                         var password = document.getElementById('password').value;
    125.                         var check_password = document.getElementById('check_password').value;
    126.                         var warning_pass = document.getElementById('warning_pass');
    127.                         var warning_check_pass = document.getElementById('warning_check_pass');
    128.                         if( password === '')
    129.                         {
    130.                                 warning_pass.innerHTML = '没有输入密码';
    131.                         }
    132.                         else if( check_password ==='' )
    133.                         {
    134.                                 warning_check_pass.innerHTML = '没有确认密码';
    135.                         }
    136.                         else if( (password !== '') & (check_password !== ''))
    137.                         {
    138.                                 if( password !== check_password )
    139.                                 {
    140.                                         warning_check_pass.innerHTML = '两次密码不一致';
    141.                                 }
    142.                                 else if( password === check_password )  return 1;               
    143.                         }       
    144.                 }
    145.                 // 点击注册按钮时验证所有信息
    146.                 function checkInformation()
    147.                 {
    148.                         checkNickname();
    149.                         checkEmail();
    150.                         checkPassword();
    151.                         if((checkNickname())&(checkEmail())&(checkPassword()))
    152.                         {
    153.                                 alert('所有输入信息正确!');
    154.                         }
    155.                 }
    156.         </script>
    157. </body>
    158. </html>
    复制代码

    6个回答
  • Kvera 发表于2016-08-14 21:10
    还有一个问题,那个简历的作业能不能发到老师的邮箱啊?总觉得这个东西还是比较私人的
  • Kvera 发表于2016-08-15 11:11
    我终于发现自己有个小地方变量名写错了,导致实时判断的代码一直不对T_T……自己实在太粗心了
    在确认密码的输入框里面加入onkeyup=“checkPsw()”
    1. function checkPsw()
    2.                 {
    3.                         var password = document.getElementById('password').value;
    4.                         var check_password = document.getElementById('check_password').value;
    5.                         var warning_check_pass = document.getElementById('warning_check_pass');
    6.                         if( password !== check_password )
    7.                                 {
    8.                                         warning_check_pass.innerHTML = '两次密码不一致';
    9.                                 }
    10.                                 else warning_check_pass.innerHTML = '';
    11.                 }
    复制代码
  • Kvera 发表于2016-08-15 11:12
    完整的代码如下:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.         <title>js作业3</title>
    5.         <meta http-equiv="content-type" content="text/html;charset=utf-8">
    6.         <style type="text/css">
    7.                 form {
    8.                         font-size: 14px;
    9.                         line-height: 1.5em;
    10.                         width: 400px;
    11.                         margin: 10px auto;
    12.                         margin-top: 125px;
    13.                         padding: 30px 20px 20px 40px;
    14.                         background-color: #ddd;
    15.                         border-radius: 15px;
    16.                 }
    17.                 button {
    18.                         width: 80px;
    19.                         height: 25px;
    20.                         margin-left: 120px;
    21.                         margin-top: 20px;
    22.                 }
    23.                 .align {
    24.                         text-align: right;
    25.                 }
    26.                 input {
    27.                         width: 220px;
    28.                         height: 26px;
    29.                 }
    30.                 table {
    31.                         line-height: 3.8em;
    32.                 }
    33.                 span {
    34.                         color: #ee0909;
    35.                         line-height: 1em;
    36.                 }
    37.         </style>
    38. </head>
    39. <body>
    40.         <form>
    41.                 <table>
    42.                         <tr>
    43.                                 <td class="align">昵称:</td>
    44.                                 <td>
    45.                                         <input id="nickname" type="text" name="nickname" placeholder="请设置昵称"
    46.                                         onfocus="clearNameWarning()">
    47.                                 </td>
    48.                                 <td><span id="warning_name"></span></td>
    49.                         </tr>
    50.                         <tr>
    51.                                 <td class="align">邮箱:</td>
    52.                                 <td>
    53.                                         <input id="email" type="text" name="email" placeholder="请设置注册邮箱"
    54.                                         onblur="checkEmail()"onfocus="clearEmailWarning()">
    55.                                 </td>
    56.                                 <td><span id="warning_email"></span></td>
    57.                         </tr>
    58.                         <tr>
    59.                                 <td class="align">密码:</td>
    60.                                 <td>
    61.                                         <input id="password" type="password" name="password" placeholder="请输入登录密码"
    62.                                         onfocus="clearPswWarning()">
    63.                                 </td>
    64.                                 <td><span id="warning_pass"></span></td>
    65.                         </tr>
    66.                         <tr>
    67.                                 <td>确认密码:</td>
    68.                                 <td>
    69.                                         <input id="check_password" type="password" name="check_password" placeholder="请再次输入密码"
    70.                                         onfocus="clearCheckPswWarning()" onkeyup="checkPsw()">
    71.                                 </td>
    72.                                 <td><span id="warning_check_pass"></span></td>
    73.                         </tr>
    74.                 </table>
    75.                         <button type="button" onclick="checkInformation();">注册</button>
    76.         </form>

    77.         <script type="text/javascript">
    78.                 // 修改输入信息时清除错误提示
    79.                 function clearNameWarning()
    80.                 {
    81.                         if( warning_name !== '') warning_name.innerHTML = '';
    82.                 }
    83.                 function clearEmailWarning()
    84.                 {
    85.                         if( warning_email !== '') warning_email.innerHTML = '';
    86.                 }
    87.                 function clearPswWarning()
    88.                 {
    89.                         if( warning_pass !== '') warning_pass.innerHTML = '';
    90.                 }
    91.                 function clearCheckPswWarning()
    92.                 {
    93.                         if( warning_check_pass !== '') warning_check_pass.innerHTML = '';
    94.                 }
    95.                 // 验证昵称
    96.                 function checkNickname()
    97.                 {
    98.                         var nickname = document.getElementById('nickname').value;
    99.                         if( nickname === '' )
    100.                         {
    101.                                 var warning_name = document.getElementById('warning_name');
    102.                                 warning_name.innerHTML = '没有输入昵称';
    103.                         }
    104.                         else return 1;               
    105.                 }
    106.                 // 验证邮箱
    107.                 function checkEmail()
    108.                 {
    109.                         var email = document.getElementById('email').value;
    110.                         var warning_email = document.getElementById('warning_email');
    111.                         if( email === '' )
    112.                         {                               
    113.                                 warning_email.innerHTML = '没有输入邮箱';
    114.                         }
    115.                         else if(!(/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(email)))
    116.                         {
    117.                                 warning_email.innerHTML = '邮箱格式不正确';
    118.                         }
    119.                         else return 1;
    120.                 }
    121.                 // 验证密码
    122.                 function checkPassword()
    123.                 {
    124.                         var password = document.getElementById('password').value;
    125.                         var check_password = document.getElementById('check_password').value;
    126.                         var warning_pass = document.getElementById('warning_pass');
    127.                         var warning_check_pass = document.getElementById('warning_check_pass');
    128.                         if( password === '')
    129.                         {
    130.                                 warning_pass.innerHTML = '没有输入密码';
    131.                         }
    132.                         else if( check_password ==='' )
    133.                         {
    134.                                 warning_check_pass.innerHTML = '没有确认密码';
    135.                         }
    136.                         else if( (password !== '') & (check_password !== ''))
    137.                         {
    138.                                 if( password !== check_password )
    139.                                 {
    140.                                         warning_check_pass.innerHTML = '两次密码不一致';
    141.                                 }
    142.                                 else if( password === check_password )  return 1;               
    143.                         }       
    144.                 }
    145.                 function checkPsw()
    146.                 {
    147.                         var password = document.getElementById('password').value;
    148.                         var check_password = document.getElementById('check_password').value;
    149.                         var warning_check_pass = document.getElementById('warning_check_pass');
    150.                         if( password !== check_password )
    151.                                 {
    152.                                         warning_check_pass.innerHTML = '两次密码不一致';
    153.                                 }
    154.                                 else warning_check_pass.innerHTML = '';
    155.                 }
    156.                 // 点击注册按钮时验证所有信息
    157.                 function checkInformation()
    158.                 {
    159.                         checkNickname();
    160.                         checkEmail();
    161.                         checkPassword();
    162.                         if((checkNickname())&(checkEmail())&(checkPassword()))
    163.                         {
    164.                                 alert('所有输入信息正确!');
    165.                         }
    166.                 }
    167.         </script>
    168. </body>
    169. </html>
    复制代码
  • 牛小k 发表于2016-08-15 15:00
    Kvera 发表于 2016-8-14 21:10
    还有一个问题,那个简历的作业能不能发到老师的邮箱啊?总觉得这个东西还是比较私人的 ...

    没问题,你提了一个很好的建议,我会修改作业要求,发至我的邮箱

    我的邮箱:8127五一一一四@qq.com   (请将中文数字换成阿拉伯数字)
  • 牛小k 发表于2016-08-15 15:27
    完成作业很好,能考虑到清除错误提示很不错,有一些小问题,如下:

    1 clearNameWarning方法里,直接使用了warning_name,这里你没有声明warning_name,因为你的html里有id为warning_name的元素,所以默认warning_name相当于<span id="warning_name"></span>,那你代码里的if判断就没有意义了,因为warning_name永远不会为空。只要focus的时候,直接清空错误提示就可以了。
    声明变量是好习惯,还是通过var 变量名 =  document.getElementById等等来声明下,其他人看你的代码,可读性也会更好

    2 如果我先输入确认密码,之后再输入密码,即使两次输入一样,但是依然会有错误提示,如图:

    D726223B-8577-41BE-9E6C-DE7D01110B20.png (31.91 KB, 下载次数: 0)

    下载附件

    2016-8-15 15:22 上传


    这里是一个可以小优化的地方,如果去实习的话,你的mentor一定会让你把这个问题改了的
  • Kvera 发表于2016-08-15 16:10
    谢谢老师的耐心查看代码
    1、我以后会注意声明变量,增加代码的可读性~
    2、在第一次密码输入的input标签里也加入了onkeyup事件,解决了您所说的问题~
      
上一页 第1页/共32页 下一页
社区VIP账号 做作业巩固知识 拿6k以上offer