一、表单

<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>&nbsp;</dt>

            <dd><input name="" type="image" src="data:images/register.jpg" class="btn" id="image" /></dd>

        </dl>

  </form>

</section>

</body>
二、js验证
**

 * 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新特性表单验证的更多相关文章

  1. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

  2. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  3. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  4. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  5. 第二季第八天 HTML5新特性

    在函数内部window.a =  a  在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...

  6. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  7. 前端进阶系列(三):HTML5新特性

    HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...

  8. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  9. HTML5新特性：FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

随机推荐

  1. iOS 开发 - iOS 8 以后使用UIAlertController的使用

    最近在写项目的时候,发现使用alertview和actonsheet会报警告,所以就查了一下,发现ios 9 以后会使用UIAlertController来进行操作, 具体代码如下: 1.声明 #im ...

  2. Websphere停止服务不用输入账号密码

    启用了安全性的WebSphere Application Server,在日常维护中经常在停止服务的时候需要输入用户名和密码.停止的方式如下:[root@was /]# /opt/IBM/WebSph ...

  3. CMS3.0——初次邂逅express

    前言: 刚接手cms3.0的工作,似乎对一切都那么的不熟悉,于是在开始新需求之前,先做一个简单的登录系统. 项目目录: 1.使用webstroms建expreess项目,非常方便简单,建好的项目目录就 ...

  4. UIImageView 和 UIWebView 小结

    本文转载至:http://www.cnblogs.com/huangdongcheng/archive/2011/11/21.html 1.UIImageView的讲解 (1)初始化 UIImageV ...

  5. JS-制作留言提交系统（支持ctrl+回车）

    弹出键值说明: //console.log(ev.keyCode)//回车:13//ctrl:17 <!DOCTYPE html> <html> <head> &l ...

  6. IE8及以下的数组处理与其它浏览器的不同

    在解决search-box的bug时,由于IE8-的数组处理与其它浏览器的不同,而导致报错. 示例:arr=[1,3,3,]; 当数组的最后是一个逗号时: IE9+默认 arr=[1,3,3];也就是 ...

  7. hdu5411 CRB and Puzzle[矩阵优化dp]

    CRB and Puzzle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  8. 【黑金ZYNQ7000系列原创视频教程】02.视频接口——hdmi编码输出实验

    黑金论坛地址: http://www.heijin.org/forum.php?mod=viewthread&tid=36636&extra=page%3D1 爱奇艺地址: http: ...

  9. IIS 无法访问.net的动态文件

    编译器错误消息:CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319... 在“c:\windows\temp”这个文件夹添 ...

  10. 代码片段，使用TIKA来解析PDF,WORD和EMAIL

    /** * com.jiaoyiping.pdstest.TestTika.java * Copyright (c) 2009 Hewlett-Packard Development Company, ...