一。代码验证:
以下是代码实现用户名密码简单校验。
以下是实现的效果
以下是全部代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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>
<script src="http://libs.baidu.com/jQuery/1.10.2/jquery.min.js"></script>
<script type="text/JavaScript">
function checkForm(){
//jQuery取得用户输入的name,age,email值
var name = $("#clientname").val();
var age = $("#age").val();
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(age == ""){
//同上
$(".age_lable").empty();
$("#age").after("<label class='age_lable'><font>年龄不能为空</font></label>");
}
//如果年龄不为空且不是数字0-130之间,则在#age后面添加一个提示“年龄是0-130的数字”的提示;
else if(checkAge(age)== false){
$(".age_lable").empty();
$("#age").after("<label class='age_lable'><font>年龄是0-130的数字</font></label>");
}else{
$(".age_lable").empty();
}
//定义一个方法,校验年龄是否在0-130之间,是就返回true;
function checkAge(age){
var flag = false;
for(var i = 0; i<=130; i++){
if(age == i){
flag = true;
break;
}
}
return flag;
}
if(email == ""){
$(".email_lable").empty();
//在email后面添加个lable标签用after
$("#email").after("<label class='email_lable'><font>邮箱不能为空</font></label>");
}else{
$(".email_lable").empty();
}
return false;
}
//年龄是0-100的数字
</script>
</head>
<body>
<form name="client_form" action="jquery_事件.html" method="get" οnsubmit="return checkForm()">
<table>
<tr bgcolor="#f0f0f0" >
<td><div>客户类别:</div></td>
<td><select name="clienttypeid">
<option value="">大客户</option>
<option value="">小客户</option>
</select>
</td>
</tr>
<tr bgcolor="#f5f5f5">
<td><div><font>*</font> 姓名:</div></td>
<td>
<input id="clientname" type="text" name="clientname" value="" size="30">
</td>
</tr>
<tr bgcolor="#f5f5f5">
<td><div><font>*</font> 年龄:</div></td>
<td><input id="age" type="text" name="age" value="" size="30"></td>
</tr>
<tr bgcolor="#f0f0f0" >
<td><div>性别:</div></td>
<td>
<select name="sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
</td>
</tr>
<tr bgcolor="#f5f5f5" >
<td><div>出生年月:</div></td>
<td>
<input type="text" name="birthday" value="" size="30">
</td>
</tr>
<tr bgcolor="#f0f0f0" >
<td><div>所属公司:</div></td>
<td><input type="text" name="company" value="" size="30"></td>
</tr>
<tr bgcolor="#f5f5f5" >
<td><div>职务:</div></td>
<td><input type="text" name="business" value="" size="30"></td>
</tr>
<tr bgcolor="#f0f0f0" >
<td><div>电话:</div></td>
<td><input type="text" name="tel" value="" size="30"></td>
</tr>
<tr bgcolor="#f5f5f5" >
<td><div>地址:</div></td>
<td><input type="text" name="adress" value="" size="30"></td>
</tr>
<tr bgcolor="#f0f0f0" >
<td><div><font>*</font>邮箱:</div></td>
<td><input id="email" type="text" name="email" value="" size="30"></td>
</tr>
<tr bgcolor="#f5f5f5" >
<td><div>业务往来情况:</div></td>
<td><textarea name="businessinfor" rows="5" cols="32"></textarea></td>
</tr>
<tr bgcolor="#f0f0f0" >
<td><div>客户照片:</div></td>
<td><input type="file" name="filepic"></td>
</tr>
<tr bgcolor="#f5f5f5" >
<td><div>事件提醒:</div></td>
<td><input type="text" name="eventawoke" value="" size="30"></td>
</tr>
<tr bgcolor="#f0f0f0" >
<td></td>
<td colspan="2"><input type="submit" value="提交">
<input type="reset" value="重置"></td>