html5验证,html5验证码代码

HTML5中如何实现表单的自定义验证消息？

实现表单自定义验证消息，实际上很简单。大体思路为:

1、首先我们要设置表单的验证规则

2、然后根据表单的验证规则定义要显示验证消息，

3、最后通过JavaScript 和CSS相结合先将所有预定义的验证消息隐藏掉，然后再根据表单中的输入是否符合验证规则来控制验证消息的显隐状态。

下面我们就来通过一个具体的示例进行讲解，你可以将这个示例直接放在浏览器中运行查看效果，但是要注意代码中引用了第三方类库jQuery，运行时你要自己设置一下：

!doctype html

html

head

meta charset="utf-8" /

titleForms: 验证提示/title

// 设置一些必要的样式，如验证消息的文字样式和控制验证消息显隐的样式

style

input:valid {

background: #fff;

}

input:invalid {

background: #fcc;

color: #333;

}

.validation-messages {

margin-bottom:15px;

}

.validation-messages span {

font-size:0.8em;

background-color:#eee;

padding:6px;

border:1px solid #ccc;

border-radius:10px;

color:#666;

}

//所有class属性为hide的元素都会被隐藏

.hide {

display:none;

}

/style

/head

body

article

h1Formsspan - 验证提示/span/h1

/article

div id="result-stub" class="well hidden"

form id="change-email-form" name="change-email-form"

fieldset

h4修改邮箱地址/h4

//设置表单应该遵循的验证规则。

//pattern 属性：规定用于验证输入字段的模式。

//maxlength 属性：规定输入字段的最大长度,以字符个数计。

//required属性：规定该input元素为必须的元素。

label用户名:/label

input type="text" name="username"

id="username" pattern="[a-zA-Z ]{5,}"

maxlength="30" required /

//设置表单的验证消息，并结合class属性样式将其隐藏起来

div

//这里的data-rule的属性值是HTML5表单中内置的验证规则中的一种

span data-rule="valueMissing"

class="hide"用户名不能为空./span

span data-rule="patternMismatch"

class="hide"必须是字母字符(长度应为5~30个字符)./span

/div

label邮箱地址:/label

//设置表单应该遵循的验证规则。

input type="email" name="email" id="email"

title="Email address is required" required /

//设置表单的验证消息，并结合class属性样式将其隐藏起来

div

span data-rule="valueMissing"

邮箱地址不能为空./span

span data-rule="typeMismatch"

邮箱格式不正确./span

/div

hr /

//设置两个按钮，作用分别是“清空表单内容和对表单中的内容进行验证

button type="submit" id="submit"

name="submit"修改/button

button type="button" id="checkValidation"

name="checkValidation"

class="btn"验证/button

/fieldset

/form

/div

script

window.onload= function() {

//---

// 创建一个验证规则容器。

var ruleNames = [];

// 填充验证规则容器.

// 寻找所有具有验证规则的元素，然后将该元素的data-rule属性值添加到验证规则数组中去。

$("[data-rule]").each(function(i, element) {

var ruleName = element.getAttribute('data-rule');

if ($.inArray(ruleName, ruleNames) 0) {

ruleNames.push(ruleName);

}

});

var

// 首先确定用户界面隐藏了所有验证消息。

// 然后在选定的表单上运行验证规则。

validate = function() {

$(".validation-messages span")

.addClass('hide');

document.getElementById('change-email-form')

.checkValidity();

},

// 查询每个输入的元素，以确定哪个元素无效。

// 一旦检测到无效元素，就遍历验证规则，找到无效的原因，然后通过消息对用户进行提示

validationFail = function(e) {

var

element = e.srcElement,

validity = element.validity;

if (!validity.valid) {

ruleNames.forEach(function(ruleName) {

checkRule(validity,

ruleName,

element);

});

e.preventDefault();

}

},

// 使用 input 元素 的ValidityState 对象的实例来运行验证规则。

//如果这个验证规则返回ture，就表示无法通过验证，在表单中就会有相应的提示信息。

checkRule = function(state, ruleName, ele) {

if (state[ruleName]) {

$(ele).next()

.find('[data-rule="'

+ ruleName + '"]')

.removeClass('hide');

}

};

// 所有验证事件处理程序是附加在input元素上的而不是button元素

$(':input:not(:button)').each(function() {

this.oninvalid = validationFail;

this.onblur = validate;

});

$('#checkValidation').click(validate);

}

/script

script src="../js/jquery.js"/script

/body

/html

推荐你去教程网站秒秒学上过一遍相关知识，希望对你有帮助。

相关问答

Q1: HTML5新增验证属性 设置环境变量

HTML5新增验证属性:

placeholder   提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失

required    规定输入域不能为空

pattern    规定验证input域的模式（正则表达式）

validity属性:

环境变量设置参数如下：

变量名： JAVA_HOME

变量值： C:\Program Files (x86)\Java\jdk1.8.0_91  // 要根据自己的实际路径配置

变量名： CLASSPATH

变量值： .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;  //记得前面有个"."

变量名： Path

变量值： %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

Q2: HTML5中表单验证的好处

HTML5中表单验证有如下好处：

1、可判断用户是否已填写表单中的必填项目。

2、可判断用户输入的邮件地址是否合法。

3、可判断用户是否已输入合法的日期。

4、可判断用户是否在数据域(numeric field)中输入了文本。

表单验证通常采用策略模式的思想，把一个个验证规则封装成一个函数，比如非空规则、最大长度规则等，不同的输入框选择某一个或者某几个规则进行验证。

扩展资料：

HTML表单一直都是Web的核心技术之一，有了它才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API，方便做更复杂的应用，而不用借助其它Javascript框架。

表单有以下几个基本知识点：

1、表单仍是以form元素作为容器，可在其中设置基本的提交特性。

2、当用户提交页面时，表单仍然向服务器发送表单控件的值。

3、之前老版本中的表单控件，如text radio checkbox等等，都可以按原有方式使用，尽管增加了新的功能。

4、仍然可以使用javascript操作表单控件。

Q3: HTML5中表单内置验证规则是什么，有哪些内置验证规则呢？

在HTML5中内置了很多表单的验证规则，这些验证规则会根据用户在input元素中输入的内容返回一个布尔值来告诉我们表单验证的状态。下面我们就来列举一些我们比较常用的内置验证规则吧：

ValueMising规则

示例：input type="text" required value=""

目的：确保表单控件(input元素在页面中是以一个控件的形式呈现的)中的值已填写。

用法：在表单控件中将required属性设置为true。因为required属性的默认值为true所以如示例中所示：在input元素中接添加required属性也是可以的。

详细说明：如果表单控件设置了required特性，那么在用户填写或者通过代码调用方式填值之前，控件会一直处于无效状态。例如，在示例中我们设置该控件的值为空，空的文本输入框无法通过必填检查，除非在其中输入任意文本。输入值为空时，valueMissing会返回true。表示没有通过验证。

typeMismatch规则

示例：input type=“url” value=“miaomiaoxue”/

目的：保证控件值与预期类型相匹配(如numbe、email、URL等)。

用法： 指定表单控件的type特性值为numbe、email、URL等规定文本输入规则的类型。

详细说明: 特殊的表单控件类型不只是用来定制手机键盘,如果浏览器能够识别出来表单控件中的输入不符合对应的类型规则,比如email地址中没有@符号，或者number型控件的输入值不是有效的数字，示例中URL型的空间不是一个标准的链接格式。那么浏览器就会把这个控件标记出来以提示类型不匹配。无论哪种出错情况，typeMismatch将返回true。表示没有通过验证。

patternMismatch规则

示例：input type="text" pattern=“/^[A-z]+$/" value=“1234“/

目的：根据表单控件上设置的格式规则验证输入的文本是否为有效格式

用法：在表单控件上设置pattern特性，井赋予适当的匹配规则。

详细说明：pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后，只要输入控件的值不符合模式规则，如示例中设定的正则表达式规则该控件的值含有字母和$符号，这里设置的值为1234，不符合规则设定，因此patternMismatch就会返回true值。从引导用户和技术参考两方面考虑，

你应该在包含pattern特性的表单控件中设置title特性以说明规则的作用。

tooLong规则

示例：input type=“text” maxlength=“3” value=“hello“/

目的：避免输入值包含过多字符。

用法：在表单控件上设置maxLength特性。

详细说明：如果输入值的长度超过maxLength，示例中最大限制设置为3，但值为hello，操过了3个字符的限制，tooLong规则就会返回true。虽然表单控件通常会在用户输入时限制最大长度，但在有些情况下，如通过程序设置，还是会超出最大值。

rangeUnderflow规则

示例：input type=“text” min=“3” max=“5” value=“0" /

目的：限制数值型控件的最小值。

用法：为表单控件设置min属性，并赋予允许的最小值。

详细说明：在需要做数值范围检查的表单控件中，数值很可能会暂时低于设置的下限，如示例中设置的值为0，而设置的min属性为3。此时，rangeUnderflow属性将返回true。

rangeOverflow规则

示例：input type=“text” min=“3” max=“5” value=“7" /

目的：限制数值型控件的最大值。

用法：为表单控件设置max属性，并赋予允许的最大值。

详细说明：与rangeUnderflow类似，如果一个表单控件的值比max属性值更大，如示例中设置的值为7，而设置的max属性为5。此时，rangeOverflow属性将返回true。

stepMismatch规则

示例：input type=“text” min=“0” max=“100” step=“5” value=“17" /

目的：确保输入值符合min、max及step即设置。

用法：为表单控件设置step特性，指定数值的增量。

详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step属性值的倍数之和。如示例中设置的数值范围为0到100，step特性值为5，此时就不允许出现17，而可以是“0+5*X”X为（0~20）中任意一个值皆可。否则stepMismatch返回true值。

valid规则

示例：input type=“range” min=“5” max=“20” step=“5” value=“10" /

目的：验证表单控件是否满足所有的表单验证规则

用法：适用于所有的input表单控件。

详细说明：当该表单控件满足所有验证规则时，valid属性就是true，否则，只要有一项验证规则没通过，valid属性会返回false。如示例所示就满足所有验证条件所以valid属性会返回true。注意前面几个验证属性是没有通过的情况下返回true。推荐你去教程网站秒秒学上过一遍相关知识，希望对你有帮助。

Q4: html5 pattern 既要验证格式又要验证长度怎么办

html5 pattern 既要验证格式又要验证长度的解决办法是用正则表达式实现。

1、在html5页面中有如下form：

form id="myform"

  input type="text" name="fullname" pattern="[A-Za-z0-9\w]{4,20}" required="required" /

  input type="submit" /

/form

在提交的时候做fullname的校验：要求是字母和数字，长度是4到20位之间。

2、jquery代码如下：

$(document).ready(function () {

  $('#myform').validate({debug:true});

});

3、校验在提交的时候生效：

输入zhangsan123就可以正确提交。

输入张三就会报错：

Q5: html5中input的tel类型怎么验证正则

html5中input的tel类型验证正则的写法如下：

一般在中国，电话号码是区号-7到8位数字的电话号码，所以正则表达式书写如下：

^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}

完整的演示例子如下：

1、html5中的tel标签：

input type="tel" name="tel" id="tel" required pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}"

2、或者

input type="tel" name="tel" id="tel" required onblur="checkme(this)"/

function checkme(obj){

var val=obj.value();

var mobilevalid = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}$/;

if (!mobilevalid.test(val)) {

alert('请输入正确的手机号码！')

return false;

}

}