信鸽网

javascript html5实现表单验证

  作者：bea

表单验证为终端用户检测无效的数据并标记这些错误，是一种用户体验的优化。 下面展现浏览器自带的验证功能也可在移动端中查看： HTML部分： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-sc

表单验证为终端用户检测无效的数据并标记这些错误，是一种用户体验的优化。


下面展现浏览器自带的验证功能也可在移动端中查看：


HTML部分：




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

  <title>html5 表单验证</title>

</head>

<body>

<form action="#" id="formValid" class="myform" novalidate="novalidate" onsubmit="return checkForm()">

  <fieldset>

    <div class="form-group">

      <label for="name">名称</label>

      <div>

        <input type="text" class="form-control" id="name" name="name" required/>

        <span class="form-error">不能为空</span>

      </div>

    </div>

    <div class="form-group">

      <label for="email">邮箱</label>

      <div>

        <input type="email" class="form-control" id="email" name="email" required/>

        <span class="form-error">邮箱格式不正确</span>

      </div>

    </div>

    <div class="form-group">

      <label>省份</label>

      <select name="province" class="form-control">

        <option value="">请选择</option>

        <option value="s">四川</option>

        <option value="c">重庆</option>

      </select>

    </div>

    <input type="submit" class="btn" value="提交"/>

  </fieldset>

</form>

</body>

</html>


CSS部分：




　　 fieldset{border: 0;}

  .myform .form-control{

    display: block;

    padding: 5px;

    width: 100%

  }

  .myform input:focus:invalid + .form-error{

    display: inline;

  }

  .myform .form-error{

    display: none;

    position: absolute; 

    margin-top: .7em;

    padding: 1px 2px;

    color: #fff;

    font-size: .875rem;

    background: #f40;

  }

  .myform .form-error:after{

    position: absolute;

    content: "";

    top: -.5em;

    left: .5em;

    z-index: 100;

    display: inline-block;

    width: 0;

    height: 0;

    vertical-align: middle;

    border-bottom: .5em solid #f40;

    border-right: .5em solid transparent;

    border-left: .5em solid transparent;

    border-top: 0 dotted;

    transform: rotate(360deg);

    overflow: hidden;

  }

  .btn{

    padding: 5px 20px;

   }


JavaScript部分：




  function checkForm(){

    var myform = document.getElementById("formValid");

    return check(myform.elements);

  }

  function check(eles){

    var ele;

    for(var i = 0;i<eles.length;i++){

      ele = eles[i];

      if(ele.nodeName == "SELECT"){

        if(!ele.selectedIndex){

          alert("请选择省份");

          return false;

        }

      }else if(ele.name){

        if(!ele.checkValidity()){

          ele.focus();

          return false;

        }

      }

    }

    return true;

  }


以上就是javascript结合html5实现表单验证的全部代码，希望对大家的学习有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: