XHTML5 ----- 表单验证(用户名、密码和email检测)
2015-09-24 23:54
701 查看
指向表单元素
<form id="myForm" action="http://www.baidu.com"></form>
<input type="text" form="myForm">
<input type="submit" form="myForm">
关于email
<form id="myForm" action="http://www.baidu.com"></form>
<input type=email name=email form="myForm">
<input type="submit" form="myForm">
关于url
<form id="myForm" action="http://www.baidu.com"></form>
<input type=url name=url form="myForm">
<input type="submit" form="myForm">
关于时间
<form id="myForm" action="http://www.baidu.com"></form>
<input type=url name=url form="myForm">
<input type="date">
<input type=time>
<input type=month>
<input type=week>
<input type=datetime>
<input type=datetime-local/>
后边两个支持率相当差,不推荐使用
关于number
<input type="number" max=10 min=0 step=2 value="5"/>
关于range
<input type="range" value="100" />
<input type="range" max=10 min=0 step=1 value=5>
关于color
<input type="color" value="#34538b" />
placeholder
<input id=placeholders placeholder="点击我会以清除">
required默认验证规则
<input id=placeholder name=name required form="myForm">
<input id=placeholder name=require1 required="required" form="myForm">
自定义验证
<input name=require2 pattern="^[1-9]\d{5}$" form="myForm">
maxLength
<textarea id="notes" name="notes" maxLength="10"></textarea>
关于提示文字
<input id=placeholder name=require1 required="required" oninvalid="setCustomValidity('滚蛋')" form="myForm">
<input name=require2 pattern="^[1-9]\d{5}$" oninput="setCustomValidity('gun')" form="myForm">
autofocus自动获得焦点
maxLength<textarea id="notes" name="notes" maxLength="10" autofocus="true"></textarea>
自动完成功能,垃圾
<form action="#" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
novalidate
<form action="http://www.baidu.com" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
完整代码如下:
<form id="myForm" action="http://www.baidu.com"></form>
<input type="text" form="myForm">
<input type="submit" form="myForm">
关于email
<form id="myForm" action="http://www.baidu.com"></form>
<input type=email name=email form="myForm">
<input type="submit" form="myForm">
关于url
<form id="myForm" action="http://www.baidu.com"></form>
<input type=url name=url form="myForm">
<input type="submit" form="myForm">
关于时间
<form id="myForm" action="http://www.baidu.com"></form>
<input type=url name=url form="myForm">
<input type="date">
<input type=time>
<input type=month>
<input type=week>
<input type=datetime>
<input type=datetime-local/>
后边两个支持率相当差,不推荐使用
关于number
<input type="number" max=10 min=0 step=2 value="5"/>
关于range
<input type="range" value="100" />
<input type="range" max=10 min=0 step=1 value=5>
关于color
<input type="color" value="#34538b" />
placeholder
<input id=placeholders placeholder="点击我会以清除">
required默认验证规则
<input id=placeholder name=name required form="myForm">
<input id=placeholder name=require1 required="required" form="myForm">
自定义验证
<input name=require2 pattern="^[1-9]\d{5}$" form="myForm">
maxLength
<textarea id="notes" name="notes" maxLength="10"></textarea>
关于提示文字
<input id=placeholder name=require1 required="required" oninvalid="setCustomValidity('滚蛋')" form="myForm">
<input name=require2 pattern="^[1-9]\d{5}$" oninput="setCustomValidity('gun')" form="myForm">
autofocus自动获得焦点
maxLength<textarea id="notes" name="notes" maxLength="10" autofocus="true"></textarea>
自动完成功能,垃圾
<form action="#" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
novalidate
<form action="http://www.baidu.com" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
完整代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> </style> </head> <body> <form action="http://www.baidu.com" method="post" onsubmit="return check()"> 姓名<input type="text" name="uName" id="uName" onblur="checkName()"><span id="nameMessage"></span><br/> 密码<input type="password" name="uPwd" id="uPwd" onblur="checkPwd()"><span id="pwdMessage"></span><br/> email<input type="text" name="uEmail" id="uEmail" onblur="checkEmail()"><span id="emailMessage"></span><br/> <input type="submit"> </form> <script type="text/javascript"> /** * checkName()---检查用户名是否合法 * 返回值---boolean * 执行成功--返回是否boolean */ function checkName(){ //找到要检测的输入框并且取得输入框当前的值 var uName=document.getElementById("uName").value; var message=document.getElementById("nameMessage") //判断 //是否为空 最小/大长度 if(uName.length==0){ message.innerText="用户名不能为空" return false; }else if(uName.length<6||uName.length>16){ message.innerText="用户名长度在6-16位之间" return false; }else{ message.innerText="用户名可以使用" return true; } } /** * checkPwd()---检查用户输入密码是否合法 * 返回值---boolean * 执行成功--返回是否boolean */ function checkPwd(){ //找到要检测的输入框并且取得输入框当前的值 var uPwd=document.getElementById("uPwd").value; var message=document.getElementById("pwdMessage") //判断 //是否为空 最小/大长度 if(uPwd.length==0){ message.innerText="密码不能为空" return false; }else if(uPwd.length<6||uPwd.length>16){ message.innerText="用户密码长度在6-16位之间" return false; }else{ message.innerText="恭喜你可以使用" return true; } } function checkEmail(){ //找到要检测的输入框并且取得输入框当前的值 var eEmail=document.getElementById("uEmail").value; var message=document.getElementById("emailMessage") //email是否合法 //liuyunfeng2011@gmail.com var v1=eEmail.indexOf('@') var v2=eEmail.indexOf('.') if(v1==-1||v2==-1||v1>v2){ message.innerHTML="请输入正确的email邮箱地址" return false; }else { //liuyunfeng2011@gmail.com var v=eEmail.substring(0,v1); message.innerHTML="邮箱正确"+v; return true; } } function check(){ return checkName()&&checkPwd()&&checkEmail(); } </script> </body> </html>
相关文章推荐
- html5常用新增标签
- XHTML5 ----- 拖拽事件 (拖拽一段文字和图片案例)
- 关于表单的提交方式(html5)
- html5_ajax
- XHTML5 ----- 实现多媒体播放
- HTML5中的表单+Ajax+localStorage+Cookie
- html5 localStorage and cookie
- HTML5 history新特性pushState、replaceState
- HTML5表单及其验证【html自带属性验证】
- HTML5与CSS3基础教程-前言笔记
- 小强的HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)
- 小强的HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)
- 小强的HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)
- 学习html5的video标签
- 下载网页中的html5视频之手动方法
- HTML5本地存储之Web Storage篇
- HTML5本地存储之Database Storage篇
- 小强的HTML5移动开发之路(18)——HTML5地理定位
- 小强的HTML5移动开发之路(18)——HTML5地理定位
- 小强的HTML5移动开发之路(18)——HTML5地理定位