Jquery代码如下:
<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
function checkForm() {
//jQuery取得用户输入的name,age,email值
var name = $("#clientname").val();
var pass = $("#password").val();
var reg = /\w+[@]{1}\w+[.]\w+/;
var email = $("#email").val();
//如果名字为空
if (name == "") {
//假如name后面有lable标签,则清空后面的内容,即清除图中红色字体提示的“用户名不能为空”
$(".name_lable").empty();
//接着在类选择器.name后面添加一个lable标签
$("#clientname").after(
"<label class='name_lable'><font>用户名不能为空</font></label>");
} else {
//不为空就清空后面的红色提示,如“用户名不能为空”,使其消失
$(".name_lable").empty();
}
if (pass == "") {
//假如name后面有lable标签,则清空后面的内容,即清除图中红色字体提示的“用户名不能为空”
$(".password_lable").empty();
//接着在类选择器.name后面添加一个lable标签
$("#password")
.after(
"<label class='password_lable'><font>密码不能为空</font></label>");
} else {
//不为空就清空后面的红色提示,如“用户名不能为空”,使其消失
$(".password_lable").empty();
}
if (reg.test(email)) {
} else {
$(".email_lable").empty();
//接着在类选择器.name后面添加一个lable标签
$("#email").after(
"<label class='email_lable'><font>email格式不正确</font></label>");
return false;
}
}
</script>
页面代码如下:
<form name="client_form" action="insert.action" method="get"
οnsubmit="return checkForm()">
<table>
<tr bgcolor="#f5f5f5">
<td><div>
<font>*</font> 姓名:
</div></td>
<td><input id="clientname" type="text" name="username" value=""
size="30"></td>
</tr>
<tr bgcolor="#f5f5f5">
<td><div>
<font>*</font>密码
</div></td>
<td><input type="text" name="password" value="" size="30"
id="password"></td>
</tr>
<tr bgcolor="#f5f5f5">
<td><div>电子邮箱</div></td>
<td><input type="text" name="email" value="" size="30"
id="email"></td>
</tr>
<tr bgcolor="#f0f0f0">
<td></td>
<td colspan="2"><input type="submit" value="提交"> <input
type="reset" value="重置"></td>
</tr>
</table>
</form>
<table>
<tr bgcolor="#f5f5f5">
<td bgcolor="#FFFFFF"><em>注意:名称前有*的为必填项</em></td>
</tr>
</table>
css代码如下:
<title>添加客户</title>
<style type="text/css">
table {
background-color: #CCCCCC;
border: 1px;
width: 100%;
}
table tr {
height: 20px;
}
table tr div {
text-align: right;
}
td font {
color: red;
}
</style>