精华内容
下载资源
问答
  • h5表单验证
    2021-08-31 09:05:55

    文章目录

    html

     <form>
        <div class="form__field">
          <!-- pattern 正则验证 required 必填 -->
          <input type="password" class="form__input" pattern=".{6,}" required />
          <span class="icon"></span>
        </div>
      </form>
    
      <p>密码必须是六个或更多</p>
    

    css

    /* valid 满足 */
    .form__input:valid {
      border-color: forestgreen;
    }
    
    /* + 不能改 */
    .form__input:valid+.icon::after {
      content: '😃';
    }
    
    /*  invalid 不满足 */
    .form__input:invalid {
      border-color: firebrick;
    }
    
    .form__input:invalid+.icon::after {
      content: '😳';
    }
    
    更多相关内容
  • h5表单验证

    2022-03-23 19:06:54
    焦点autofocus 8.novalidate 表单上不验证 type submit 按钮上fromnovalidate验证 9. label for=“man” input type radio name=“sex” id=“man” 10.h5约束验证 API willValidate属性:不符合返回false validity...

    from

    1.action URL后台交互   method  placeholder灰色字 

    2.提交文件 enctype =“mlutipart/from-data”    input type =“file”

    3.下拉框的提示 input list=“tips”   dataList id=“tips”   option value=“”

     4.required 必填

    5.autocomplete =“off” on 下面的联想

    6.pattern 正则:^开头 /d{5}五个数字[任意字母]$结尾

    7.焦点autofocus

    8.novalidate 表单上不验证       type submit   按钮上fromnovalidate验证

    9. label for=“man”

    input type radio  name=“sex” id=“man”

    10.h5约束验证 API

    willValidate属性:不符合返回false

    validity属性:验证状态  validityState对象

    watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETkB3ZWl4aW5fNTMxNTM0NDg,size_20,color_FFFFFF,t_70,g_se,x_16

     

    validationMessage属性:失败信息

    checkValidity()方法 符合返回ture可写自定义信息 

    setCustomValidity()方法设置自定义提示信息

    11.search里的伪元素style input[type=“search”]::

    - webkit- search- cancel- button{

    - webkit- appearance:none}

    取消谷歌pc端自带的差号样式

    移动端用div的绝对定位

    12.number   max 和min  step保留两位小数0.01

    maxlength不可用

    用js  oninput实时监听事件 函数里用obj 和length  obj.value=obj.value.substr(0,length)

    this   =obj

    13.number里的伪元素   取消上下增减

    input[type=number]::- webkit- inner-spin- button,- webkit- outer-spin- button{

    - webkit- appearance:none;

     margin:0;

    14.h5自带验证美化

    常见伪类1.:required  :optional选填

    2.:in-range :out -of -range 范围-最值大小r

    3.valid和 invalid 符合和不符合验证

    4.:read-only :read- write也可匹配div的contenteditable属性可写的

     

     

     

    展开全文
  • H5表单验证

    2019-11-07 21:29:15
  • 手写表单及h5表单验证举例

    千次阅读 2019-06-28 14:05:20
    这里复习一下手写表单,顺带复习一下表单的基本属性,基本样式和h5表单验证。 一个表单基本包含一个html结构,即表单结构,针对html的样式,表单验证,表单提交。这里会把前三项的相关代码贴出来。大家组合到一个...

    表单是一个很重要的概念,这里涉及到收集数据以及验证数据,以及表单的用户体验。一般ui框架会有封装好的这些功能。

    这里复习一下手写表单,顺带复习一下表单的基本属性,基本样式和h5的表单验证。

    一个表单基本包含一个html结构,即表单结构,针对html的样式,表单验证,表单提交。这里会把前三项的相关代码贴出来。大家组合到一个html页面之中,就可以形成一个完整的功能。

    表单基本结构

    一般包含 label(optional), input,错误提示。错误提示的形式各式各样,有h5自带的样式,也可以自定义一个。下面举例一个包含用户名和邮箱的表单。其中用户名验证是否填写,长度在3-15字符以内,邮箱验证是否填写,是否符合邮箱类型。

    <form class="form" action="">
            <h4>表单的功能及校验</h4>
            <!-- text -->
            <div class="input-block">
                <label for="userName" class="input-label">用户名:</label>
                <input type="text" 
                    name="userName" 
                    id="userName" 
                    required
                    minlength="3"
                    maxlength="15"
                    placeholder="请输入用户名">
                <span class="err-msg">3~15字符</span>
                <!-- <span class="inform-msg">3~15字符</span> -->
            </div>
            <!-- email -->
            <div class="input-block">
                <label for="mail" class="input-label">邮箱:</label>
                <input type="email" 
                    required
                    name="mail" 
                    id="mail" placeholder="请输入邮箱">
                <span class="err-msg"></span>
            </div>
    
            <!-- submit -->
            <div class="button" onclick="submitData()">提交</div>
        
        </form>

    表单基本样式

    针对以上的html,做简单的样式书写。表单整体居中,提示语在最右端显示。错误时为红色。这里简单贴一下代码。

    <style>
            .form{
                text-align:center;
            }
            .form .input-block{
                position:relative;
                margin:0 auto;
                padding:15px 0;
                width:700px;
            }
            .form .input-block .input-label{
                display:inline-block;
                text-align:left;
                width:80px;
            }
            .form .input-block .err-msg{
                position:absolute;
                left:480px;
                top:17px;
                font-size:12px;
                color:#333;
                
            }
            .form .button{
                margin:0 auto;
                width:42px;
                height:20px;
                line-height:20px;
                padding:5px;
                text-align:center;
                border-radius: 5px;
                background:#ccc;
                font-size:13px;
            }
    

    表单验证

    h5自带了表单验证,验证后的提示信息,也有自带的,也可以自己写。这里是自己写样式,见上面。表单有一些自带的属性,如min,max,step,minLength,maxLength,type="email",type="number"....等等,都与表单验证有关系。大家可以打印出元素的validity属性,例如,在某个触发事件下,console.log(this.validity),结果是一个叫做validityState对象,如下,

    针对如上表单,验证用户名及密码,效果和代码如下所示:

     

    <script>
            //用户名
            let userName=document.getElementById('userName');
            userName.onblur=function(){
                let errMsg=document.querySelector("#userName+.err-msg");
                console.log(this.validity)
                if(this.validity.valueMissing){
                    errMsg.display='block';
                    errMsg.style.color="red"
                    errMsg.innerHTML='用户名不可以为空'
                }else if(this.validity.tooLong){
                    errMsg.display='block';
                    errMsg.style.color="red"
                    errMsg.innerHTML='用户名不可以超过15字符'
                }else if(this.validity.tooShort){
                    errMsg.display='block';
                    errMsg.style.color="red"
                    errMsg.innerHTML='用户名不可以短过3个字符'
                }else{
                    errMsg.style.color="#333"
                    errMsg.innerHTML='3~15字符'
                }
            }
            //邮箱
            let mail=document.getElementById('mail');
            mail.onblur=function(){
                let errMsg=document.querySelector("#mail+.err-msg");
                if(this.validity.valueMissing){
                    errMsg.display='block';
                    errMsg.style.color="red"
                    errMsg.innerHTML='邮箱不能为空喔'
                }else if(this.validity.typeMismatch){
                    errMsg.display='block';
                    errMsg.style.color="red"
                    errMsg.innerHTML='输入无效,请输入邮箱地址'
                }else{
                    errMsg.display='none';
                    errMsg.style.color="#333"
                    errMsg.innerHTML=''
                }
            }
    
            //表单提交
            function submitData(){
                console.log("在这里提交表单")
            }
    
        
        </script>

     

    表单提交

    这里不再贴出表单提交的代码,纯粹原生的话,需要封装一个函数,逐个获取到数据。本质上上form.elements可以获得所有的表单。可以通过element.value获得表单的值。element.checked看单/复选的选择情况,这些都是表单的共有的属性。如果是在框架中写,比如Vue中,则很容易获取到对应的变量。一般一个表单是一个变量,其下有对应的数据。验证之后,将变量提交给后台。

    关于vue中的数据提交,可以见我之前写的一篇文章,大致如文中所述

    https://blog.csdn.net/mia1106/article/details/79552560

    注意这里使用的div提交,没有使用自带的input type="submit",注意这个提交时会自带刷新,一般需要阻止自带事件。由于现在表单基本上是异步提交,自己写提交函数,所以,我选择了自己写提交标签。

     

    展开全文
  • # 直接获取输入框中的提示文本 print("没填写文字获取输入框中的提示文本:",driver.find_elements_by_css_selector("input")[0].get_attribute("validationMessage"))
  • 这次给大家带来H5表单验证有哪些方法,H5表单验证的注意事项有哪些,下面就是实战案例,一起来看一下。在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义。就其核心而言,表单验证是一套系统,它为终端...
  • h5-表单验证

    2022-03-23 15:30:02
    h5表单验证-表单验证反馈
  • H5表单验证2(h5自带验证美化)

    千次阅读 2018-09-25 19:31:46
    h5自带验证美化:要做出不一样的表单验证,我们要了解一些伪类及css选择器。 :required和:optional :in-range和:out-of-range :valid和:invalid :read-only和:read-write //:required和:optional &lt;style...
  • H5表单验证1

    千次阅读 2018-09-23 15:48:20
    h5表单中新增了哪些类型? email、url、number、range、date(date、month、week、time、datetime、datetime-local)、search、color、tel等 文本框中,输入一次,下一次再输入会自动提示是哪个属性? autocomplete...
  • 表单在网页中主要负责数据...在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式,而不使用任何JavaScript。您还将看到浏览器现在可以提供一个日期选择日历,并设置自动对焦到一个字...
  • 这次给大家带来H5表单验证失败该怎样提示,怎么用H5表单验证失败的提示?H5表单验证失败提示的注意事项有哪些,下面就是实战案例,一起来看一下。我们知道,前端的童鞋在写页面时, 都不可避免的总会踩到 表单验证这...
  • 文章目录一,智能表单的type二、属性三、标签四、属性选择器五、伪类选择器1、动态伪类2、UI元素状态伪...type="url " 验证有没有网址格式 type="range" 滑动条(min、max/step) type="number" 数字条(min、max/step
  • 原生h5表单验证

    千次阅读 2017-07-01 09:55:41
    近来做项目时发现h5表单验证挺不错的,毕竟原生的用起来比较方便简单,在此做个总结: 1.现在我们来简单的实现一个h5表单验证:   text.oninput=function(){ text.setCustomValidity(""); }; text....
  •  使用 :CSS3中的验证选择器    <input type="text" class="exp__input" id="example" name="test" placeholder="Full Name" required>  " data-icon-ok="">Full Name      <input type=...
  •  过去验证表单会通过js和正则去判断填写的内容是否正确,如email的验证。  HTML5的出现为我们提供一些属性,不用编写js和正则即可解决这个检验表单内容。  :required  必须,那input不能为空的意思。  ...
  • Form表单提交 和Ajax无刷新页面提交 placeholder 不是所有的input都支持,比如input date就不支持 解决方案: 可以在date上面覆盖一个div,填写placeholder的内容 html5表单新增的类型: email url range number ...
  • selenium定位H5表单验证的提示语

    千次阅读 2019-07-18 10:22:26
    selenium定位H5表单验证的提示语 前端代码,1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function .....
  • 表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误,本篇文章主要介绍了详解HTML5中表单验证的8种方法,具有一定的参考价值,有兴趣的可以了解一下。
  • html、js简单表单验证

    2018-01-27 15:58:02
    一个简单的表单验证demo,原生验证方式,内置html、js、css代码
  • 记录一下自己用过的不同工具的表单验证方法,默认非表单提交而是用resultful请求风格提交。 原生H5验证: <form id="form-demo" onsubmit="return false;"> <input type="text" class="form-control ...
  • H5表单验证自定义提示文字

    千次阅读 2016-09-23 14:26:34
    H5表单验证自定义提示文字 required oninvalid="setCustomValidity('用户名不能为空')" oninput="setCustomValidity('')" 链接:http://blog.csdn.net/teresa502/article/details/8524184
  • 在form标签上加 novalidate 属性,可以禁用h5默认的表单验证效果 转载于:https://www.cnblogs.com/yiyangl/p/11198911.html
  • 本实例为大家分享了H5表单验证新特性,如何用户注册表单页,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>用户注册表单页</...
  •  - oninvalid 事件 (验证有误时触发)  - onchange 事件 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;html5表单美化综合例子&lt;/title&gt; ...
  • Validate通用表单验证Jquery插件.zip。前端js实现 表单多种验证,不需要请求服务器,正则表达式匹配手机号、邮箱、IP地址、身份证、中文等。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,884
精华内容 3,553
关键字:

h5表单验证