<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
var flag1=false;
var flag2=false;
var flag3=false;
$("#name").blur(function(){
var $name=this.value;
if($name==null||$name==""){
$("span").eq(0).html("不能为空");
flag1=false;
}else{
flag1=true;
$("span").eq(0).hide();
}
});
$("#email").blur(function(){
var $email=this.value;
var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(myreg.test($email)){
flag2=true;
$("span").eq(1).hide();
}else{
$("span").eq(1).html("格式不正确");
flag2=false;
}
});
$("#tel").blur(function(){
var $tel=this.value;
if($tel.length>8&&$tel.length<11){
flag3=true;
$("span").eq(2).hide();
}else{
$("span").eq(2).html("格式不正确");
flag3=false;
}
});
$("button").click(function(){
if(flag1&&flag2&&flag3){
var $name=$("#name").val();
var $email=$("#email").val();
var $tel=$("#tel").val();
var $p=$("#se1").val();
var $s=$("#se2").val();
var mytr=$("<tr></tr>");
var td1=$("<td>"+$name+"</td>");
var td2=$("<td>"+$email+"</td>");
var td3=$("<td>"+$tel+"</td>");
var td4=$("<td>"+$p+"</td>");
var td5=$("<td>"+$s+"</td>");
var td6=$("<td><button>删除</button></td>");
mytr.append(td1);
mytr.append(td2);
mytr.append(td3);
mytr.append(td4);
mytr.append(td5);
mytr.append(td6);
$("#mybody").append(mytr);
$("#mybody button").click(function(){
var aa=confirm("确定删除?")
if(aa){
$(this).parent().parent().remove();
}
});
}
});
});
</script>
<script src="lib/angular.min.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycon",["$scope",function(myscope){
myscope.change=function(){
if(myscope.mm=="北京"){
myscope.list=["朝阳","海淀","昌平"];
}else if(myscope.mm=="山西"){
myscope.list=["太原","晋城","大同"];
}else if(myscope.mm=="河北"){
myscope.list=["廊坊","石家庄","保定"];
}
};
}]);
</script>
</head>
<body ng-app="myapp" ng-controller="mycon">
<title>添加用户</title>
<h3>添加用户名</h3>
<table>
<tr>
<td>姓名<input type="text" id="name"/><span></span></td>
</tr>
<tr>
<td>email<input type="email" id="email"/><span></span></td>
</tr>
<tr>
<td>电话<input type="tel" id="tel"/><span></span></td>
</tr>
<tr>
<td>
<select ng-change="change()" ng-model="mm" id="se1">
<option >请选择省份</option>
<option >北京</option>
<option >山西</option>
<option >河北</option>
</select>
</td>
</tr>
<tr>
<td> <select id="se2">
<option ng-repeat="d in list">{{d}}</option>
</select> </td>
</tr>
<tr>
<td><button>添加</button></td>
</tr>
</table>
<br />
<table border="1px">
<form>
<thead>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>操作</th>
</thead>
<tbody id="mybody">
</tbody>
</form>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
var flag1=false;
var flag2=false;
var flag3=false;
$("#name").blur(function(){
var $name=this.value;
if($name==null||$name==""){
$("span").eq(0).html("不能为空");
flag1=false;
}else{
flag1=true;
$("span").eq(0).hide();
}
});
$("#email").blur(function(){
var $email=this.value;
var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(myreg.test($email)){
flag2=true;
$("span").eq(1).hide();
}else{
$("span").eq(1).html("格式不正确");
flag2=false;
}
});
$("#tel").blur(function(){
var $tel=this.value;
if($tel.length>8&&$tel.length<11){
flag3=true;
$("span").eq(2).hide();
}else{
$("span").eq(2).html("格式不正确");
flag3=false;
}
});
$("button").click(function(){
if(flag1&&flag2&&flag3){
var $name=$("#name").val();
var $email=$("#email").val();
var $tel=$("#tel").val();
var $p=$("#se1").val();
var $s=$("#se2").val();
var mytr=$("<tr></tr>");
var td1=$("<td>"+$name+"</td>");
var td2=$("<td>"+$email+"</td>");
var td3=$("<td>"+$tel+"</td>");
var td4=$("<td>"+$p+"</td>");
var td5=$("<td>"+$s+"</td>");
var td6=$("<td><button>删除</button></td>");
mytr.append(td1);
mytr.append(td2);
mytr.append(td3);
mytr.append(td4);
mytr.append(td5);
mytr.append(td6);
$("#mybody").append(mytr);
$("#mybody button").click(function(){
var aa=confirm("确定删除?")
if(aa){
$(this).parent().parent().remove();
}
});
}
});
});
</script>
<script src="lib/angular.min.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycon",["$scope",function(myscope){
myscope.change=function(){
if(myscope.mm=="北京"){
myscope.list=["朝阳","海淀","昌平"];
}else if(myscope.mm=="山西"){
myscope.list=["太原","晋城","大同"];
}else if(myscope.mm=="河北"){
myscope.list=["廊坊","石家庄","保定"];
}
};
}]);
</script>
</head>
<body ng-app="myapp" ng-controller="mycon">
<title>添加用户</title>
<h3>添加用户名</h3>
<table>
<tr>
<td>姓名<input type="text" id="name"/><span></span></td>
</tr>
<tr>
<td>email<input type="email" id="email"/><span></span></td>
</tr>
<tr>
<td>电话<input type="tel" id="tel"/><span></span></td>
</tr>
<tr>
<td>
<select ng-change="change()" ng-model="mm" id="se1">
<option >请选择省份</option>
<option >北京</option>
<option >山西</option>
<option >河北</option>
</select>
</td>
</tr>
<tr>
<td> <select id="se2">
<option ng-repeat="d in list">{{d}}</option>
</select> </td>
</tr>
<tr>
<td><button>添加</button></td>
</tr>
</table>
<br />
<table border="1px">
<form>
<thead>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>操作</th>
</thead>
<tbody id="mybody">
</tbody>
</form>
</table>
</body>
</html>