验证

来源：互联网发布：seo推广学院编辑：程序博客网时间：2024/05/09 11:48

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../../代码/4.jQuery/jQuery-2.1.0/jquery-2.1.0.js"></script>
<script>
$(function(){
//按钮点击事件
$("#sub").click(function(){
var flag1 = flag2 = flag3 = flag4 = false;

//用户名非空
var name = $("#name").val();
if(name == null || name == ""){
//alert("用户名不能为空");
$("span").text("用户名不能为空");
flag1 = false;
}else{
$("span").text();
flag1 = true;
}

//密码长度验证
var pwd = $("#pwd").val();
var size = pwd.length;
if(size < 4 || size >16){
alert("密码长度不正确");
flag2 = false;
}else{
flag2 = true;
}

//年龄必须是数字（先验证非空）
var age = $("#age").val();
if(isNaN(age)){
alert("年龄必须是数字");
flag3 = false;
}else{
flag3 = true;
}

//验证性别必选
var sex = $("[name='sex']:checked");
var sex2 = sex.val();
var sexChecked = sex.size();
if(sexChecked != 1){
alert("性别必选");
flag4 = false;
}else{
flag4 = true;
}

//提交成功追加数据
var privince = $("#privince").val();
var city = $("#city").val();

if(flag1 && flag2 && flag3 && flag4){
alert("成立");
//创建单元格
var tCheckbox = $("<th><input class='check' type='checkbox' /></th>");
var tName = $("<td>"+name+"</td>");
var tPwd = $("<td>"+pwd+"</td>");
var tAge = $("<td>"+age+"</td>");
var tSex = $("<td>"+sex2+"</td>");
var tCity = $("<td>"+privince+"-"+city+"</td>");
//创建tr
var tr = $("<tr>");
//向tr中追加td
tr.append(tCheckbox).append(tName).append(tPwd).append(tAge).append(tSex).append(tCity);
//把tr放到tbody中
$("tbody:eq(1)").append(tr);
}else{
alert("asf");
}

});

//二级联动
$("#privince").change(function(){
var privince = $(this).val();
if(privince == "北京"){
//选中北京怎么更改城市下拉菜单中的内容
var city = $("<option selected='selected'>海淀区</option><option>昌平区</option><option>朝阳区</option><option>大兴区</option>");
$("#city").html(city);

}
if(privince == "河北"){
var city = $("<option >石家庄</option><option>唐山</option><option>保定</option><option selected='selected'>邢台</option>");
$("#city").html(city);
}
if(privince == "山西"){
var city = $("<option selected='selected'>运城</option><option>太原</option><option>临汾</option><option>大同</option>");
$("#city").html(city);
}
});

//全选
var a = 0;
$("#first").click(function(){
//var result = alert($(this).attr("checked"));
//a = 1;
if(a == 0){
//alert();
$(":checkbox").prop("checked","checked");
a = 1;
}else{
//alert("asdf");
$(":checkbox").prop("checked",false);
a = 0;
}
});

});
</script>

</head>

<body>
<center>
<h3>用户注册</h3>
<table border="1px solid blue" cellpadding="10" cellspacing="0">
<form action="*">
<tbody>
<tr>
<th>用户名</th>
<td><input id="name" type="text" placeholder="用户名不能为空" /><span></span></td>

</tr>
<tr>
<th>密　码</th>
<td><input id="pwd" type="text" placeholder="长度在4-16位之间" /></td>
</tr>
<tr>
<th>年　龄</th>
<td><input id="age" type="text" placeholder="年龄必须是数字" /></td>
</tr>
<tr>
<th>性　别</th>
<td><input name="sex" value="男" type="radio" />男<input value="女" name="sex" type="radio" />女</td>
</tr>
<tr>
<th>住　址</th>
<td>
省<select id="privince">
<option>北京</option>
<option>河北</option>
<option>山西</option>
</select>
市<select id="city">
<option>海淀区</option>
<option selected="selected">昌平区</option>
<option>朝阳区</option>
<option>大兴区</option>
</select>
</td>
</tr>
<tr>
<th colspan="2"><input id="sub" type="submit" value="提交" /></th>
</tr>
</form>
</tbody>
</table><br />
<button>批量删除</button><br /><br />
<table border="1px solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input id="first" type="checkbox" /> </th>
<th>用户名</th>
<th>密　码</th>
<th>年　龄</th>
<th>性　别</th>
<th>住　址</th>
</tr>
</thead>
<tbody>

</tbody>
</table>

</center>
</body>
</html>