bootstrp实现注册页面

效果图片在这里插入图片描述

​​​​​​
下面展示一些 内联代码片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
    		body{
    		   background: linear-gradient(to right, #190B38, #632E50);
    	}
    	.boxxx{
    		opacity: 0.9;
    		top: 50px;;
    		left: 50%;
    		margin-left: -18rem;
    	}
    </style>
	</head>
	<body>
		<div class="card border-primary  boxxx position-relative" style="max-width: 36rem; "  >
    <div class="card-header">注册</div>
  <div class="card-body text-primary">
   <form>
  <div class="form-group">
    <label for="formGroupExampleInput">用户名</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="由3-20个单词字符组成,首字符必须为字母">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">密码</label>
    <input type="password" class="form-control" id="formGroupExampleInput2" placeholder="由3-20个字符组成">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">确认密码</label>
    <input type="password" class="form-control " id="formGroupExampleInput3" placeholder="两次输入必须一致" >
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">真实姓名</label>
    <input type="text" class="form-control" id="formGroupExampleInput4" placeholder="由2到4个汉字组成" >
  </div>
  
  
 <label for="inputState">性别</label>
  <div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1"></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2"></label>
</div>
  <!--所在城市-->
  <div class="form-group col-md-4">
      <label for="inputState">所在城市</label>
      <select id="inputState" class="form-control">
        <option selected>长沙</option>
        <option>武汉</option>
        <option>重庆</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>台湾</option>
        <option>海南</option>
        <option>青岛</option>
        <option>杭州</option>
        <option>拉萨</option>
        <option>乌鲁木齐</option>
      </select>
    </div>
    
    <label for="inputState">爱好:&nbsp;&nbsp;&nbsp;</label>
 <div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">打游戏</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">看电影</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
  <label class="form-check-label" for="inlineCheckbox3">搞学习</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
  <label class="form-check-label" for="inlineCheckbox3">听音乐</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
  <label class="form-check-label " for="inlineCheckbox3">其他</label>
</div>


<button type="button" class="btn btn-primary btn-lg btn-block">完成注册</button>

    
    
</form>
  </div>
	</body>
</html>

<script>
	
	//用户名匹配
	var  user=document.querySelector("#formGroupExampleInput");
	console.log(user);
	
	user.onfocus=function(){
		user.classList.remove("is-valid");
		user.classList.remove("is-invalid");
		
	}
	user.onblur=function(){
	 var  userval=user.value;
	
		if( userval.match(/^[a-z]\w{2,19}$/ig)){
		user.classList.add("is-valid");}
		else{
			user.classList.add("is-invalid");
		}
	}
	
	
 //密码校验
 
  var  pas1=document.querySelector("#formGroupExampleInput2");console.log(pas1);
	pas1.onfocus=function(){
		pas1.classList.remove("is-valid");
		pas1.classList.remove("is-invalid");
		
	}
	pas1.onblur=function(){
	 var  userval=pas1.value;
		if( userval.match(/^[^\s]{3,20}$/ig)){
	       pas1.classList.add("is-valid");
		}
		else{
			pas1.classList.add("is-invalid");
		};
	};
	
	//确认密码
 var  pas2=document.querySelector("#formGroupExampleInput3");console.log(pas2);
	pas2.onfocus=function(){
		pas2.classList.remove("is-valid");
		pas2.classList.remove("is-invalid");
		
	}
	pas2.onblur=function(){
	 var  userval=pas2.value;
	 var  userval_=pas1.value;
		if( userval==userval_&&userval!==""){
	       pas2.classList.add("is-valid");}
		else{
			pas2.classList.add("is-invalid");
		};
	};
	
	//姓名校验
	 var  pas3=document.querySelector("#formGroupExampleInput4");console.log(pas3);
	pas3.onfocus=function(){
		 pas3.classList.remove("is-valid");
		 pas3.classList.remove("is-invalid");
		
	}
	 pas3.onblur=function(){
	 var  userval= pas3.value;
		if( userval.match(/[\u4e00-\u9fa5]{2,4}/ig)){
	        pas3.classList.add("is-valid");}
		else{
			 pas3.classList.add("is-invalid");
		};
	};
	
	
</script>

版权声明:本文为HSS2294216348原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/HSS2294216348/article/details/107285464