HTML5表单验证

最新推荐文章于 2024-05-09 21:24:37 发布
最新推荐文章于 2024-05-09 21:24:37 发布
阅读量2.5k 收藏 12
点赞数
分类专栏： web前段 笔记 文章标签： html5 javascript css
原文链接：https://blog.csdn.net/weixin_39141044/article/details/80721154
版权

HTML5基本表单验证特征

属性名说明
placeholder在输入框无内容时显示灰色提示
autocomplete部分输入框和form都可以设置自动提示 off关闭，on开启（默认是on）
autofocus让input自动获取焦点
required设置表单元素为必填
pattern表单验证使用正则
novalidate该属性使用在form标签上，让设置了验证的表单可以直接提交
formnovalidate该属性使用在提交按钮上，让设置了验证的表单可以直接提交 < input type=”submit” value=”提交” formnonvalidate />
for< label>的for属性是要配合< input>标签中的id属性使用的,点击label标签for对应id的input标签会获取焦点
  1. autocomplete属性

该属性用于控制自动完成功能的开启和关闭。可以设置表单或者input元素，有两个属性值，当设置为on时，启动该功能；当设置off时，关闭该功能。启用该功能后，当用户在自动完成域开始输入时，浏览器就会在该域中显示填写的选项。用户每提交一次，就会增加一个用于选择的选项

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <form action="#" method="get" autocomplete="on">
      请输入：<input type="text"  name="txt" /><br/>
       <input type="submit" />
   </form>
</body>
</html>
  1. novalidate属性

input输入类型，当提交表单时，会对这些输入内容进行验证。而novalidate属性则用于在提交表单时不对form或input进行验证：

<form action="#" method="get" novalidate>
  E-mail:
  <input type="email" name="myEmail" />
  <input type="submit" />
</form>
  1. autofocus属性

autofocus属性用于自动获取焦点。在html5中input元素设置该属性后，当页面加载时，input元素会自动获得光标焦点。

<input type="text" name="myTxt" autofocus />
  1. form属性

form属性用于设置input元素属于哪个表单。在html4中，表单中的所以元素都必须在这个表单的开始标签和结束标签之间，而在html5中，如果要将表单开始和结束标签之外的元素归属到该表单，只需要设置form属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="#" method="get" id="myForm">
    常用地址：<input type="text" name="ftxt" />
    <input type="submit" />

</form>
临时地址：<input type="text" name="ltxt" form="myForm" />
</body>
</html>

在设置form属性时，需要知道表单的id属性值，并将form属性的值也设置成表单id的属性值

  1. 表单重写属性override

override属性用于重写表单元素的某些属性，在html5中，可以重写的表单属性有formaction、formmethod、formenctype、formnovalidate和formtarget，这些属性分别用于重写表单的action、enctype、method、novalidate和target属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="a.jsp" method="get">
        用户名：<input type="text" name="fname" /><br />
        <input type="submit" value="张三的提交" /><br/>
        <input type="submit" formaction="b.jsp" value="李四的提交" />
    </form>
</body>
</html>

第一个input元素会将输入的数据提交a.jsp页面，而第二个input元素设置formaction属性，重写了action属性，设置提交页面到b.jsp页面

  1. list属性：
  1. list属性用于设置输入域的datalist元素，为list属性设置datalist的id属性值，可以将datalist元素与input元素相关联：
  2. list属性适应于以下类型的input元素：text、search、url、telephone、email、date、 pickers、number、range和color；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>6.2.1</title>
</head>
<body>
<input type="url" list="url_list" name="myUrl" />
<datalist id="url_list">
  <option label="Microsoft" value="http://www.microsoft.com" />
  <option label="Google" value="http://www.google.com" />
  <option label="百度" value="http://www.baidu.com" />
</datalist>
</body>
</html>
  1. multiple属性

multiple属性用于设置input元素是否可以有多个值。该属性只适用于email和file类型的input元素。

  1. 如果给email类型的input元素设置multiple属性，那么在输入框中可以输入多个email地址，多个email地址之间用逗号隔开。
  2. 如果给file类型的input元素设置multiple属性，那么在打开的选择文件对话框中就可以选择对个文件
E-mail：<input type="email" name="myEmail" multiple />
File：<input type="file" name="myFile" multiple />
  1. pattern正则表达式

正则表达式由一系列字符和数字组成，用于匹配某个句法规则。该属性适应于text、search、url、telephone、email和password类型的input元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form>
    <input type="text" name="myName" pattern="[a-zA-Z]\w{5,15}$">
    <html>以字母开头，6-16位</html>
    <input type="submit" value="提交">
</form>
</body>
</html>
  1. 设置input元素在内容为空时的提示信息，placeholder属性

在页面中有一个文本输入框，但是不知道应该输入什么内容时。

  <input type="text" name="myAddress" placeholder="输入您的常住地址" />

部分类型的input无法使用placeholder属性提示的解决方案

<input type="text" name="date" onfocus="(this.type='date')" placeholder="请输入日期"/>

缺点是需要用户点击2次

  1. 提交为空时提醒 required属性

用户必须填写内容才能提交，为空时提交不上

<form>
   <input type="text" name="myAddress" placeholder="输入您的常住地址" required />
    <input type="submit"/>
</form>

HTML表单约束验证API

属性/方法/对象说明
willValidate属性元素元素有没有被符合。没有符合返回false
validity对象元素当前验证状态（对象）
validationMessage属性描述与元素相关约束的失败信息
checkValidity()方法元素是否满足任意约束
setCustomValidity()方法设置自定义的验证信息
validity属性
<form action="#">
    <input type="text" name="username" id="username" placeholder="请输入用户名" required pattern="^\d{4}$" />

    <input type="submit"/>
</form>
<script type="text/javascript">
    var input_username = document.getElementById('username');
    console.log(input_username.validity);
</script>

请添加图片描述
validity对象中的每一个属性代表一个验证状态，false表示验证没问题，true表示不符合验证

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <form action="" method="get" id="forms">
            <input type="text" id="username" placeholder="用户名" required />
            <input type="password" id="pws" placeholder="密码" required />
            <input type="email" id="email" placeholder="邮箱" required />
            <input type="submit" value="提交" id="submitBtn">
        </form>
        <script>
            var form = document.getElementById("forms"),
            submitBtn = document.getElementById("submitBtn");
            submitBtn.addEventListener("click", function() {
		            //:invalid表示无效，即当填写的内容不符合要求的时候触发，
		            //form.querySelectorAll(“:invalid”);表示查询表单失效的元素。
                var invalidFields = form.querySelectorAll(":invalid");
                for(var i=0,len=invalidFields.length;i<len;++i){
                    console.log('input#'+invalidFields[i].id+':'
                    +invalidFields[i].validationMessage);
                }
            });
        </script>
    </body>
</html>

请添加图片描述

checkValidity()方法(常用)

一个input有许多约束条件，只有都满足了，才返回true，只要有任意一个约束条件不满足就返回false

<body>
    <form action="">
        <input type="text" id="username" value="" required pattern="^\d{}">
    </form>
    <script>
        var names = document.getElementById("username");
        if(names.checkValidity()){
            alert("符合验证条件");
        }else{
            alert("不符合验证条件");
        }
    //或者
        if(username.checkValidity()){
            alert("符合验证条件");
        }else{
            alert("不符合验证条件");
        }
    </script>
</body>

在HTML5中，js中一个元素的id就代表该元素的dom元素

document.getElementById(“username”)===username //值为true

不过不建议这样用，容易和变量混淆。

setCustomValidity()方法

设置自定义的验证提示信息，用于根据validity对象中的验证约束来覆盖预定义的信息。

<body>
    <form action="" method="get">
        <input type="url" oninput="checkit(this)">
        <input type="submit" value="提交">
    </form>
    <script>
        function checkit(obj) {
            var it = obj.validity;
            if(it.typeMismatch === true){
                obj.setCustomValidity("请输入带http://的网站");
            }
        }
    </script>
</body>

请添加图片描述

HTML5标签部分类型的限制和去除默认样式

(一)input[type=search]

  1. 去除默认按钮
    请添加图片描述
<head>
<meta charset="UTF-8" />
<style>
    input[type="search"]::-webkit-search-cancel-button{
        -webkit-appearance:none; //去除浏览器的默认样式
        height: 12px;
        width: 12px;
        background-color: red;
    }
</style>
</head>
<body>
    <form action="#">
    <input type="search" name="search" id="search" />
    <br>
    <br>
    <input type="submit"/>
    </form>

(二)input[type=number]

  1. 去除默认的上下按钮请添加图片描述
<style>
    input[type="number"]::-webkit-inner-spin-button{
        -webkit-appearance:none;
    }
</style>
</head>
<body>
    <form action="#">
    <input type="number" name="number" id="number" placeholder="请输入数字" />
    <br>
    <br>
    <input type="submit"/>
    </form>
</body>
  1. 限制input[type=number]输入内容的长度
    input[type=number]无法像input[type=text]那样使用maxlength属性来限制输入内容的最大长度。
<input type="number" name="number" id="number" maxlength="4" placeholder="请输入数字" />

解决方法：使用js控制

<style>
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button{
        -webkit-appearance:none;
    }
</style>
</head>
<body>
    <form action="#">
    <input type="number" name="number" id="number" oninput="checkLength(this,4)" placeholder="请输入数字" />
    <br>
    <br>
    <input type="submit"/>
    </form>
    <script type="text/javascript">
        function checkLength(obj,length){
            if(obj.value.length>length){
                obj.value = obj.value.substr(0,length);
            }
        }
    </script>
</body>
  1. 输入的内容保留小数
<input type="number" name="number" step="0.01" id="number" 
		oninput="checkLength(this,4)" placeholder="请输入数字" />
		<!--
		step=”0.01”保留2位小数
		step=”0.001”保留3位小数
		-->

使用伪类选择器对HTML5表单进行美化

常用的伪类选择器有：

伪类说明伪类说明
:required选择所有必填表项:optional选择所有选填项
:in-range选择值符合min和max约束的项:out-of-range选择值不符合min和max约束的项
:valid选择符合所有约束的项:invalid选择有约束不符合的项
:read-only选择只读的项:read-write选择可编辑的(包括含有contenteditable属性)的项
:required 和 :optional 美化表单

这里会用到::before和::after伪元素
伪元素简单案例

.tip{
    margin-top: 30px;
}
.tip>span{
    position: relative;
    display: inline-block;
}
.tip>span:hover{
    cursor: pointer;
}
.tip>span:hover::before{
    content: attr(data-info);
    position: absolute;
    margin-left: 8px;
    padding: 10px;
    background-color: #aa0088;
    color: #FFF;
    left: 100%;
    top: -60%;
    white-space: pre; 
}
.tip>span:hover::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-right: 8px solid #aa0088;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

<div class="tip">
    <span data-info="这是提示内容">鼠标悬浮显示提示</span>
</div>

表单美化案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>:required和:optional美化表单</title>
    <style>
        *{margin: 0;padding: 0;}
        .container{width: 400px;margin: 30px auto;}
        input,select,textarea{
            width: 240px;
            margin: 10px 0;
            border:1px solid #999;
            padding: .5em 1em;
        }
        input:focus,select:focus,textarea:focus{
            outline: 0;
        }
        label{color: #999;margin-left: 30px;}

        /*必填项*/
        input:required,textarea:required{
            border-right: 3px solid #FF3030;
        }
        input:required:focus,textarea:required:focus{
            box-shadow: 0 0 3px 1px #FF3030;
        }
        input:required+label::after{
            content: "(必填)";
        }
        /*选填项*/
        input:optional,select:optional{
            border-right: 3px solid #66ccff;
        }
        input:optional:focus,select:optional:focus{
            box-shadow: 0 0 3px 1px #66ccff;    
        }
        input:optional+label::after{
            content: "(选填)";
        }

        input[type="submit"]{
            background-color: #FF3030;
            border: 3px solid #FF3030;
            color: #FFF;
        }
        input[type="submit"]:hover{
            background-color: #FF0000;
        }
    </style>
</head>
<body>
    <div class="container">
        <form action="#">
            <input type="text" name="username" required /><label>用户名</label>
            <input type="email" name="email" required /><label>邮箱</label>
            <input type="tel" name="tel"><label>手机号</label>
            <input type="url" name="url"><label>网址</label>
            <select name="aihao">
                <option value="0">非必填选项1</option>
                <option value="1">非必填选项2</option>
                <option value="2">非必填选项3</option>
                <option value="3">非必填选项4</option>
                <option value="4">非必填选项5</option>
            </select>
            <textarea name="content" cols="30" rows="10" placeholder="留言(必填)" required></textarea>
            <input type="submit" />
        </form>
    </div>
</body>
</html>
:valid和invalid美化表单验证
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .container{
            width: 600px;
            margin: 30px auto;
        }
        form>.form-group{
            position: relative;
        }
        input{
            width: 240px;
            height: 20px;
            line-height: 20px;
            padding: .5em 1em;
            outline: 0;
            text-indent: 30px;
            border-radius: 6px;
        }
        input+label{
            position: absolute;
            top: 6px;
            left: 10px;
        }
        input,input+label{
            transition: all .4s;
        }
        input:valid{
            border: 1px solid #C0FF3E;
        }
        input:invalid{
            border: 1px solid #aa0088;
        }
        input:hover,input:focus,input:valid{
            text-indent: 0px;
        }
        input:hover+label,input:focus+label,input:valid+label{
            transform: translateX(-150%);
        }

        input:valid~span.tip::after{
            content: attr(data-right-tip);
        }
        input:invalid~span.tip::after{
            content: attr(data-error-tip);
        }

    </style>
</head>
<body>
    <div class="container">
        <form action="#">
            <div class="form-group">        
                <input type="email" id="email" name="email" required autocomplete="off" placeholder="请输入邮箱" />
                <label for="email">邮箱</label>
                <span class="tip" data-right-tip="您输入邮箱正确" data-error-tip="你输入邮箱错误"></span>
            </div>
        </form>     
    </div>
</body>
</html>

请添加图片描述

HTML5自带表单验证常用事件

常用的三个事件：

事件说明
oninput实施监听input框中的输入的值
oninvalid当输入的值不符合验证约束触发
onchangeonchange 当文本框失去焦点时，检查input里的值是否符合要求，执行函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用表单事件</title>
    <style>
        .container{
            width: 600px;
            margin: 40px auto;
        }
        form>div.form-group{
            margin-bottom: 30px;
        }
        input,select{
            width: 240px;
            padding:5px;
            height: 40px;
            line-height: 40px;
            box-sizing: border-box;
            border-radius: 7px;
            outline: 0;
            border: 1px solid #999;
        }
        input:valid{
            border: 1px solid #00FF00;
        }
        input:focus:invalid{
            border: 1px solid #FF0000;
        }
        input[type="submit"]{
            height: 30px;
            padding: 5px;
            line-height: 30px;
            border: 1px solid #999;
        }
    </style>
</head>
<body>
    <div class="container">
        <form action="#">
            <div class="form-group">
                <label for="username">手机</label>
                <input type="text" name="username" id="username" pattern="^1[0-9]{10}$" placeholder="请输入手机号码" required oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('请输入正确手机号码!')" />
            </div>
            <div class="form-group">
                <label for="passward">密码</label>
                <input type="password" name="password" id="password" pattern="^[a-zA-Z0-9]\w{5,19}$" placeholder="请输入密码" required oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('请输入正确密码')" onchange="checkpassword()" />
            </div>
            <div class="form-group">
                <label for="repassward">确认密码</label>
                <input type="password" name="repassword" id="repassword" placeholder="请确认密码" required onchange="checkpassword()" />
            </div>
            <div class="form-group">

                <label for="select">选项</label>
                <select name="select" id="select">
                    <option value="" checked>-- 无 --</option>
                    <option value="0">必填选项1</option>
                    <option value="1">必填选项2</option>
                    <option value="2">必填选项3</option>
                    <option value="3">必填选项4</option>
                </select>
            </div>
            <div class="form-group">
                <input type="submit"/>
            </div>
        </form> 
    </div>
    <script>
        function checkpassword(){
            var passwordEle = document.getElementById('password');
            var repasswordEle = document.getElementById('repassword');          
            if(passwordEle.value!=repasswordEle.value){
                repasswordEle.setCustomValidity('两次输入密码不一致!');
            }else{
                repasswordEle.setCustomValidity('');
            }
        }
    </script>
</body>
</html>

HTML5自带验证默认气泡美化

使用伪类元素不靠谱。
目前的思路：

  • 阻止浏览器默认气泡提示
  • 创建新的统一样式的气泡提示
    例子1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认气泡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div.container{
            width: 600px;
            margin: 30px auto;
        }
        .tip{
            color: #FF0000;
        }

        form>div{
            margin: 30px 0 30px 0;
        }
        form>div>label{
            display: inline-block;
            width: 100px;
        }
        form>div>input{
            width: 240px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form action="#" autocomplete="off" id="myform">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" name="username" id="username" placeholder="请输入用户名" required />
                <span class="tip"></span>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" name="password" id="password" placeholder="请输入密码" required />
                <span class="tip"></span>
            </div>
            <div class="form-group">
                <label for="email">邮箱:</label>
                <input type="email" name="email" id="email" placeholder="请输入邮箱" required />
                <span class="tip"></span>
            </div>
            <div class="form-group">
                <input type="submit" id="submit" />
            </div>
        </form>     
    </div>
    <script>
        var formEle = document.getElementById('myform');
        initInvalidity(formEle);

        function initInvalidity(form){

            form.addEventListener('invalid',function(event){
                event.preventDefault();
            },true);    //阻止浏览器的默认气泡，在捕获阶段

            form.addEventListener('submit',function(event){
                if(!this.checkValidity()){
                    event.preventDefault();

                }
            },true);

            var submitBtn = document.getElementById('submit');
            submit.addEventListener('click',function(event){
                var inValidEle = form.querySelectorAll(":invalid");

                for(var i=0,len=inValidEle.length; i<len; ++i){
                    inValidEle[i].parentNode.getElementsByClassName('tip')[0].innerHTML = '';
                }

                for(var i=0,len=inValidEle.length; i<len; ++i){
                    inValidEle[i].parentNode.getElementsByClassName('tip')[0].innerHTML = inValidEle[i].validationMessage;
                }

            });
        }
    </script>
</body>
</html>

美化的样式没写
请添加图片描述
例子2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
.oneline {
    line-height: 1.5;
    margin: 10px auto;
}

.oneline label {
    width: 100px;
    text-indent: 15px;
    font-size: 14px;
    font-family: "Microsoft Yahei";
    display: inline-block;
}

.oneline .sinput {
    width: 60%;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #e2e2e2;
}

.oneline input[type="submit"] {
    margin-left: 20px;
    width: 80px;
    height: 30px;
    border: 0;
    background-color: #5899d0;
    color: #fff;
    font-size: 14px;
    border-radius: 6px;
}

.error-messages {
    color: red;
}
</style>

<body>
    <form id="forms">
        <div class="oneline">
            <label for="name">用户名:</label>
            <input id="name" class="sinput" name="name" type="text" required>
        </div>
        <div class="oneline">
            <label for="email">Email:</label>
            <input id="email" class="sinput" name="email" type="email" required>
        </div>
        <div class="oneline">
            <input type="submit" id="submits" value="提交">
        </div>
    </form>
    <script>
    function replaceValidationUI(form) {
        form.addEventListener("invalid", function(event) {
            event.preventDefault();
        }, true);
        form.addEventListener("submit", function(event) {
            if (!this.checkValidity()) {
                event.preventDefault();
            }
        });

        var submitBtn = document.getElementById('submits');
        submitBtn.addEventListener("click",function(){
            var invalidFields = form.querySelectorAll(':invalid'),
            errorMessages = form.querySelectorAll('.error-messages');

            for(var i=0,len=errorMessages.length; i<len; ++i){
                errorMessages[i].parentNode.removeChild(errorMessages[i]);
            } 

            for(var i=0,len=invalidFields.length; i<len; ++i){
                invalidFields[i].parentNode.insertAdjacentHTML("beforeend","<div class='error-messages'>"+invalidFields[i].validationMessage+"</div>");
            }

            if (invalidFields.length > 0) {
                invalidFields[0].focus();
                //errorMessages.style.display = "block";
            }
        });


    }
    var forms = document.getElementById("forms");
    replaceValidationUI(forms);
    </script>
</body>

</html>

请添加图片描述

辕小白
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5中的表单验证
wd
07-01 962
1.使用占位符placeholder。但是这个在chrome不是很好用，需要在你输入的时候才会消失提示符，而不是在聚焦就消失 2.为了在聚焦的时候更改样式，则可以通过： input:focus{ } 3.使用title属性，如下： 4.使用autofocus，在打开页面的时候自动聚焦，如下： 5.required。告诉用户这是必填项目，代码如下：
HTML5表单及其验证
joshua
01-09 586
HTML表单一直都是Web的核心技术之一，有了它我们才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API，方便我们做更复杂的应用，而不用借助其它Javascript框架，先说下表单的几个基本知识点： 表单仍是以元素作为容器，我们可在其中设置基本的提交特性； 当用户提交页面时，表单仍然向服务器发送表单控件的值； 之前老版本中的表单控件，如text
HTML5中表单验证的8种方法
热门推荐
teresa502的专栏
01-21 3万+
在深人探讨表单验证之前，让我们先思考一下表单验证的真实含义。就其核心而言，表单验证是一套系统，它为终端用户检测无效的控件数据并标记这些错误。换言之，表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。 但是真正的表单验证是什么？ 是一种优化。 之所以说表单验证是一种优化，是因为仅通过表单验证机制不足以保证提交给服务器的表单数据是正确和有效的。另一方面，设计表单验证是为了让W
HTML5中表单提交的几种验证方法盘点
xiaoweids的博客
06-05 793
转自：微点阅读 https://www.weidianyuedu.com一、自动验证我们可以通过元素的属性设置，进行表单提交的验证。required属性此属性可以应用在大多数输入元素上（除了隐藏元素、图片元素按钮上）。提交时，如果元素为空，则在浏览器中显示信息提示文字，提示用户必须输入内容。具体写法如下：pattern属性开发者可以在此属性中设置正则表达式，提交表单时，会根据pattern中的正则表达式进行检验，如果不符合给定的格式时，浏览器中会显示信息提示文字，提示输入的内容必须符合给定格式。min与m
2024年运维最全HTML5基础----表单验证和下拉框_html(5)，2024年最新【面试总结
最新发布
2401_83621426的博客
05-09 463
本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。另外,本书还为读者提供了大量的Linux学习资料和Ubuntu安装镜像文件，供读者免费下载。需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论。
html中load函数和区别,overload和override的区别是什么？
weixin_28307725的博客
06-25 273
Overload是重载的意思，表示在同一个类中，允许存在一个以上的同名函数，只要他们的参数个数或者参数类型不同即可Override是覆盖的意思，也就是重写，它与返回值类型无关，度只看参数列表，两者不同主要体现在：目的不同、范围不同、参数不同、多态性不同、返回类型不同。overload和override的区别1、目的不同overload用于增加程序的可读性(做法不同,但是做的同一事情)。 over...
html5表单验证
u011165335的博客
12-24 1009
h5新增的表单验证都存在了ValidityState对象中,该对象是通过validity 属性获取的， 该对象有11个属性; 1．valueMissing属性 必填的表单元素的值为空。对应required 2．typeMismatch属性 输入值与type类型不匹配,如email、number、url等 3．patternMismatch属性 输入值与pattern特性的正则不匹配。 4．tooL...
HTML5中表单提交的几种验证方法
hdxx2022的博客
03-05 489
调用该方法，可以显示的对表单内所有元素内容或单个元素内容进行有效性验证。此属性可以应用在大多数输入元素上（除了隐藏元素、图片元素按钮上）。，提交表单时，会根据pattern中的正则表达式进行检验，如果不符合给定的格式时，浏览器中会显示信息提示文字，提示输入的内容必须符合给定格式。第二种方法是利用input元素或submit元素的formnovalidate属性，此属性可以让表单验证对单个元素失效。min与max属性是数值类型或日期类型的input元素的专用属性，他们限制输入的数值与日期的范围。
js浏览器html5表单验证
10-21
主要为大家详细介绍了js浏览器html5表单验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap风格的html5表单验证示例
04-16
在这个“bootstrap风格的html5表单验证示例”中，我们将深入探讨如何结合这两者来创建高效且用户友好的表单。 1. **HTML5表单元素**：HTML5新增了多种表单元素，如`<input type="email">`用于电子邮件输入，`...
javascript html5实现表单验证
10-22
主要为大家详细介绍了javascript html5实现表单验证的具体代码，感兴趣的小伙伴们可以参考一下
HTML5 表单验证失败的提示语问题
09-27
主要介绍了HTML5 表单验证失败的提示语问题的相关资料,需要的朋友可以参考下
基于Bootstrap5的Tab标签页的小组件，能让HTML5表单验证的提示信息在Bootstrap5的Tab标签页能正常显示
02-14
在这个基于Bootstrap5的Tab标签页小组件中，我们专注于如何让HTML5表单验证的提示信息在Tab标签页内正确地显示，这对于提升用户体验至关重要。 HTML5是现代网页开发的标准，它引入了许多新的元素和功能，其中就包括...
一个HTML5表单验证效果.rar
07-10
HTML5表单验证是现代网页开发中的重要组成部分，它允许开发者在客户端实现数据验证，从而提高用户体验并减轻服务器端的压力。这个"一个HTML5表单验证效果.rar"压缩包文件包含了一个实例，演示了如何使用HTML5的内置...
HTML5表单验证特性(知识点小结)
11-21
html5表单新增的类型： email url range number date(date, month, week, time, datetime, datetime-local) search color tel 去掉chrome记住密码后自动填充表单的黄色背景： autocomplete="off" 可以加在input或者...
html5 数据验证,【译】表单数据校验
weixin_39820437的博客
06-04 474
当你需要经常在服务器上校验数据时，在Web页面上的另加校验就有诸多好处。多数情况下，用户会被表单惹恼。而当用户填完表单时就校验数据，既有助于用户立即发现他们犯的错误，也能减少等待HTTP响应的时间、并减少服务器对错误表单输入的处理。本文介绍的，就是如何在表单所在页面对表单数据进行校验。使用浏览器内置的表单校验HTML5的一大特性，就是在不依赖脚本的情况下校验大多数的用户数据。该特性是通过使用表单元...
HTML笔记
qq_57126478的博客
01-30 1169
HTML HTML基本信息HEML基本结构网页的基本标签标题标签段落标签换行标签水平线标签字体样式标签特殊符号标签基本标签链接标签行内元素和块元素列表无序列表有序列表定义列表表格标签媒体元素页面结构分析iframe内联框架表单form（post、get）文本框密码框单选框多选框按钮下拉框滑块表单的应用隐藏域hidden只读onlyread禁用disabled表单初级验证用户提示 placeholder非空判断 required正则表达式 pattern 基本信息 HTML（Hyper Text
html5表单验证规则
06-07
HTML5 提供了一些新的表单验证规则，可以通过设置 input 元素的 type 属性或添加相应的属性来使用。以下是一些常见的 HTML5 表单验证规则： 1. required 规则：表示该字段为必填项，如果该字段为空则无法提交表单。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值