JavaScript HTML5はフォームvalidation_javascriptスキルを実装します-jsチュートリアル-php.cn

JavaScript HTML5はフォームvalidation_javascriptスキルを実装します

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-05-16 15:12:37

オリジナル

1545 人が閲覧しました

フォーム検証は無効なデータを検出し、エンドユーザーに対してこれらのエラーをマークします。これはユーザーエクスペリエンスの最適化です。

以下はブラウザ付属の認証機能であり、モバイル端末でも閲覧可能です。

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