HTML5标准常用的表单写法和使用表单2.0定制错误提示消息内容

最新推荐文章于 2024-08-15 01:55:01 发布

weixin_33724059

最新推荐文章于 2024-08-15 01:55:01 发布

阅读量140

点赞数

文章标签： python

原文链接：https://my.oschina.net/webcaorui/blog/1547870

版权

2019独角兽企业重金招聘Python工程师标准>>>

html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/1.css"/>
</head>
<body>
<div class="container">
  <!--HTML5标准推荐的表单写法-->
  <form>
    <div class="form-group">
      <label class="control-label" for="uname">用户名：</label>
      <input class="form-control" id="uname" required minlength="3" maxlength="6" autocomplete="off" autofocus>
      <span class="help-block primary">用户名可以包含数字和字母</span>
    </div>
    <div class="form-group">
      <label class="control-label" for="upwd">密码：</label>
      <input class="form-control" id="upwd">
      <span class="help-block primary">密码长度在6~12位之间</span>
    </div>
    <div class="form-group">
      <label class="control-label" for="umail">邮箱：</label>
      <input type="email" class="form-control" id="umail">
      <span class="help-block primary">请注意邮箱格式</span>
    </div>
    <div class="form-group">
      <label class="control-label"></label>
      <input type="submit" class="form-control success">
    </div>
  </form>
  <script>
    /**对“用户名”进行输入验证**/
    uname.onblur = function(){
      if(this.validity.valueMissing){
        var msg = '用户名不能为空';
        this.nextElementSibling.innerHTML = msg;
        this.nextElementSibling.className = 'help-block danger';
        this.setCustomValidity(msg);
      }else if(this.validity.tooShort){
        var msg = '用户名不能短于3位';
        this.nextElementSibling.innerHTML = msg;
        this.nextElementSibling.className = 'help-block danger';
        this.setCustomValidity(msg);
      }else if(this.validity.tooLong){
        var msg = '用户名不能超过6位';
        this.nextElementSibling.innerHTML = msg;
        this.nextElementSibling.className = 'help-block danger';
        this.setCustomValidity(msg);
      }else {
        this.nextElementSibling.innerHTML = '用户名验证正确';
        this.nextElementSibling.className = 'help-block success';
        this.setCustomValidity('');
      }
    }

  </script>
</div>
</body>
</html>

css

* {
  box-sizing: border-box;
}

.container {
  width: 500px;
  min-height: 400px;
  margin: 100px auto 0 auto;
  padding: 1.5em;
  border: 1px solid #aaa;
  border-radius: 4px;
}
.form-group:not(:last-child) {
  margin-bottom: 15px;
}
.control-label {
  display: inline-block;
  width: 70px;
  text-align: right;
  vertical-align: middle;
}
.form-control {
  padding: 4px;
  border: 1px solid #aaa;
  border-radius: 2px;
  width: 180px;
  vertical-align: middle;
}
.help-block {
  font-size: 0.8em;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #fff;
}
.primary {
  background: #bbb;
  border-color: #aaa;
}
.danger {
  background: #d22;
  border-color: #a00;
}
.success {
  background: #2b2;
  border-color: #0a0;
}

转载于:https://my.oschina.net/webcaorui/blog/1547870