表单验证年龄

最新推荐文章于 2023-04-01 17:36:37 发布

来自北方的实际过往

最新推荐文章于 2023-04-01 17:36:37 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/guohui151/article/details/79079248

这个示例展示了如何使用AngularJS创建一个表单，包括姓名、密码和年龄输入，实现表单验证和用户数据管理。用户可以添加、删除、更新记录，并通过年龄和性别筛选显示数据。此外，还有针对年龄范围的查询功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
width: 80%;
margin: 0 auto;
}
table{
width: 800px;
text-align: center;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module("hui",[]);
app.controller("dome",function($scope){
$scope.tt=[{
name:'李三',
mima:123456,
age:5,
sex:'男'
},{
name:'张思',
mima:741258,
age:15,
sex:'男'
},{
name:'王五',
mima:111111,
age:30,
sex:'女'
},{
name:'马六',
mima:222222,
age:45,
sex:'女'
},{
name:'李1',
mima:842563,
age:80,
sex:'男'
},{
name:'张五',
mima:666666,
age:60,
sex:'男'
},{
name:'李就',
mima:555555,
age:45,
sex:'女'
}];

$scope.add=function(){//弹出添加框
$scope.chu=true;
}

//添加方法
$scope.tian = function() {//表單驗證
var nname = $scope.tname;
var mmima = $scope.tmima;
var aage = $scope.tage;
var ssex = $scope.hh;
var flag=false;
if(nname == "" || nname == null) {
$("#uname").text("姓名不能为空");
flag=false;
}else{
$("#uname").text("");
flag=true;
}

if( mmima== "" || mmima == null) {
$("#umima").text("密码不能为空。");
flag=false;
}else{
$("#umima").text("");
flag=true;
}

if(aage == "" || aage == null) {
$("#uage").text("年龄不能为空。");
flag=false;
}else{
$("#uage").text("");
flag=true;
}

if(flag==true){
$scope.tt.push({
st: false,
name: nname,
mima: mmima,
age: aage,
sex: ssex,
});
$scope.chu = false;
};
}

$scope.All = function() { //选中
for(var i = 0; i < $scope.tt.length; i++) {
$scope.tt[i].st = $scope.all;
}
}

$scope.del = function() {//批量删除
for(var i = 0; i < $scope.tt.length; i++) {
if($scope.tt[i].st == true) {
$scope.tt.splice(i, 1);
i--;
}
}
}

$scope.update=function(){//全部删除
for(var i=0;i<$scope.tt.length;i++){
$scope.tt.splice(i);
}
}

$scope.dd=function(p){//年龄查询
var lin= $scope.nian;
if(lin==undefined||lin==""){
return true;
}
var v_ag=lin.split("-");
var min=v_ag[0];
var max=v_ag[1];
if(p>=min && p<=max) {
return true;
} else {
return false;
}
}


})
</script>
</head>
<body ng-app="hui" ng-controller="dome">
<form>
姓名查找<input type="text" ng-model="uname"/>
年龄查找
<select ng-model="nian" style="width: 100px;">
<option value="" selected="selected">请选择</option>
<option value="10-20">10-20</option>
<option value="25-35">25-35</option>
<option value="50-100">50-100</option>
</select>

性别查找
<select ng-model="bie" style="width: 100px;">
<option value="">请选择</option>
<option>男</option>
<option>女</option>
</select>

<button ng-click="update()">全部删除</button>
<button ng-click="del()">批量删除</button>
</form><br />
<table border="1px">
<tr>
<td>
全选<input type="checkbox" ng-click="All()" ng-model="all"/>
</td>
<td>序号</td>
<td>姓名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr ng-show="dd(t.age)" ng-repeat="t in tt |filter:{name:uname,sex:bie}">
<td><input type="checkbox" ng-model="t.st"/></td>
<td>{{$index}}</td>
<td>{{t.name}}</td>
<td>
{{t.mima}}
<input ng-model="t.mima" ng-show="f" />
<input type="button" value="保存" ng-show="f" ng-click="f=false" />
</td>
<td>{{t.age}}</td>
<td>{{t.sex}}</td>
<td><button ng-click="f=true">修改秘码</button></td>
</tr>
</table>
<button ng-click="add()" style="text-align: center;">添加用户</button><br /><br />

<div ng-show="chu">
<p>添加用户</p>
<form style="border: 1px solid tomato; width: 500px;text-align: center;">
姓名<input type="text" ng-model="tname" style="margin-top: 10px;"/><span id="uname"></span><br />
密码<input type="text" ng-model="tmima" style="margin-top: 10px;"/><span id="umima"></span><br />
年龄<input type="text" ng-model="tage" style="margin-top: 10px;"/><span id="uage"></span><br />
性别<input type="radio" value="男" name="aa" ng-model="hh"/>男
<input type="radio" value="女" name="aa" ng-model="hh"/>女<br />
<input type="button" value="提交" ng-click="tian()"/>
</form>
</div>
</body>
</html>

表单验证 年龄

表单验证年龄