javascript html5实现表单验证

前端技术 2023/09/06 JavaScript

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

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

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实现表单验证的全部代码，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/15397

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案