html5 表单样式 表单验证1 2 3
2016-03-17 22:48
603 查看
html5 表单样式 ie9以下不支持
表单验证1
表单验证二
表单验证三
1)、valid
验证元素是否通过所有验证
2)、valueMissing
与required属性相关联,设置了required属性,但是没有赋值,该属性为true
3)、typeMismatch
与type属性相关联,如果输入的数据违反了type类型定义的格式,该属性为true
4)、patternMismatch
与patter属性相关联,如果输入的数据违反了patter属性定义的格式,该属性为true
5)、customError
与setCustomValidity()方法相关的,如果用户设置了setCustomValidity()并且没有清空,该值为true
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> ie 9 不支持 html智能表单form <hr/> <input type="text" list="mydata" autofocus placeholder="请输入电影名称"> <!--autofocus 自动获得焦点--> <!--placeholder 点击input内容消失--> <!--required 必填--> <datalist id="mydata"> <option label="搜索10000次" value="让子弹飞"> <option label="搜索9000次" value="非诚勿扰"> <option label="搜索8000次" value="大笑江湖"> <option label="搜索7000次" value="赵氏孤儿"> <option label="搜索6000次" value="花千骨"> </datalist> <br/><br/><br/><br/><br/> <form action="" method="get" name="res" > 邮件<input type="email"/><br/> 网址<input type="url" ><br/> <!--必填 --> 日期<input type="date"/><br/> 月份<input type="month"> 电话<input type="tel"> 在手机端才有数字键盘效果<br/> <!--时间 time datetime 数字 number--> 进度条 <input type="range" min="0" max="3" step="1"/><br/> 搜索 <input type="search" value="搜索"><br/> 颜色<input type="color"/><br/> 数字<input type="number" min="0" max="100" step="1"/><br/> 时间日期<input type="datetime"/> 正则<input type="text" pattern="[789]+" required/> <input type="submit" value="sub"/> </form> 对本网站的评价:<input type="text" name="txtComment" value="Very Good!" form="res" /> </body> </body> </html>
表单验证1
表单提交时激发 添加默认验证消息 //txtName.setCustomValidity
checkValidity()实现实时验证
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></script> </head> <body> <form method="get"> <input required type="text" id="name" name="name" > <span id="tip">*</span><br> <input type="submit" value="submit"> </form> <script> function $(id){ return document.getElementById(id); } $("name").addEventListener("blur",blurCheck,false); function blurCheck(){ /* var value=$("name").value; if(value.length==0){ // 改变默认提示 $("name").setCustomValidity("用户名不能为空"); }else{ //清空自定义验证,让文本提交 $("name").setCustomValidity(""); }*/ //实时验证 var res=$("name").checkValidity(); if(res){ $("tip").innerHTML="通过"; }else{ $("tip").innerHTML="用户名称不能为空"; } } </script> </body> </html>
表单验证二
invalid 错误时激发
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title></title> <script> function $(id){ return document.getElementById(id); } function initial(){ document.frmLogin.addEventListener("invalid",frmLogin_invalid,true); } //表单执行遇到错误时激发的事件 function frmLogin_invalid(e){ //获取产生错误的元素 var tar = e.target; tar.style.backgroundColor="red"; var tipId = tar.id + "Tip"; $(tipId).innerHTML="请输入正确数据"; } window.addEventListener("load",initial,false); </script> </head> <body> <form name="frmLogin"> 用户名称:<input type="text" id="txtName" required /> <span id="txtNameTip"></span><br /> 用户Email:<input type="email" id="txtEmail" /> <span id="txtEmailTip"></span><br /> <input type="submit" value="提交" /> </form> </body> </html>
表单验证三
实时验证 validity.patternMismatch
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title></title> <script> function $(id){ return document.getElementById(id); } function initial(){ txtName=$("txtName"); txtEmail=$("txtEmail"); txtPhone=$("txtPhone"); //绑定事件 txtName.addEventListener("blur",txtName_blur,false); txtEmail.addEventListener("blur",txtEmail_blur,false); txtPhone.addEventListener("blur",txtPhone_blur,false); } function txtPhone_blur(){ if(txtPhone.validity.patternMismatch){ $("txtPhoneTip").innerHTML="电话号码格式不正确"; } else{ $("txtPhoneTip").innerHTML="通过"; } } function txtEmail_blur(e){ //验证格式是否正确 if(txtEmail.validity.typeMismatch){ $("txtEmailTip").innerHTML="Email格式不正确,请重新输入"; } else { $("txtEmailTip").innerHTML="通过"; } } function txtName_blur(e){ // 判断txtName是否通过了所有的验证 //1、checkValidity //2、通过validity属性的valid状态 var ret = txtName.validity.valid; if(ret){ $("txtNameTip").innerHTML="通过"; }else{ if(txtName.validity.valueMissing){ //数据为空,有required,但是没有输入值 $("txtNameTip").innerHTML="请输入您的姓名"; } } } window.addEventListener("load",initial,false); </script> </head> <body> <form name="frmLogin"> 用户名称:<input type="text" id="txtName" required /> <span id="txtNameTip"></span><br /> 用户Email:<input type="email" id="txtEmail" /> <span id="txtEmailTip"></span><br /> 移动电话:<input type="phone" id="txtPhone" pattern="^1[3,5,4,8,7]\d{9}$" /> <span id="txtPhoneTip"></span><br /> <input type="submit" value="提交" /> </form> </body> </html>
1)、valid
验证元素是否通过所有验证
2)、valueMissing
与required属性相关联,设置了required属性,但是没有赋值,该属性为true
3)、typeMismatch
与type属性相关联,如果输入的数据违反了type类型定义的格式,该属性为true
4)、patternMismatch
与patter属性相关联,如果输入的数据违反了patter属性定义的格式,该属性为true
5)、customError
与setCustomValidity()方法相关的,如果用户设置了setCustomValidity()并且没有清空,该值为true
相关文章推荐
- HTML基础篇--H5新标签及属性
- HTML5自定义属性
- html5篇——音频/视频
- HTML5之FileReader的使用
- HTML5 FileReader
- H5图片压缩与上传
- HTML5 - 使用<video>播放视频
- HTML5 - 使用<audio>播放音频
- HTML5 - 使某个页面元素或整个页面可编辑
- HTML5新控件 - 计量条<meter>
- HTML5新控件 - 进度条<progress>
- HTML5新控件 - 输入框输入提示<datalist>
- HTML5新控件 - 颜色选择器
- HTML5新控件 - 日期和时间选择输入
- H5视频播放有声音无图像
- 【 H5EDU干货】零基础必看!人生不如意必看!留邮箱给源码
- HTML5新控件 - 滑动条
- Html5游戏引擎扩展
- HTML5新控件 - 数值输入框
- HTML5新控件 - 电话号码输入框