表单验证属性（如何用jquery进行表单验证）

本文目录

• 如何用jquery进行表单验证
• 什么是表单验证
• 使用什么属性可以达到表单的初步验证
• HTML5 表单多条件验证问题
• 怎么自己写form表单验证自定义规则
• HTML5中表单内置验证规则是什么，有哪些内置验证规则呢

如何用jquery进行表单验证

第一步：
导入jquery.metadata.js和jquery.validate.js。

第二步：
在提交表单上加属性id=“tempForm“。

第三步：
将提交按钮改为type=“button“，且加入onclick=“submitForm()“属性。

第四步：
在script中加入方法submitForm。

function submitForm() {
if($(“#tempForm“).valid()) {
$(“#tempForm“).submit();
}
}

第五步：
加入验证代码，格式如下：

$(function() {
$(“#tempForm“).validate({
rules: {
“cost.costMoney“: {
required: true,
number: true,
maxlength:18
}
},
messages: {
“cost.costMoney“: {
required: “《font color=’red’》成本金额不能为空《/font》“,
number: “《font color=’red’》成本金额必须为数字《/font》“,
maxlength:“《font color=’red’》成本金额长度不能大于
18《/font》“
}
}
});
});

6
第六步：
打开浏览器查看表单验证效果。

什么是表单验证

我这有个表单验证的CHM文件我MAIL给你吧.留下你的MAIL
表单的验证一直是网页设计者头痛的问题，表单验证类 Validator就是为解决这个问题而写的，旨在使设计者从纷繁复杂的表单验证中解放出来，把精力集中于网页的设计和功能上的改进上。
Validator是基于JavaScript技术的伪静态类和对象的自定义属性，可以对网页中的表单项输入进行相应的验证，允许同一页面中同时验证多个表单，熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行验证。因为是伪静态类，所以在调用时不需要实例化，直接以“类名+.语法+属性或方法名“来调用。此外，Validator还提供3种不同的错误提示模式，以满足不同的需要。
Validator目前可实现的验证类型有：
1.是否为空；
2.中文字符；
3.双字节字符
4.英文；
5.数字；
6.整数；
7.实数；
8.Email地址；
9.使用HTTP协议的网址；
10.电话号码；
11.货币；
12.手机号码；
13.邮政编码；
14.身份证号码；
15.QQ号码；
16.日期；
17.符合安全规则的密码；
18.某项的重复值；
19.两数的关系比较；
20.判断输入值是否在(n, m)区间；
21.输入字符长度限制(可按字节比较)；
22.对于具有相同名称的单选按钮的选中判断；
23.限制具有相同名称的多选按钮的选中数目；
24.自定义的正则表达式验证；
运行环境(客户端)：
在Windows Server 2003下用IE6.0+SP1和Mozilla Firefox 1.0测试通过；
在Lunix RedHat 9下的Netscape测试通过；

使用什么属性可以达到表单的初步验证

 《form action=““》
《input type=“text“ required》
《input type=“submit“ value=“提交“》
《/form》

 非空校验

请采纳

HTML5 表单多条件验证问题

1.输入型控件

Input type

用途

说明

email

电子邮件地址文本框

url

网页URL文本框

number

数值的输入域

属性 值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step=“3“，则合法的数是 -3,0,3,6 等）
value number 规定默认值

range

特定值的范围的数值，以滑动条显示

属性 值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step=“3“，则合法的数是 -3,0,3,6 等）
value number 规定默认值

Date pickers

日期，时间选择器

仅Opera9+支持，包含date, month, week, time, datetime, datetime-local

search

用于搜索引擎，比如在站点顶部显示的搜索框

与普通文本框用法一样，只不过这样更语文化

color

颜色选择器

仅Opera支持

将原本type为text的input控件声明为以上特殊类型，是为了给用户呈现不同的输入界面（移动平台上支持这些不同的输入界面，这里就不细说），而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素，请用支持这些表单元素的浏览器查看，IE对其支持最差。
E-mail:
date:
range: number: color:
2. 表单新特性和函数
2.1 placeholder
当用户还没有输入值时，输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息，这在目前网站中很常见，一些JS框架都会提供类似功能，简单的说下在旧版本中常用的解决方案，为输入控件创建一个label，然后通过CSS控制些label的位置使之覆盖在输入控件上面，当label获得焦点时，浏览器会把焦点指向输入控件。不过有了placeholder，新的浏览器就内置了这一功能，其特性值会以浅灰色样式显示在输入框中，当输入框获得焦点并有值后，该提示信息自动消失。
如：

《p》《label for=“runnername“》Runner:《/label》
《input id=“runnername“name=“runnername“ type=“text“ placeholder=“First and last name“ /》
《/p》

Runner:
2.2 autocomplete
其实在IE6中,autocomplete就已经实现，不过现在这一特性终于标准化了，浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用，autocomplete应该用一保护用户敏感数据，避免本地浏览器对它们进行不安全的存储。

类型

作用

on

该字段无需保护，值可以被保存和恢复

off

该字段需要保护，值不可以保存

unspecified

包含《form》的默认设置，如果没有被包含在表单中或没有指定值，则行为表现为on

如：

《form action=““ method=“get“ autocomplete=“on“》
Name:《input type=“text“ name=“name“ /》《br /》
E-mail: 《input type=“email“ name=“email“ autocomplete=“off“ /》《br /》
《input type=“submit“ /》
《/form》

当用户提交过一次表单后，再次访问，name的输入框会提示你曾输入的值，而email则不会提示。
2.3 autofocus
页面载入时，我们通过autofocus指定某个表单元素获得焦点，但每个页面只允许出现一个autofocus，如果设置多个则相当于未指定些行为。目前Opera10,Chromet和Safari浏览器支持。如果用户有希望焦点转移的情况下，使用使用autofocus会惹恼用户。
2.5 list特性和datalist
通过使用list，开发人员能够为某个输入型控件构造一个选值列表，其使用方法：

Webpage: 《input type=“url“ list=“url_list“ name=“link“ /》
《datalist id=“url_list“》
《option label=“W3School“ value=“
目前任何表单元素都有八种可能的验证约束条件：

名称

用途

用法

valueMissing

确保控件中的值已填写

将required属性设为true，
《input type=“text“required=“required“/》

typeMismatch

确保控件值与预期类型相匹配

《input type=“email“/》

patternMismatch

根据pattern的正则表达式判断输入是否为合法格式

《input type=“text“ pattern=“{12}“/》

toolong

避免输入过多字符

设置maxLength，《textarea id=“notes“ name=“notes“ maxLength=“100“》《/textarea》

rangeUnderflow

限制数值控件的最小值

设置min，《input type=“number“ min=“0“ value=“20“/》

rangeOverflow

限制数值控件的最大值

设置max，《input type=“number“ max=“100“ value=“20“/》

stepMismatch

确保输入值符合min,max,step的设置

设置max min step，《input type=“number“ min=“0“ max=“100“ step=“10“ value=“20“/》

customError

处理应用代码明确设置能计算产生错误

例如验证两次输入的密码是否一致，等会DEMO细说

下面展现浏览器自带的验证功能请在Chrome、Opera或Firefox中查看：
源代码：

《form name=“register1“ id=“register1“》
《p》《label for=“runnername“》RunnerName:《/label》
《input id=“runnername“name=“runnername“ type=“text“ placeholder=“First and last name“ required=“required“ autofocus=“autofocus“/》
《/p》
《p》《label for=“phone“》Tel #:《/label》
《input id=“phone“ name=“phone“ type=“text“ pattern=“\d{3}-\d{4}-\d{4}“
placeholder=“xxx-xxxx-xxxx“/》《/p》
《p》《label for=“emailaddress“》E-mail:《/label》
《input id=“emailaddress“ name=“emailaddress“ type=“email“
placeholder=“For confirmation only“/》《/p》
《p》《label for=“dob“》DOB:《/label》
《input id=“dob“ name=“dob“ type=“date“
placeholder=“MM/DD/YYYY“/》《/p》
《p》Count:《input type=“number“ id=“count“ name=“count“ min=“0“ max=“100“ step=“10“/》《/p》
《p》《label for=“style“》Shirt style:《/label》
《input id=“style“ name=“style“ type=“text“ list=“stylelist“ title=“Years of participation“
autocomplete=“off“/》《/p》
《datalist id=“stylelist“》
《option value=“White“ label=“1st Year“/》
《option value=“Gray“ label=“2nd - 4th Year“/》
《option value=“Navy“ label=“Veteran (5+ Years)“/》
《/datalist》

《fieldset》
《legend》Expectations:《/legend》
《p》
《label for=“confidence“》Confidence:《/label》
《input id=“confidence“ name=“level“ type=“range“
onchange=“setConfidence(this.value)“
min=“0“ max=“100“ step=“5“ value=“0“/》
《span id=“confidenceDisplay“》0%《/span》《/p》
《p》《label for=“notes“》Notes:《/label》
《textarea id=“notes“ name=“notes“ maxLength=“100“》《/textarea》《/p》
《/fieldset》

《p》《input type=“submit“ name=“register“ value=“Submit“ onclick=“ checkForm()“/》《/p》
《/form》

怎么自己写form表单验证自定义规则

实现表单自定义验证消息，实际上很简单。大体思路为:
1、首先我们要设置表单的验证规则
2、然后根据表单的验证规则定义要显示验证消息，
3、最后通过JavaScript 和CSS相结合先将所有预定义的验证消息隐藏掉，然后再根据表单中的输入是否符合验证规则来控制验证消息的显隐状态。
下面我们就来通过一个具体的示例进行讲解，你可以将这个示例直接放在浏览器中运行查看效果，但是要注意代码中引用了第三方类库jQuery，运行时你要自己设置一下：
《!doctype html》
《html》
《head》
《meta charset=“utf-8“ /》
《title》Forms: 验证提示《/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》
《h1》Forms《span》 - 验证提示《/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》

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。推荐你去教程网站秒秒学上过一遍相关知识，希望对你有帮助。