表单验证多个条件怎么弄,使用什么属性可以作表单的初步验证

http://www.itjxue.com  2023-01-07 02:55  来源:未知  点击次数: 

表单验证怎么做?

用JavaScript 数据即可做。

一、JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

二、下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true。

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

{alert(alerttxt);return false}

else {return true}

}

}

三、下面是连同 HTML 表单的代码:

html

head

script type="text/javascript"function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

{alert(alerttxt);return false}

else {return true}

}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_required(email,"Email must be filled out!")==false)

{email.focus();return false}

}

}/script

/head

body

form action="submitpage.htm" onsubmit="return validate_form(this)" method="post"

Email: input type="text" name="email" size="30"

input type="submit" value="Submit"

/form

/body

/html

excel2010如何用if函数表达多个条件

C3单元格输入=,点击表单左上角FX找到IF函数,进入IF函数第一列输入:0第一个考生成绩单元格425,第二列输入没通过考试,然后继续点击表单左上角IF函数进行镶嵌,第一列:425第一个考生成绩单元格520,第二列输入通过考试,然后继续点击表单左上角IF函数进行镶嵌,第一列:520第一个考生成绩单元格720,第二列输入可报名参加口语考试,然后确定就行,再讲C3单元格公式向下填充至C12

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,新的浏览器就内置了这一功能,其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自动消失。

如:

plabel 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="" /

option label="Google" value="" /

option label="Microsoft" value="" /

/datalist

Webpage:

请在Opera9+或Firefox10+浏览器中查看。

2.6 required

required 属性规定必须在提交之前填写输入域(不能为空)。它是表单验证最简单的一种方式方法,使用方法:

Name: input type="text" name="usr_name" required="required" /

2.7 pattern

pattern 属性规定用于验证 input 域的模式(pattern),模式(pattern) 是正则表达式。那些type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。使用方法:

Country code: input type="text" name="country_code"

pattern="[A-z]{3}" title="Three letter country code" /

2.8 novalidate

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

如:

form action="demo_form.asp" method="get" novalidate="true"

E-mail: input type="email" name="user_email" /

input type="submit" /

/form

3. 表单验证

表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化,让web应用更快的抛出错误,但它仍不能取代服务器端的验证,重要数据还要要依赖于服务器端的验证,因为前端验证是可以绕过的。

目前任何表单元素都有八种可能的验证约束条件:

名称

用途

用法

valueMissing

确保控件中的值已填写

将required属性设为true,

input type="text"required="required"/

typeMismatch

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

input type="email"/

patternMismatch

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

input type="text" pattern="[0-9]{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"

plabel for="runnername"RunnerName:/label

input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/

/p

plabel for="phone"Tel #:/label

input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"

placeholder="xxx-xxxx-xxxx"//p

plabel for="emailaddress"E-mail:/label

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

placeholder="For confirmation only"//p

plabel for="dob"DOB:/label

input id="dob" name="dob" type="date"

placeholder="MM/DD/YYYY"//p

pCount:input type="number" id="count" name="count" min="0" max="100" step="10"//p

plabel 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

legendExpectations:/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

plabel for="notes"Notes:/label

textarea id="notes" name="notes" maxLength="100"/textarea/p

/fieldset

pinput type="submit" name="register" value="Submit" onclick=" checkForm()"//p

/form

多条件的自定义字段搜索表单怎么做

使用reamweaver的asp语言制作多条件搜索框的步骤:

1新建一个asp页面,保存为“sousuojieguo.asp”

2打开之前制作过的"jiluji.asp“

3把鼠标指针放在表格的最左边,按回车键,把鼠标指针往上移,然后点击菜单栏的: 插入--表单--表单,插入一个表单。

4在表单里边输入”搜索:“,然后点击菜单栏:插入--表单--文本域,插入一个文本框。

5 鼠标点击刚刚插入的文本框,然后在下方把id改成"sousuo"

6然后把鼠标放到文本框的后边,插入一个按钮,并把按钮上的显示文字改成"搜索“

7切换到刚刚新建的”sousuojiesuo.asp“页面,打开”绑定“面板,点击”+“,选择”记录集(查询)

8在弹出的界面如图所示设置:筛选设置成:xingming-包含-表单变量-sousuo。(因为这里我们是搜索姓名)

9把鼠标放到搜索结果页面上输入“搜索结果:“,然后回车,在点击菜单栏:插入--表格。插入一个2行4列的表格

10 然后在表格第一行一次输入如图所示文字。

11然后把绑定面板中刚刚新建的记录集依次拖入表格第二行对应的位置

12把鼠标指针放到第二行的任意位置,然后点击界面下方的tr标签,选中第二行。

13打开”服务器行为“面板,点击”+“,选择”重复区域

14在弹出的界面中选择”所有记录“,然后点击”确定“

15切换到”jiluji.asp",把鼠标指针放到搜索框所在表单中,点击界面下方的form#form1,选中整个表单。

16在属性面板中点击动作方框右边的“文件夹”按钮,在弹出的界面中选择”sousuojieguo.asp“。选择完成后,下方的方法选择"post"

17 保存所有文件,然后按F12就可以在浏览器中浏览效果了

(责任编辑:IT教学网)

更多

推荐安全产品文章