javascript与表单互操作（核心）-03

与表单互操作（核心）（JavaScript3）

JavaScript现阶段的重点在于表单的互操作上，所以下面将使用一系列的代码进行验证。

范例：取得文本数据
在表单之中每一个表单元素都有两个重要的属性：name,id，一般而言，这两个属性的内容一定要保持一致，
其中name是留给服务器端接受数据使用的，而id是留给页面进行JavaScript操作（document,getElementById（函数））
“onclick”表示的是一个单击事件，表示按下

范例：实现email验证
之前的程序只是输入了一个普通的文本，但是在程序里面并没有进行验证，下面以一个最基础的邮件验证开始。
在JavaScript之中如果要使用正则，采用如下写法：/^正则符号$/.test(数据)





 

用户名：

邮  箱: id="email" >

 以上的验证方式根本就不可能使用

 

实现验证

范例：实现验证
在实现表单验证操作过程之中，有一个最为重要的事件，这个事件是写在form表单上的——onsubmit,此
事件表示在表单提交时自动拦截。那么如果要想控制表单验证，则必须对此事件进行处理，如果验证通过（
true），如果验证不通过（false）。
1.为了方便学习，将表单定义在input.htm页面上
2.将图片保存在images目录下；
3.建立一个css文件夹，保存样式表文件

4.建立一个js文件夹，保存input.js文件，这个文件主要用于验证input.htm页面中的表单；

5.修改input.htm页面，导入css文件





 

用户名： οnblur="validateUid()">*

邮  箱: id="email" οnblur="validateEmail()">*

 实现密码验证

以上验证的是文本框，那么下面进行密码框的验证，对于密码框在实际的操作里面只会有以下的几种功能：
判断是否输入，重复密码是否正确，如果有需要则使用ActiveX进行加密
范例：实现密码验证





 

输入密码：

确认密码： οnblur="validateConfpass()">

 取得单选钮数据

范例：取得单选钮数据





 
请选择XX性别：
         value="男">男
         value="女">女
         value="中">中
         οnclick="showInfo()">

复选框

Java里面有对象数组这一概念，那么换到HTML页面之中也同样存在对象数组的概念，唯一不同的是，如果
多个元素的id（包含name）相同的时候，则会认为这是一个对象数组，如果是直接使用document.getElement
ById()取得，永远取得的是对象数组中的第一个元素，那么必须更换为“document.all()”取得。
在单旋钮中，可以通过判断每一个元素的“checked”属性来判断其是否被选中，此属性返回的是布尔型数据
只要是对象数组就要牵扯到每一个元素的依次判断。

范例：复选框





 
请选择XX的兴趣：

         value="篮球">篮球

         value="排球">排球

         value="足球">足球

         value="球球">球球

         value="小球">小球

         value="大球">大球

         οnclick="showInfo()">