一、HTML5表单常用属性
这些都是比较常用的
属性名 | 说明 |
---|---|
placeholder | 在输入框无内容时显示灰色提示 |
autocomplete | 部分输入框和form都可以设置自动提示 off关闭,on开启(默认是on) |
autofocus | 让input自动获取焦点 |
required | 设置表单元素为必填 |
pattern | 表单验证使用正则 |
novalidate | 该属性使用在form标签上,让设置了验证的表单可以直接提交 <form action=”…” novalidate>…</form> |
formnovalidate | 该属性使用在提交按钮上,让设置了验证的表单可以直接提交 <input type=”submit” value=”提交” formnonvalidate /> |
for | <label>的for属性是要配合<input>标签中的id属性使用的,点击label标签for对应id的input标签会获取焦点 |
(一)部分类型的input无法使用placeholder属性提示的解决方案
如输入日期
<input type="text" name="date" onfocus="(this.type='date')" placeholder="请输入日期"/>
点击后
缺点是需要用户点击2次
(二)<label>的for属性使用
<label for="man">男</label>
<input type="radio" id="man" name="sex" />
<label for="woman">女</label>
<input type="radio" id="woman" name="sex" />
<br>
<label for="username">用户名</label>
<input type="text" name="username" id="username" placeholder="请输入用户名" />
点击文字选中单选按钮
二、html5表单元素约束验证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>
控制台会打印出
属性名 | 说明 |
---|---|
valid:true/false | 当前输入是否有效 |
badInput: false/true | 输入的值是否无效 |
patternMismatch: false/true | 正则表达式验证失败 |
rangeOverflow: false/true | 输入值是否超过max的限定 |
rangeUnderflow: false/true | 输入值是否小于min的限定 |
tooLong : false/true | 输入的字符数是否超过maxlength |
tooShort : false/true | 输入的字符数是否小于minlength |
stepMismatch : false/true | 输入的数字不符合step限制 |
typeMismatch : false/true | 输入值不符合email、url的验证 |
valueMissing : false/true | 未输入值,违反了required要求 |
customError : false/true | 是否存在自定义错误 |
- 只要有一个验证方面错误,某个属性就为true,valid值为false
- 只有没有任何验证错误,所有的属性都为false,valid才能为true
- 上述的每个错误在浏览器内部都有一个预定义的错误提示消息
所有的错误消息中,只要存在“自定义的错误消息”,浏览器只显示自定义的错误消息,优先级高于浏览器预定义的错误消息(设置自定义错误消息用setCustomValidity())
当前没有自定义错误消息,所以customError : false
获取与约束相关的属性
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() {
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>
:invalid表示无效,即当填写的内容不符合要求的时候触发,form.querySelectorAll(“:invalid”);表示查询表单失效的元素。
(二)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>
PS:
在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>标签部分类型的限制和去除默认样式
(一)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=