html5表单验证(Bootstrap)

邮箱验证:

<input name="email" type="text" placeholder="必填项" class="input-xlarge" required pattern="^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$"

title="邮箱正确格式:[email protected]">

密码验证:

<div class="control-group">

<label class="control-label">

密码</label>

<div class="controls">

<input id="pwd" name="pwd" type="password" placeholder="必填项" class="input-xlarge"

required onchange="checkPasswords()">

</div>

</div>

<div class="control-group">

<label class="control-label">

确认密码</label>

<div class="controls">

<input id="pwd1" name="pwd1" type="password" placeholder="必填项" class="input-xlarge"

required onchange="checkPasswords()">

</div>

</div>

验证方法:

<script>

function checkPasswords() {

var passl = document.getElementById("pwd");

var pass2 = document.getElementById("pwd1");

if (passl.value != pass2.value)

passl.setCustomValidity("两次密码必须输入一致!");

else

passl.setCustomValidity(‘‘);

}

function check() {

document.getElementById(‘ok‘).disabled = ‘disabled‘;

}

</script>

时间: 2024-07-29 08:33:08

html5表单验证(Bootstrap)的相关文章

Html5之高级-3 HTML5表单验证(验证属性、验证状态)

一.验证属性 Required 属性 - Required 属性主要防止域为空时提交表单.该属性不需要设置任何值 - 语法: Pattern 属性 - Pattern 属性的作用是实现元素的验证.它支持使用正则表达式定制验证规则 - 语法: Min 和 Max 属性 - min.max和step属性用于为包含数字或日期的input类型规定限定(约束) - 语法: Minlength 和 Maxlength 属性 - Minlength 和 Maxlength 属性的作用是定制元素允许的最小字符数

实现跨浏览器html5表单验证

div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: right; clear: right; } .clearfix:after{ content: ""; display:block; clear: both; } .figcaption{ clear: both; color: #999; padding-top: 10px; text

jQuery html5Validate基于HTML5表单验证插件

一.前言 前3篇文章实际都是为本文做铺垫的,如果以下棋表示,前三篇是普通走棋,本篇是将军! 目前市面上有不少表单验证插件,看似强大,实在糟糕! 总结下,有以下一些问题: 过多干预包括:改变了表单元素UI, 为表单元素绑定过多事件等 布局等限制包括:需要特定结构的布局,需要特定的类名或者ID 学习成本包括:N多元作者自定义的属性,或者自定义的特定的数据结构 可用性 当JS出现错误的时候而无法正常运作的时候,验证就是聋子的耳朵——摆设,即使在现代浏览器下也是如此. 面向未来的表单验证 验证驱动验证信

HTML5 表单验证

============================================== 1.required --- 必填字段验证 2.minlength, maxlength --- 字符长度验证 3.min, max --- 数值范围验证  用于number,range 和日期时间类型 4.step --- 步长验证 5.pattern --- 正则表达式验证 6.novalidate(form中) ---禁用表单验证 formnovalidate(submit中) ---禁用表单验证

不支持html5表单验证新特性的解决方案

下载 Alexander Farkas编写的“Webshims Lib”(http://afarkas.github.com/webshim/demos/)它可用于插入表单补丁(也可以为其他 HTML5特性打补丁),从而使不支持新特性的浏览器可以处理 HTML5 表单. 使用方法: a.下载 Webshims Lib(http://github.com/aFarkas/webshim/downloads)并解压: b.将其中的 js-webshim 文件夹复制到相应的位置: <script sr

html5表单验证消息框

Email <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .ema

HTML5 web Form表单验证实例

HTML5 web Form 的开发实例! index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5表单验证</title> 6 <link rel="stylesheet" type="text/css" href="../css/style.

HTML5实战应用:如何让表单验证更友好

HTML5表单验证给前端人员带来了便利,但是在用户体验上存在一些缺陷,默认的提示对用户很不友好,无法准确的获取想要的信息.好在大牛们在接口设计的时候提供了setCustomValidilty方法可以自定义提示信息.这是一个好消息,但也存在一些弊端,需要让开人员做额外的一些处理才达到真正想要的目的. 接下来通过以下示例来阐述方法的应用. 未调用setCustomValidity)方法!DOCTYPE html> html hea ata charset="utf-8 titleform te

表单验证--几种方法总结

表单验证--几种方法总结 HTML5中custom data-*特性与asp.net mvc 3 表单验证:http://www.2cto.com/kf/201204/127526.htmljQuery html5Validate基于HTML5表单验证插件:http://www.zhangxinxu.com/wordpress/2012/12/jquery-html5validate-html5-form-validate-plugin/基于Bootstrap+jQuery.validate F