一、表单

<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. ContentPriver

    共享应用程序内的数据, 在数据修改时可以监听 1.特点 ①.可以将应用中的数据对外进行共享: ②.数据访问方式统一,不必针对不同数据类型采取不同的访问策略: ③.内容提供者将数据封装,只暴露出我们希望 ...

  2. excel——之锁定表头不可编辑

    前言: 设置excel表头不可编辑功能.效果如下: 这就意味着,不可随意更改表头数据,除非你有密码. 过程: 1.先随意右键打开一个单元格,查看其中的“设置单元格属性”,即 2.在选中想要编辑的那些数 ...

  3. PyQt4字体对话框QFontDialog

    字体对话框时用来显示字体的对话框部件. #!/usr/bin/python # -*- coding: utf-8 -*- import sys from PyQt4 import QtGui, Qt ...

  4. replace方法的深入理解

    “abc”.replace(/b/, "$`") // $`将正则匹配到的字符替换为匹配到的字符左边的字符 aac “abc”.replace(/b/, "$'" ...

  5. 【BZOJ1045】[HAOI2008] 糖果传递 贪心

    [BZOJ1045][HAOI2008] 糖果传递 Description 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. Input 第一行一个正 ...

  6. Windows Phone WebClient的使用

    webClient对象可用来下载XML文件,程序集等这些数据,其可以实现按需下载,所以还是有必要了解的.其主要包含几个事件:                                       ...

  7. Linux系统下 Supervisor 安装搭建(yum安装)

    安装Supervisor # 安装supervisor yum install supervisor # 打开supervisor的配置文件 vi /etc/supervisord.conf 将sup ...

  8. 【模块化开发】------requireJS的基本使用------【巷子】

    前言 为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了.,下面是某个网站的js引用情况 虽然代码的复用度提升了,但是缺点也体现了出来 缺点: ...

  9. asp.net 下载文件几种方式

    protected void Button1_Click(object sender, EventArgs e) { /* 微软为Response对象提供了一个新的方法TransmitFile来解决使 ...

  10. sqlserver字符串多行合并为一行

    --创建测试表 CREATE TABLE [dbo].[TestRows2Columns]( [Id] [,) NOT NULL, [UserName] [nvarchar]() NULL, [Sub ...