前端：表单验证页面（html+css+javascript）

最新推荐文章于 2022-01-23 00:07:41 发布

leeeeeenas

最新推荐文章于 2022-01-23 00:07:41 发布

阅读量892

点赞数 1

分类专栏：前端实战小案例

本文链接：https://blog.csdn.net/Tracy_Yuan2014/article/details/104100475

版权

前端实战小案例专栏收录该内容

21 篇文章 5 订阅

订阅专栏

花了几个小时，用html+css+javascript写了一个表单验证页面，继续努力

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>用户注册</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    header{
      width: 1200px;
      margin: 0 auto;
      height: 50px;
      background-color: #0099FF;
      color: white;
      line-height: 50px;
    }
    header span{
      margin-left: 50px;
      font-size: 22px;
      font-family: "微软雅黑";
    }
    .main{
      width: 1200px;
      margin: 0 auto;
      background-color: #ccc;
    }
    .main-inner{
      width: 300px;
      margin: 0 auto;
    }
    .main-form{
      width: 100%;
      padding: 50px 0;
    }
    .main-form .form-content{
      height: 38px;
      line-height: 38px;
      position: relative;
    }
    .main-form .form-content .form-label{
      width: 85px;
      float: left;
      text-align: right;
      font-size: 16px;
      padding-right: 15px;
    }
    .main-form .form-content .form-input{
      width:160px;
    }
    .main-form .form-content .form-tips{
      position:absolute;
      left: 266px;
      top: 0;
      white-space: nowrap;
      color: #f00;
      /* background-color: black; */
      font-size: 12px;
    }

    .main-submit{
      margin-top: 70px;
      text-align: center;
    }
    .main-submitBtn{
      width: 85px;
      height: 30px;
      font-size: 16px;
      background-color: #0099FF;
      border: none;
      border-radius: 3px;
      color:white;
      font-weight: bold;
    }
  </style>
</head>
<body>
	<header>
    <span>用户注册</span>
  </header>
  <section class="main">
    <div class="main-inner">
      <form class="main-form" action="">
        <!--用户名-->
        <div class="form-content">
          <span class="form-label">用户名:</span>
          <input class="form-input"  id="form-input-userName">
          <span class="form-tips"></span>
        </div>
        <!--登陆密码-->
        <div class="form-content">
          <span class="form-label">登陆密码:</span>
          <input class="form-input" id="form-input-pwd">
          <span class="form-tips"></span>
        </div>
        <!--确认密码-->
        <div class="form-content">
          <span class="form-label">确认密码:</span>
          <input class="form-input" id="form-input-pwd2">
          <span class="form-tips"></span>
        </div>
        <!--姓名-->
        <div class="form-content">
          <span class="form-label">姓名:</span>
          <input class="form-input" id="form-input-name">
          <span class="form-tips"></span>
        </div>
        <!--性别-->
        <div class="form-content">
          <span class="form-label">性别:</span>
          <select class="form-input" id="form-input-sex">
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
          <span class="form-tips"></span>
        </div>
        <!--身份证号码-->
        <div class="form-content">
          <span class="form-label">身份证号码:</span>
          <input class="form-input" id="form-input-userId">
          <span class="form-tips"></span>
        </div>
        <!--邮箱-->
        <div class="form-content">
          <span class="form-label">邮箱:</span>
          <input class="form-input" id="form-input-mail">
          <span class="form-tips"></span>
        </div>
        <!--手机号码-->
        <div class="form-content">
          <span class="form-label">手机号码:</span>
          <input class="form-input" id="form-input-phone">
          <span class="form-tips"></span>
        </div>
        <div class="main-submit">
            <input class="main-submitBtn" id="main-submitBtn" type="button"  value="提交">
        </div>

      </form>
    </div>
  </section>
  <script type="text/javascript">
  // 获取dom元素
  var inputElements = document.getElementsByClassName("form-input");
  var formTips = document.getElementsByClassName("form-input");
  // console.log(inputElements);
  // var username = document.getElementById("form-input-userName");
  var pwd1 = document.getElementById("form-input-pwd");
  var pwd2 = document.getElementById("form-input-pwd2");
  // var name = document.getElementById("form-input-name");
  // var sex = document.getElementById("form-input-sex");
  // var userId = document.getElementById("form-input-userId");
  // var mail = document.getElementById("form-input-mail");
  // var phone = document.getElementById("form-input-phone");
  var submitBtn = document.getElementById("main-submitBtn");
  //console.log(submitBtn);

  var input = {
    userName:{
      pattern:/^[a-z]\w{5,19}$/i,
      error: '要求用户名是6-20位字母、数字或“_”,字母开头'
    },
    pwd:{
      pattern:/^\S{6,18}$/,
      error:"6-18位，包括数字字母或符号，中间不能有空格"
    },
    pwd2:{
      error:"两次输入不一致，请重新输入"
    },
    name:{
      pattern: /^[\u4e00-\u9fa5]{2,4}$/,
      error: '要求是真实姓名，两位到四位的中文汉字'
    },
    userId:{
      pattern: /^(\d{15}|\d{17}[X\d])$/,
      error: '要求15位或者18位的数字，18位时最后一位可能是x'
    },
    mail:{
      pattern: /^[\w-]+@([-a-z]+\.)+[a-z]{2,}$/i,
      error: '邮箱的格式不正确'
    },
    phone:{
      pattern: /^1(3\d|47|5[012356789]|8[0256789])\d{8}$/,
      error: '请正确填写手机号码格式'
    }
  }

    window.onload = function(){
      // 添加input的验证事件
       eachInputAddVerifyListener();
      //给submit按钮绑定事件，点击按钮后，所有的Input都要验证一遍
       submitBtn.addEventListener("click",submitHandler);

    }

    function eachInputAddVerifyListener(){
      // 添加input的验证事件
      for(var i=0;i<inputElements.length;i++){
        inputElements[i].addEventListener("blur",function(){
          formValidByObj(this);
        });
      }

    }

    function formValidByObj(eleObj){
      var goTo =(eleObj.id).split("-")[2];
      var content = eleObj.value;
      //寻找兄弟节点中的form-tips的元素
      var formTips = eleObj.parentNode.querySelector('.form-tips');
      var flag = false;
      // console.log(content);
      // console.log(goTo);


      // console.log(pattern);
      if(goTo=="pwd2"){
        // console.log(pwd1.value);
        // console.log(pwd2.value);
        if(pwd1.value==pwd2.value && (pwd2.value!=undefined && pwd2.value.length!=0)){
          flag= true;
        }
      }else if(goTo=="sex"){
          flag=true;
      }else{
        //根据Id后缀名称选择对应匹配的正则表达式
        var pattern = input[goTo].pattern;
        flag = pattern.test(content);
      }

      // console.log(flag);
      // console.log(formTips);
      if(flag==true){
        formTips.innerHTML="ok"
      }else{
        formTips.innerHTML=input[goTo].error;
      }

      return flag;
    }


    function submitHandler(e){
    //  console.log("submit");
      var res = true;;
      for(var i=0;i<inputElements.length;i++){
      //  console.log(inputElements[i]);
        var currFlag = formValidByObj(inputElements[i]);
        if(currFlag==false){
          res = false;
        }
    //    console.log(res);
      }
      if(res==true){

        alert("验证成功！");
      }else{
        e.preventDefault();
        alert("信息有误，请检查！");
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        form{
            width:300px;
            background:pink;
            text-align: center;
            padding:30px 0;
            margin:100px auto;
        }
    </style>
</head>
<body>
    <form id="form">
        <p><input type="text" name="name" id="username" placeholder="请输入账户名"></p>
        <span></span>
        <p><input type="text" name="chinaName" id="chinaName" placeholder="请输入中文名"></p>
        <span></span>
        <p><input type="email" name="eamil" id="email" placeholder="请输入邮箱"></p>
        <span></span>
        <p><input type="submit" value="注册" id="submit"></p>
    </form>
    <script type="text/javascript">
        var spans=document.getElementsByTagName("span");
        var username=document.getElementById("username");
    	var chinaName=document.getElementById("chinaName");
    	var email=document.getElementById("email");
    	var submit=document.getElementById("submit");
    	var input1=false;
    	var input2=false;
    	var input3=false;
    	
    	username.onfocus = function(){
    	    spans[0].innerHTML="请输入用户名";
    	}
    	username.onblur = function(){
    	    var reg = /^\w{6,18}$/;
    	    if(username.value==""){
    	        spans[0].innerHTML="请输入用户名";
    	    }else{
    	        if(!reg.test(username.value)){
    	            spans[0].innerHTML="请输入6-18位的字母、数字、下划线";
    	        }else{
    	            spans[0].innerHTML="格式正确";
    	            input1 = true;
    	        }
    	    }
    	}
    	
    	chinaName.onfocus = function(){
    	    spans[1].innerHTML="请输入姓名";
    	}
    	chinaName.onblur = function(){
    	    var reg = /^[\u4e00-\u9fa5]{2,5}$/;
    	    if(chinaName.value==""){
    	        spans[1].innerHTML="请输入姓名";
    	    }else{
    	        if(!reg.test(chinaName.value)){
    	            spans[1].innerHTML="格式不正确";
    	        }else{
    	            spans[1].innerHTML="格式正确";
    	            input2 = true;
    	        }
    	    }
    	}
    	
    	
    	email.onfocus = function(){
    	    spans[2].innerHTML="请输入邮箱";
    	}
    	email.onblur = function(){
    	    var reg = /^\w+@\w+\.[a-zA-Z]{2,3}$/;
    	    if(email.value==""){
    	        spans[2].innerHTML="请输入邮箱";
    	    }else{
    	        if(!reg.test(email.value)){
    	            spans[2].innerHTML="格式不正确";
    	        }else{
    	            spans[2].innerHTML="格式正确";
    	            input3 = true;
    	        }
    	    }
    	}
    	
    	submit.onclick = function(){
    	    if(input1 == false || input2 == false ||input3 == false){
    	        alert("请按照要求填写完整信息");
    	    }else{
    	        alert("注册成功");
    	    }
    	}
    	
    </script>
</body>

</html>

leeeeeenas

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
前端：表单验证页面（html+css+javascript）

花了几个小时，用html+css+javascript写了一个表单验证页面，继续努力<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用户注册</title> <style> *{ marg...
复制链接

扫一扫

专栏目录