一、表单

<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. 静态变量数组实现LRU算法

    LRU算法的解释详情请见 https://baike.baidu.com/item/LRU/1269842 这里百度百科给出的比较详细,然后后面有一个例子 说 LRU(least recently u ...

  2. SegmentedControl的使用

    原文 http://blog.csdn.net/hmt20130412/article/details/38390493 @UISegmentedControl类似于UIButton,它可以提供多个选 ...

  3. date类型数据插入

    --字段类型是dateinsert into tab(column) values(to_date('2017_06_30 11:38:22','yyyy-mm-dd hh24:mi:ss'));-- ...

  4. poj_1204 Trie图

    题目大意 给出一个RxC的字符组成的puzzle,中间可以从左向右,从右到左,从上到下,从下到上,从左上到右下,从右下到左上,从左下到右上,从右上到左下,八个方向进行查找字符串.     给出M个字符 ...

  5. 腾讯云CMQ消息队列测试

    版权声明:本文由王冲原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/128 来源:腾云阁 https://www.qclou ...

  6. N小时改变一次url时间戳的方法

    //为url添加时间戳//time 为多长时间改变一次时间戳,以小时为单位function setTimeStamp(url, time){    var time = time || 4,      ...

  7. sencha touch 问题汇总

    做sencha touch有一段时间了,目前而言,sencha touch在android上问题比较严重,在此对android中sencha touch的问题做一些汇总: 1.内存问题: 打包成安装程 ...

  8. linux动态查看某组进程状态的办法

    这里记录一下我监控某组进程的解决办法. 1.首先要获取要监控的进程的进程id,如果你要勇ps grep 那你就out了,强大的linux系统有一个pidof命令,用来查找相关进程的进程id,其实还有一 ...

  9. Oracle下Delete语句

    Delete语句 基本语法: delete from 表名 where 条件 注意事项: 1,如果不使用where子句,将表中所有数据全部删除 delete from test; 2,如果要删除某列的 ...

  10. java 标识符与变量

    一.Java 标识符三要素 1.标识符由字母.下划线(_).美元符号($)或者字母组成. 2.标识符应以字母.下划线(_).美元符开头. 3.标识符字符大小写敏感,长度无限制. 标识符最重要的就是 见 ...