您的位置：首页 > Web前端 > HTML5

html5的Form新特性

2016-06-04 12:03 453 查看
form新增的输入型控件：

名称说明图例
email电子邮箱文本框，显示跟普通的没什么区别
tel电话号码，pc端不会有明显的变化，但是移动端会自动切换键盘,输入有误不会阻止默认提交
url网页url
search搜索引擎，chrome下输入文字后，会多出一个关闭的X
range特定范围内的数值选择器，min、max、step( 步数 )
number只能包含数字的输入框,有键盘监听，不能输入其他字符。
color颜色选择器
datetime显示完整日期直接使用好像不行
datetime-local显示完整日期，不含时区
time显示时间，不含时区
date显示日期、时间控件
week显示周
month显示月
Form新增表单特性和函数　　

placeholder : 输入框提示信息。

autocomplete : 是否保存用户输入值。默认为on，关闭提示选择off。

autofocus : 指定表单获取输入焦点。

list和datalist : 为输入框构造一个选择列表。

list值为datalist标签的id。

required : 此项必填，不能为空。（可以直接破解）

Pattern : 正则验证 pattern="\d{1,5}"。（可以直接破解）

Formaction 在submit里定义提交地址，重写表单的action属性。

Form表单验证

Invalid事件：oText.addEventListener("invalid",fn1,false);

validity对象，通过下面的valid可以查看验证是否通过。

阻止默认验证：ev.preventDefault()。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post" id="myForm">
<input type="text" id="username" name="username" required="required"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById("username");
//如果不添加监听函数，username不填写，浏览器会默认阻止form提交，并给出提示：请填写此字段。
//如果有添加，验证失败会先执行该函数，且this.validity.valid的值为false。
//如果在函数中不添加ev.preventDefault();浏览器同样会给出提示：请填写此字段。添加则意味着阻止默认提示。
oInput.addEventListener("invalid",function(ev){
console.log(this.validity.valid);
//            ev.preventDefault();
},false);
}
</script>


formnovalidate属性：用在<input type="submit" value="提交" formnovalidate="formnovalidate"/>中，添加该属性，则关闭验证。

valueMissing : 输入值为空时。

typeMismatch : 控件值与预期类型不匹配。

patternMismatch : 输入值不满足pattern正则。

tooLong : 超过maxLength最大限制。

rangeUnderflow : 验证的range最小值。

rangeOverflow：验证的range最大值

stepMismatch: 验证range 的当前值 是否符合min、max及step的规则。

setCustomValidity(); 自定义验证。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="myForm" action="" method="post">
<input type="text" name="" id="myNumber" value=""  required="required"/>
<input type="submit" name="" id="" value="提交" />
</form
</body>

</html>
<script type="text/javascript">
window.onload = function(){
var oNumber = document.getElementById("myNumber");
oNumber.setCustomValidity("必填项，请输入！");
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航