从
基础 / 深入 / 实战
逐步学会建网站
网站中经常会有各种各样的表单，用于提交各类信息。如网站注册表单，用户登录表单，用户发布表单等等，这些表单都可以让用户填写并且提交。
在表单使用过程中，可以使用JQuery 验证表单，对表单项数据进行验证。下面学做网站论坛介绍一下JQuery 验证表单方法与实例代码。
JQuery 验证表单需要使用jQuery click() 方法，用户点击提交按钮时，触发点击事件，会执行所有表单框的验证，如通过验证，则执行submit()方法，对表单内容进行提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQUERY验证表单实例</title>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
</head>
<body>
<h2>用户注册</h2>
<form name="myform" method="post" action="http://baidu.com">
<label>用户名：</label><input type="text" name="name" value="" id="name"/><br/>
<label>密 码：</label><input type="password" name="pass" value="" id="pass" /><br/>
<label>电 话：</label><input type="text" name="phone" value="" id="phone" /><br/>
<input type="button" name="" value="提交" id="register" />
</form>
<script>
$(document).ready(function () {
$("#register").click(function () {
if ($("#name").val() == '') {
alert('请添加姓名');
$("#name").focus();
return false;
}
if ($("#phone").val() == '') {
alert('请添加电话');
$("#phone").focus();
return false;
}
$('form').submit();
})
})
</script>
</body>
</html>
上面的JQuery 验证表单方法与实例代码：仅对表单框内容进行了简单的验证， 这个验证，可以写得更详细一点。可对用户注册时，用户名是否存在进行验证。还可以对用户名表单框失去焦点时添加事件，实现jquery表单提交前实现同步验证。
如：必须以字母开头、长度必须大于多少位……在验证的同时，也可以提示信息的文字内容进行改变，如验证出错时，文字以红色显示，验证通过时，让文字以绿色显示。
