Blogger Information
Blog 82
fans 0
comment 1
visits 108250
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
mdn拾遗-- 纯html+css实现的input的验证
子龙的博客搬家啦httpswwwcnblogscomZiLongZiLong
Original
1536 people have browsed it

关于input的验证,其实从很古老的前端时代开始就一直采用一种比较可靠的方式,就是js操作dom,今天浏览mdn时发现了h5的验证方法,很是兴奋。感觉值得一记。

  说在前面的话,着重就是配合h5 + css选择器的配合啦,废话不多说,上代码

  1.验证某个input为必填

          html:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" required>
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div></form>

        css:

    div {
        margin-bottom: 10px;
        position: relative;
    }
        input + span {
            padding-right: 30px;
        }
        input:invalid+span:after {
            position: absolute;
            content: 'x';
            padding-left: 5px;
            color:red;
        }
        input:valid+span:after {
            position: absolute;
            content: '✓';
            padding-left: 5px;
            color:green;
        }

2.输入框的长度限制:就是minlength和maxlength的使用啦。

  html:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" required size="10"
           placeholder="Username"
           minlength="4" maxlength="8">
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div></form>

3.使用pattern属性使用正则表达式:

  html:

<input type="text" id="uname" name="name" required size="45"
           pattern="[a-z]{4,8}">

写在最后,以前是自己对h5属性,以及一些css的东西不够重视,所以觉得能用js解决的就用js解决,但是现在看来不是了。h5确实是个伟大的东西,给web开发带来了视频,音频,canvas这些极度能够丰富网页内容的东西。值得学习啊。

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post