HTML5约束验证API_html-js-css

概述HTML5约束验证API： willValidate 表示如果元素的约束没有被符合则值为 false validity validationMessage 用于描述与元素相关约束的失败信息。

HTML5约束验证API：

willValIDate 表示如果元素的约束没有被符合则值为 false

valIDity

valIDationMessage 用于描述与元素相关约束的失败信息。

checkValIDity() 表示如果元素没有满足它的任意约束，返回false，其他情况返回 true

setCustomValIDity() 设置自定义验证信息。

HTML5新增特性：

ID===document.getElementByID

但是不推荐直接使用ID，因为兼容性不太好，而且容易与其他变量混淆，后期不易维护

valIDity对象：

<!DOCTYPE HTML><HTML lang="en"head>    Meta charset="UTF-8"Title>form</bodyform action="" enctype="multipart/form-data">        input type="text" name="username" ID placeholder="请输入" required pattern="/\d{4}^$/"="submit" value="提交"form>    script>        console.log(username.valIDity);    HTML>

各属性解释：

（1）获取描述与元素相关约束的失败信息，用valIDationMessage。在提交表单时，设置约束验证条件。

（2）获取表单和提交按钮。设置监听事件，监听表单提交按钮的点击事件！当按钮点击时，获取表单中所有不符合验证条件的元素，然后通过for循环，把这些元素的valIDationMessage错误信息打印出来！

>="UTF-8" />        >document method="get"="forms">             required="提交"="submitBtn">            var form = document.getElementByID("forms),submitBtn submitBtn);            submitBtn.addEventListener(click,function() {                 invalIDFIElds  form.querySelectorAll(:invalID);                for( i0; i<invalIDFIElds.length; i++){                    console.log(invalIDFIElds[i].valIDationMessage);                }            });        >

="/\d{4}^$/" maxlength="5"="email"="email">        <!-- 如果输入的邮箱格式不对，那么typeMismatch就会是true -->        ="search"="search"        console.log(document.getElementByID(username)===username);//true        console.log(username.valIDity);        console.log(email.valIDity);    >

search框右边有个叉叉，如果想要去掉，可以用谷歌浏览器的伪类

style>        /*这种方式在safari中可能会出问题，因此移动端不推荐*/        input[type="search"]::-webkit-search-cancel-button{            -webkit-appearance:none;去掉右侧叉叉            height15px            wIDth            background-color #abcdef可以换成自己的背景图url*/        }    >

但是这种方式在safari浏览器中会有点击问题，不建议在移动端使用

建议使用div元素，绝对定位，再添加点击事件

="number" min="3" max="5"="2">

如果要设置number中只能输入5位，用max或者maxlength都不好使

需要使用Js

 oninput="checkLength(this,5)">

function checkLength(obj,len){            if(obj.value.length>len){                obj.value=obj.value.substr(0,len);            }        }

据说如果number中提交的数据是2位小数，提交到后台会自动舍去小数

（教程里这样说来着，我自己没试过没发现==）

解决方法是添加step

="0.02" step="0.01">

如果不想要number中自带的上下箭头，解决如下：

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{            -webkit-appearance:none;            margin:0;        }

checkvalIDity

全部满足返回true，有一个不满足就返回false

="cyy"if(email.checkValIDity()){            alert("是邮箱");        }else{            alert("不是邮箱");        }

 patternif(username.checkValIDity()){            alert("符合");        }else{            alert("不符合");        }

setCustomValIDity()

 required oninput="checkit(this)"function checkit(obj){            var valIDity=obj.valIDity;            console.log(valIDity);            if(valIDity.patternMismatch===true){                obj.setCustomValIDity("不符合正则");            }else{                obj.setCustomValIDity("");            }        }

总结

以上是内存溢出为你收集整理的HTML5约束验证API全部内容，希望文章能够帮你解决HTML5约束验证API所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1026830.html