HTML5+CSS3+JavaScript Web前端开发案例教程课件：表单验证.pptxVIP

表单验证

Form表单元素正则表达式表单事件处理010203

01Form表单元素

Form表单元素1、表单标签：form标签是一个表单容器，主要用于声明表单，定义采集数据的范围。被form开始标签和/form结束标签所包含的数据将被提交到服务器。

Form表单元素form标签的示例代码如下：formaction=/user/loginmethod=postdiv用户名：inputname=user_nametype=text//divdiv密码：inputname=passwordtype=password//divdivbuttontype=submit登录/button/div/form

Form表单元素form标签的示例效果：

Form表单元素form标签属性：method属性，用于设定HTTP请求的方式；action属性，用于设定表单提交的服务器的URL；target属性，用于设置表单提交之后的新页面打开方式；autocomplete属性，用于设置是否开启自动完成功能；enctype属性，用于定义表单数据提交到服务器的过程中如何对数据进行编码；accept-charset属性，用于设定使用哪种字符集处理表单数据；novalidate属性，用于关闭表单提交时的验证能力。

Form表单元素2、表单域：表单域包含了文本框、复选框、隐藏域、单选框、下拉选择框等，主要用于采集用户输入或选择的数据。在HTML5中对表单域新增了日期、数字、日期、按钮、文件、密码、隐藏域等多种类型。

Form表单元素常用的表单域有：表单域属性值描述文本框type=text用于文本字符串输入复选框type=checkbox用于对多个选项进行复合选择单选框type=radio用于多个选项的唯一选择密码框type=password用于用户登录或注册时的密码输入隐藏输入框type=hidden用于定义不需要在页面中显示的表单元素文件上传type=file用于定义文件上传控件

Form表单元素2、表单按钮：表单按钮是用于控制表单的基本操作，主要的表单按钮包括提交按钮和重置按钮。

Form表单元素提交按钮就相当于是表单的开关，当用户点击提交按钮时，浏览器会将表单数据提交给服务器，通过设置type=submit可以定义一个提交按钮，该按钮必须被包裹在form/form标签中才能生效。formaction=/user/settingsmethod=post!--使用input标签的提交按钮--inputtype=submitvalue=提交!--使用button标签的提交按钮--buttontype=submit提交/button/form

Form表单元素重置按钮用于将表单内的控件的值重置为初始化状态，并非清空数据，表单中的初始化数据定义在value值中，而且重置按钮必须包裹在form/form表单标签中。formaction=/user/regmethod=postdiv用户名：inputname=namevalue=//divdiv性别：inputtype=radioname=gendervalue=manchecked男inputtype=radioname=gendervalue=woman女/divdivinputtype=resetvalue=重置/div/form

02正则表达式

正则表达式基本概念：正则表达式（英文全称：RegularExpression）是对字符串操作的一种逻辑公式，常用来检索、过滤、替换符合某个规则的一些文本。许多程序设计语言都支持利用正则表达式进行字符串操作，在JavaScript中提供了RegExp()构造函数，用来创建一个正则表达式对象，利用正则表达式从字符串中匹配想要的内容。

正则表达式使用RegExp()构造函数创建一个RegExp实例：varregexp=newRegExp(/^a*$/);regexp.test(aaa);//结果为trueregexp.test(a);//结果为trueregexp.test(a1);//结果为false

正则表达式正则表达式的语法中提供了三种修饰符，用于限定在全局搜索中的匹配规则。修饰符描述i执行匹配时忽略英文字母大小写g全局匹配，找到所有匹配，而不是在第一个匹配后停止m执行多行匹配

正则表达