zoukankan      html  css  js  c++  java
  • Jquery学习笔记(9)--注册验证复习(未用到ajax)

    纯复习,在$(this).val()这里浪费了时间,val()只适合input里面的value值,如果是span等标签里包裹的文本要用text()!!

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>Document</title>
      6     <script src="jquery.js"></script>
      7     <style>
      8         table{
      9             /* 500px;*/
     10             height: 200px;
     11             border-collapse: collapse;
     12             border-color: #f00;
     13         }
     14         td{
     15             border: 1px solid #00f;
     16         }
     17         td:nth-child(1){
     18             width: 100px;
     19         }
     20         td:nth-child(2){
     21             width: 200px;
     22         }
     23         
     24         td:nth-child(3){
     25             border: 0px;
     26             display: none;
     27         }
     28     </style>
     29 </head>
     30 <body>
     31     <form id="form1" action="regist.php" method="get">
     32         <table >
     33             <tr>
     34                 <td>用户名</td>
     35                 <td><input type="text" name="username">
     36                 <!-- <span>hahahahah</span> -->
     37                 </td>
     38                 <td><span>用户名至少6位!</span></td>
     39                 
     40             </tr>
     41             <tr>
     42                 <td>密码</td>
     43                 <td><input type="text" name="password"></td>
     44                 <td><span>密码至少6位!</span></td>
     45             </tr>
     46             <tr>
     47                 <td>重复密码</td>
     48                 <td><input type="text" name="repassword"></td>
     49                 <td><span>两次密码不一致!</span></td>
     50             </tr>
     51             <tr>
     52                 <td>手机</td>
     53                 <td><input type="text" name="phone"></td>
     54                 <td><span>手机号格式不正确!</span></td>
     55             </tr>
     56             <tr>
     57                 <td>邮箱</td>
     58                 <td><input type="text" name="email"></td>
     59                 <td><span>邮箱格式不正确!</span></td>
     60             </tr>
     61             <tr>
     62                 <td colspan="2" align="center"><input type="submit" value="提交"></td>
     63             </tr>
     64 
     65         </table>
     66     </form>
     67 </body>
     68 <script>
     69     var check1=check2=check3=check4=check5=0;
     70     $('[name=username]').blur(function(){
     71         if ($(this).val().length<6) {
     72             $(this).parent().next().show();
     73             check1 = 0;
     74         }else{
     75             $(this).parent().next().hide();
     76             check1 = 1;
     77         }
     78     });
     79     $('[name=password]').blur(function(){
     80         if ($(this).val().length<6) {
     81             $(this).parent().next().show();
     82             check2 = 0;
     83         }else{
     84             $(this).parent().next().hide();
     85             check2 = 1;
     86         }
     87     });
     88     $('[name=repassword]').blur(function(){
     89         if ($(this).val()!=$('[name=password]').val()) {
     90             $(this).parent().next().show();
     91             check3 = 0;
     92         }else{
     93             $(this).parent().next().hide();
     94             check3 = 1;
     95         }
     96     });
     97     $('[name=phone]').blur(function(){
     98         if (!$(this).val().match(/^188d{8}$/)) {
     99             $(this).parent().next().show();
    100             check4 = 0;
    101         }else{
    102             $(this).parent().next().hide();
    103             check4 = 1;
    104         }
    105     });
    106     $('[name=email]').blur(function(){
    107         if (!$(this).val().match(/^w+@w+.com$/)) {
    108             $(this).parent().next().show();
    109             check5 = 0;
    110         }else{
    111             $(this).parent().next().hide();
    112             check5 = 1;
    113         }
    114     });
    115 
    116     $('#form1').submit(function(){
    117         $('input').blur();
    118         var sum = check1+check2+check3+check4+check5;
    119         if(sum!=5){
    120             return false;
    121         }
    122         
    123     });
    124 </script>
    125 </html>
  • 相关阅读:
    Arduino学习笔记10
    Arduino学习笔记07
    Arduino学习笔记6
    Arduino学习笔记5
    Arduino学习笔记4
    Arduino学习笔记3
    linux下库文件的编程
    学习编程语言究竟学什么
    Arduino学习笔记2---数字温度计
    Arduino学习笔记0---开发板的了解
  • 原文地址:https://www.cnblogs.com/Jacklovely/p/6240976.html
Copyright © 2011-2022 走看看