집 > 기사 > 웹 프론트엔드 > javascript html5는 양식 유효성 검사_javascript 기술을 구현합니다.

javascript html5는 양식 유효성 검사_javascript 기술을 구현합니다.

WBOY원래의: 2016-05-16 15:12:371451검색

양식 유효성 검사는 유효하지 않은 데이터를 감지하고 최종 사용자를 위해 이러한 오류를 표시합니다. 이는 사용자 경험 최적화입니다.

다음은 브라우저에서 제공되는 인증 기능을 보여주며, 모바일 단말기에서도 볼 수 있습니다.

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;
  }

위 내용은 모두 폼검증을 구현하기 위해 html5와 결합된 자바스크립트용 코드입니다. 모두의 학습에 도움이 되길 바랍니다.

성명：

이전 기사：JavaScript_javascript 기술을 기반으로 스마트 오른쪽 클릭 메뉴 구현다음 기사：JavaScript_javascript 기술을 기반으로 스마트 오른쪽 클릭 메뉴 구현

javascript html5는 양식 유효성 검사_javascript 기술을 구현합니다.

관련 기사