html页面中个人信息的表单校验,HTML的表单标签及校验

1.HTML的表单标签：

* 常用属性:

* action属性:提交的路径.默认提交到当前页面

* method属性:请求的方式.GET和POST.默认是GET.

***** GET方式和POST方式的区别?

* GET        :数据会显示到地址栏中.GET方式提交是有大小的限制.

* POST        :数据不会显示到地址栏中.POST方式提交的是没有大小限制.

*有很多提交方式,只是get和post比较常用

2.HTML中表单元素：

*                 :文本框.

* 常用属性:

* name        :表单元素的名称.必须有name属性，然后后台才可以接收数据.

* value        :文本框的默认值.

* size        :文本框的长度.

* maxlength:文本框输入的最大长度.

* readonly:只读文本框.

*disable : 废弃,定义该属性后,表单变灰

*         :密码框.

* 常用属性:

* name        :表单元素的名称.必须有name属性，然后后台才可以接收数据.

* value        :密码框的默认值.

* size        :密码框的长度.

* maxlength:密码框输入的最大长度.

*                 :单选按钮.

* 常用的属性:

* name        :表单元素的名称.必须有name属性，然后后台才可以接收数据.

* value        :单选按钮的默认值.(必须定义值)

* checked:单选按钮默认被选中.

*         :复选按钮.

* 常用的属性:

* name        :表单元素的名称.必须有name属性，然后后台才可以接收数据.

* value        :单选按钮的默认值.(必须定义值)

* checked:单选按钮默认被选中.

*                 :普通按钮.没有任何功能的按钮.

*                 :提交按钮.

*                 :重置按钮.

*                 :文件上传的表单项.

*                 :隐藏字段.

*                 :图片按钮

*                                         :下拉列表.

*                                 :文本域.

下拉列表

--请选择--

北京          :必需要有值value,实际选中的是value值,在页面中开到的值只是用来展示的

上海

广州

* 文本域:

我是：

3.表单的校验

3.1提交校验:

3.1.1 JavaScript 的表单校验方法

在form标签中添加提交事件,出发的函数返回true时提交,false阻止提交

3.1.2 JQuery 的表单校验方法

1.给form标签动态绑定提交事件

2.使用JQuery事件中的  trigger(type,[data]) 事件,再次触发表单校验事件

对校验结果进行判断,如果输入不符合要求,该提交事件触发的函数返回一个false组织提交,

否则不返回值,提交成功.

trigger(type,[data]) 事件:

在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发

一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。

$("form").submit(function(){

$("form input[class='required']").trigger("blur");

//获取错误信息

var errorLength = $(".onError").length;

if(errorLength > 0){

return false;

}

});

3.2数据校验

绑定一个失去焦点事件(blur),然后可以再链接其它的事件(比如键盘抬起,获取焦点),

这些链接的事件使用triggerHandler事件触发blur事件的函数,就可以实现校验.

$("form input").blur(function(){

//获得该元素的父元素

var $parent = $(this).parent();

//将原有的信息清楚掉

$parent.find(".formtips").remove();

//确定输入项

//如果是用户名

if($(this).is("#userName")){

//判断用户名是否为空

if(this.value == ""){

//添加错误提示

$parent.append("用户名不能为空");

}else{

//添加正确信息

$parent.append("输入正确");

}

}

//如果是密码框

if($(this).is("#password")){

if(this.value == ""){

$parent.append("密码不能为空");

}else{

$parent.append("输入正确");

}

}

}).keyup(function(){

//绑定键盘抬起事件

$(this).triggerHandler("blur");

}).focus(function(){

$(this).triggerHandler("blur");

});

4.HTML5扩展的表单标签:

  :输入的数据要符合邮箱的格式

  :日期选择

:只能输入数字

   :产生一个颜色块;