一、表单

<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. Python cookielib 模块

    什么是 cookie : 指某些网站为了辨别用户身份,进行 session 跟踪而储存在用户本地终端上的数据,通常以 txt 文件形式存储.比如你登录了淘宝,浏览器就会保存 cookie 信息,这样我 ...

  2. lua和C++交互的lua栈操作——以LuaTinker为例

    一. -- C++类注册函数(LuaTinker) 的lua栈操作: -- lua栈内容(执行到pop语句) 栈地址 <--执行语句 space_name[name] = t1 -- (2b8) ...

  3. UITableView划动删除的实现

    对于app应用来说,使用列表的形式展现数据非UITableView莫属.在熟练掌握了用UITableView展示数据以后,是不是也遇到了需要删除数据的需求?是不是觉得在一行数据上划动一下,然后出现一个 ...

  4. 互斥锁mutex

    https://blog.csdn.net/rqc112233/article/details/50015069 //g++ mute.cpp -o mute -g -lrt -lpthread #i ...

  5. 解决 ssh 登录到ubuntu server 慢的问题

    最近在服务器上使用ubuntu系统,服务器上开启sshd服务,在客户端处使用ssh登录到服务器的时候出现卡顿的现象. 在网上搜索了解决方案,主要是: 1. 修改服务器的 /etc/ssh/sshd_c ...

  6. Linux学习——定义命令行函数(cd .. -> ..)

    在使用shell的时候,每天要面对各种命令行,比如ls , cd .. 等 抱着简单,可依赖的思想.有些可以简化的操作可以要通过在 ~/.bashrc 中进行添加: 1. cd .. -> .. ...

  7. 心脏滴血HeartBleed漏洞研究及其POC

    一.漏洞原理: 首先声明,我虽然能看懂C和C++的每一行代码,但是他们连在一起我就不知道什么鬼东西了.所以关于代码说理的部分只能参考其他大牛的博客了. /* 据说源码中有下面两条语句,反正我也没看过源 ...

  8. 【黑金ZYNQ7000系列原创视频教程】04.熟悉ZYNQ内部中断——内部定时器中断实验

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

  9. 微信小程序5.2.2版本，找不着resource下exml皮肤

    问题描述: egret engine 5.2.2 原来5.1.11好好的,一升级就跪了 新建一个项目,找不到皮肤... 已发到论坛问去了,现在只能手动复制皮肤到小游戏目录下... 解决方案: 卸载重新 ...

  10. R向量匹配match和pmatch

    match(x, table, nomatch = NA_integer_, incomparables = NULL) x: 向量, 要匹配的值; table: 向量, 被匹配的值; nomatch ...