jQuery学习-表单验证功能

已经完成了一个简陋的图书馆管理系统，之所以说是简陋，是因为不具备任何容错功能，下一阶段是通过学习jQuery来对系统进行完善。

任务一：完成后台登录页面的表单验证功能。

需求：1、对于用户名和密码的空白输入情况，要阻止其对后台服务器发起的连接。

功能分析：1、选择两个标签input，并获取其输入的内容，然后进行一个验证就可以了。

选择标签用$(‘标签选择器')，获得值用。

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

括号里的参数放的是想要修改成为的值。

或者采用回调函数形式，这个时候带有两个参数：被选元素列表中当前元素的下标、以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

text只能改变文本元素。

html可以改变整个元素节点（包括文本元素和标签元素）

val只能操作input里的值

text 与html的区别具体体现在，text会忽略掉所有对文本起修饰作用的标签，而只关注文本，而html会保留标签。

比如<p>这是<em>加粗</em>的文字</p>。用text获取p的原文本就只有这是加粗的文字了。

所以，我们可以通过val()的回调函数来获得input输入的值。

然后将这个方法添加到提交表单的事件上去，然后通过调用方法来阻止提交。

$(document).ready(function(){
        $('form').submit(function(e){ //调用submit方法，就是在提交时进行操作
	$('input').val(function(i,value){ //直接获取了所有input的值，用户名和密码，会检验两次。
		if(value ==''){
			alert('用户名与密码不能为空！');
			e.preventDefault();  //调用了preventDefault函数来阻止提交表单
		       }
		});
	});
});

可以添加到login.php里去了，亲测可用。