JavaScript之注册用户

亦凉 2021-05-03 05:47 553阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>注册</title>
        <style type="text/css">
           table{ 
                border: 1px solid gray;
                width: 800px;
                border-collapse: collapse;
            }
            table th,td{ 
             border: 1px solid gray;
             text-align: center;
            }
        </style>
        <script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
          $(function(){ 
              function valid(){ 
                  //val() 方法返回或设置被选元素的值。
                  //如果使用原生js 那就是document.forms["regForm"].username
                  //用户
                  if($("input[name='username']").val().trim()==""){ 
                    $("input[name='username']").parent().next().html("用户名不能为空");
                    return false;
                  }
    
     
                  //密码
                  var passreg=/^[a-zA-z]\w{5,}/;
                  if(!passreg.test($("input[name='password']").val().trim())){ //测试一下，如果正确返回ture,继续执行,不正确再取反条件为真，就报错误信息
                    $("input[name='password']").parent().next().html("密码至少6位,且以字母开头");
                      return false;
                  }
    
                  //邮箱这种特殊格式，必须使用正则表达式
                  var emailReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                  if(!emailReg.test($("input[name='email']").val().trim())){ //测试一下，如果正确返回ture,继续执行,不正确再取反条件为真，就报错误信息
                    $("input[name='email']").parent().next().html("邮箱格式错误");
                      return false;
                  }
                 
                  //性别
                  if($("input[name='gender']:checked").length==0){ 
                    $("input[name='gender']").parent().next().html("请选择一个");
                      return false;
                  }
                  
                  //身份证号
                  var idcardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                  if(!idcardReg.test($("input[name='idNumber']").val())){ 
                      $("input[name='idNumber']").parent().next().html("请输入有效的身份证号");
                      return false;
                  }
                  /*//js默认的数字验证方式 isNaN() if( isNaN($("input[name='age']").val())) { $("input[name='age']").parent().next().html("请填数字"); return false; }*/
                  
                     //电话号码
                     var phoneReg = /^(13[0-9]{9})|(15[0-9][0-9]{8})|(18[0-9][0-9]{8})$/;
                  if(!phoneReg.test($("input[name='phone']").val())){ 
                      $("input[name='phone']").parent().next().html("请输入有效的电话号码");
                       return false;
                   }
    
                  //名称
                  /*if($("intput[name='realname']").val().trim()==""){ $("input[name='realname']").parent().next().html("名称不能为空"); return false; }*/
                  if($("input[name='realname']").val().trim()==""){ 
                    $("input[name='realname']").parent().next().html("名称不能为空");
                    return false;
                  }
    
                  //年龄
                  var agereg=/^([1-9]\d?|1[01][0-9]|120)$/;
                  if(!agereg.test($("input[name='age']").val())){ 
                    $("input[name='age']").parent().next().html("请填数字");
                      return false;
                  }
    
                  //角色
                  if($("select[name='roleId']").val()==0){ //$("select[name='roleId']")[0].selectedIndex==0
                      $("select[name='roleId']").parent().next().html("请选择一个角色");
                     return false;
                  }
                  return true;
              }
    
              
    
            $("input[type='button']").on("click",function(){ 
                if(valid()){ 
                //alert("验证成功，开始Ajax插入");
                $.ajax({ 
                    type:"POST",
                  url:"http://123.57.7.108:1024/emall/users",
                  dataType:"json",
                  data:JSON.stringify({ 
                    email:$("input[name='email']").val(),
                    gender:$("input[name='gender']:checked").val(),
                    idNumber:$("input[name='idNumber']").val(),
                    password:$("input[name='password']").val(),
                    phone:$("input[name='phone']").val(),
                    realname:$("input[name='realname']").val(),
                    roleId:$("select[name='roleId']").val(),
                    status:$("select[name='status']").val(),
                    username:$("input[name='username']").val()
                  }),
                  async:true,
                  cache:false,
                  contentType: "application/json;charset=utf-8",
                  url:"http://123.57.7.108:1024/emall/users",
                  headers:{ 
                    Authorization:"Bearer "+window.localStorage.getItem("token")//遵守约定
                  },
                  success:function(data){ 
                      console.log(data);
                      if(data.code=="200"||data.code=="201"){ 
                         alert("创建成功");
                      }else if(data.code=="401"){ 
                         alert("未授权");
                      }else if(data.code=="403"){ 
                         alert("禁止");
                      }else{ 
                          alert("其他未知的错误");
                      }
                  },
                  error:function(respond,status,exception){ 
                    alert("请求失败");
                  }
                });
                }
            });
          });
        </script>
    </head>
    <body>
        <h1>Ajax实战案例</h1>
        <form name="regForm">
            <fieldset>
                <legend>注册用户</legend>
            <table border="1">
                <tr>
                    <th>用户名</th>
                    <td>
                        <input type="text" name="username"/>
                    </td>
                    <td class="err">
    
                    </td>
                </tr>
                <tr>
                    <th>密码</th>
                    <td>
                        <input type="password" name="password"/>
                    </td>
                    <td class="err">
    
                    </td>
                </tr>
    
               
                </tr>
    
                <tr>
                    <th>邮箱</th>
                    <td>
                        <input type="text" name="email"/>
                    </td>
                    <td class="err">
    
                    </td>
                </tr>
    
                <tr>
                    <th>性别</th>
                    <td>
                       男：<input type="radio" name="gender" value="1"/>
                       女：<input type="radio" name="gender" value="0"/>
                    </td>
                    <td class="err">
    
                    </td>
                </tr>
    
                <tr>
                    <th>身份证号</th>
                    <td>
                        <input type="text" name="idNumber"/>
                    </td>
                    <td class="err">
    
                    </td>
                </tr>
    
                <tr>
                    <th>电话</th>
                    <td>
                        <input type="text" name="phone"/>
                    </td>
                    <td class="err">
    
                    </td>
                </tr>
    
                <tr>
                    <th>名称</th>
                    <td>
                        <input type="text" name="realname"/>
                    </td>
                    <td class="err">
    
                    </td>
                </tr>
    
    
                <tr>
                    <th>年龄</th>
                    <td>
                        <input type="text" name="age"/>
                    </td>
                    <td class="err">
    
                    </td>
                </tr>
    
                <tr>
                    <th>角色</th>
                    <td>
                        <select name="roleId">
                            
                          <option value="0">请选择</option>
                          <option value="1">admin</option>
                          <option value="2">商品管理员</option>
                          <option value="3">老板</option>
                          <option value="4">运营主管</option>
                        </select>
                    </td>
                    <td class="err">
    
                    </td>
                </tr>
    
                <tr>
                    <th>状态</th>
                    <td>
                        <select name="status">
                            <option value="1">有效</option>
                            <option value="0">无效</option>
                          </select>
                    </td>
                    <td class="err">
    
                    </td>
                </tr>
    
                <tr>
                    <th></th>
                    <td>
                       <input type="button" value="提交" />
                    </td>
                    <td class="err">
    
                    </td>
                </tr>
            </table>
        </fieldset>
        </form>
    </body>
    </html>