一、表单

<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. swift--Timer实现定时器功能，每个一段时间执行具体函数，可以重复，也可以只执行一次

    1,创建 //控制器 timer = Timer.scheduledTimer(timeInterval: 0.001, target: self, selector: #selector(Fifte ...

  2. ios开发之--判断奇偶数

    ==) {//如果是偶数 }else{//如果是奇数 } 记录下!

  3. C++说明符和限定符

    有些被称为存储说明符(storage class specifier)或cv-限定符(cv-qualifier)的C++关键字提供了一些有关存储的信息.下面是存储所说明符:* auto (在C++11 ...

  4. POJ 3122 Pie

    题目大意: 给出n个pie的直径,有f+1个人,如果给每人分的大小相同(形状可以不同),每个人可以分多少.要求是分出来的每一份必须出自同一个pie,也就是说当pie大小为3,2,1,只能分出两个大小为 ...

  5. 对规范中每个模块只允许一个id的理解

    优点: 每个模块只有一个ID,并且在css中不适用ID,ID从模板中传入js中,则该模块的复用灵活性会非常高.想要复用该模块时,只需要改动两个地方.一个是html中的ID,另外一个是写到全局conf. ...

  6. mouseover&mouseout和mouseenter&mouseleave

    mouseenter&mouseleave: 进入被选元素触发,进入被选元素的子元素不会重复触发. mouseover&mouseout: 进入被选元素触发,从被选元素进入其子元素会再 ...

  7. HDU 4455 Substrings[多重dp]

    Substrings Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  8. 【BZOJ1713】[Usaco2007 China]The Bovine Accordion and Banjo Orchestra 音乐会 斜率优化

    [BZOJ1713][Usaco2007 China]The Bovine Accordion and Banjo Orchestra 音乐会 Description Input 第1行输入N,之后N ...

  9. c# Socket通信基础

     一.IP地址操作类   1.IPAddress类 a.在该类中有一个 Parse()方法,可以把点分的十进制IP表示转化成IPAddress类,方法如下: IPAddress address = I ...

  10. 【Android】android string.xml前后加空格的技巧

    android string.xml 文字中间加入空格 <string name="password">密    码</string> &#160 ...