表单验证—html5新特性表单验证
一、表单
<body>
<section id="register">
<div><img src="data:images/logo.jpg" alt="logo" /><img src="data:images/banner.jpg" alt="banner" /></div>
<h1 class="hr_1">新用户注册</h1>
<form action="register_success.htm" method="post" name="myform" id="myform2">
<dl>
<dt>用户名：</dt>
<dd><input id="user" type="text" placeholder="以英文字母开头，4~16个字母或数字" required pattern="[a-zA-Z][a-zA-Z0-9]{3,15}"/></dd>
</dl>
<dl>
<dt>密码：</dt>
<dd><input id="pwd" type="password" placeholder="4~10个字母或数字" required pattern="[a-zA-Z0-9]{4,10}"/></dd>
</dl>
<dl>
<dt>确认密码：</dt>
<dd><input id="repwd" type="password"placeholder="4~10个字母或数字" required pattern="[a-zA-Z0-9]{4,10}"/></dd>
</dl>
<dl>
<dt>电子邮箱：</dt>
<dd><input id="email" type="email"placeholder="含有@和." required pattern="([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+"/></dd>
</dl>
<dl>
<dt>手机号码：</dt>
<dd><input id="mobile" type="text" placeholder="1开头的11位数字" required pattern="[1][0-9]{10}"/></dd>
</dl>
<dl>
<dt>生日：</dt>
<dd><input id="birth" type="text"placeholder="格式为1984-9-7或1985-09-07" required pattern="(?:19\d{2}|200\d)-(?:1[0-2]|0?[0-9])-(?:3[01]|[12][0-9]|0?[0-9])"/></dd>
</dl>
<dl>
<dt> </dt>
<dd><input name="" type="image" src="data:images/register.jpg" class="btn" id="image" /></dd>
</dl>
</form>
</section>
</body>
**
* Created by Administrator on */
$(function () { $("#image").click(function () {
//验证用户名
var user = document.getElementById("user");
if(user.validity.valueMissing==true){
user.setCustomValidity("用户名不能为空！");
}else if(user.validity.patternMismatch==true){
user.setCustomValidity("用户名必须是字母开头的4~16位的字母和数字！");
}else{
user.setCustomValidity("");
} //验证密码
var pwd = document.getElementById("pwd");
if(pwd.validity.valueMissing==true){
pwd.setCustomValidity("密码不能为空！");
}else if(pwd.validity.patternMismatch==true){
pwd.setCustomValidity("4~10个字母或者数字");
}else{
pwd.setCustomValidity("");
} //验证密码2
var pwd = document.getElementById("pwd");
var pwd2 = document.getElementById("repwd");
if(pwd2.validity.valueMissing==true){
pwd2.setCustomValidity("密码不能为空！");
}else if(pwd.validity.patternMismatch==true){
pwd2.setCustomValidity("4~10个字母或者数字");
}else if(pwd.value!=pwd2.value){
pwd2.setCustomValidity("两次密码不一致！");
}else{
pwd2.setCustomValidity("");
} //验证邮箱
var email = document.getElementById("email");
if(email.validity.valueMissing==true){
email.setCustomValidity("密码不能为空！");
}else if(email.validity.patternMismatch==true){
email.setCustomValidity("必须包含@和.字符！");
}else{
email.setCustomValidity("");
} //验证手机
var mobile = document.getElementById("mobile");
if(mobile.validity.valueMissing==true){
mobile.setCustomValidity("密码不能为空！");
}else if(mobile.validity.patternMismatch==true){
mobile.setCustomValidity("必须是以1开头的11位数！");
}else{
mobile.setCustomValidity("");
} //验证生日
var birth = document.getElementById("birth");
if(birth.validity.valueMissing==true){
birth.setCustomValidity("密码不能为空！");
}else if(birth.validity.patternMismatch==true){
birth.setCustomValidity("必须以1985-09-08或1985-9-8的格式输入！");
}else{
birth.setCustomValidity("");
} }); });
表单验证—html5新特性表单验证的更多相关文章
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- 第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- 前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
- HTML5新特性：FileReader 和 FormData
连接在这里: HTML5新特性:FileReader 和 FormData
随机推荐
- Effective C++ Item 13 Use object to manage resources
1. Always use object to manage resource! If you delete a pointer or release a handler manually by yo ...
- 什么原因接触接触impala的
最近一个项目,关于大数据的改造项目,底层选择Impala还是sparkSQL呢? 最后选择Impala.这样就开启了我的Impala学习之旅.我大部分负责Imapa接口开发工作. 我是控制不住的想整个 ...
- remove()
remove() 用于从列表中删除指定的元素 In [35]: l = ['a', 'b', 'c'] In [36]: l.remove('b') In [37]: l Out[37]: ['a', ...
- android中必备的接口回调用法
1 ,这个方法很常见,本人觉得也很实用,分享下吧 public class DirverDistanceTool { public void getDirverDistance(LatLng star ...
- Sublime Text 快捷键使用
Sublime Text 2包含了大量快捷操作,而且还很方便修改和追加自己喜欢的快捷键.查看快捷键的方式也很简单:------------------------------------------- ...
- 数据提交方式:post和get
众所周知,在B/S应用程序中,前台与后台的数据交互,都是通过HTML中Form表单完成的.而Form提供了两种数据传输的方式——get和post. Get请求表示客户端请求一个ur ...
- Apktool源码解析——第一篇
著名的apktool是android逆向界用的最普遍的一个工具,这个项目的原始地址在这里http://code.google.com/p/android-apktool/,但是你们都懂的在天朝谷歌是无 ...
- PropertyPlaceholderConfigurer读取配置文件
1. PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现,也就是 BeanFactoryPostProcessor接口的一个实现.PropertyPlaceho ...
- CSS-项目中遇到IE兼容问题，处理随笔
总是忘记给ie做特殊样式处理,以前打游击,不做也就算了,以后可不行,得对自己的“孩子”负责.. 一.先说IE老大的兼容 知道了一些常用的css属性兼容方法确实可以解决问题, 但我不知道我自己的ieTe ...
- python小项目练习之转换像素图片为字符图
实例来源实验楼网站,没事可以多逛逛,在此多谢实验楼的无私分享 from PIL import Image import argparse """ description: ...