Maison > Article > interface Web > Fonction de validation du formulaire d'opération angulaire ajouter, supprimer, modifier et vérifier
Fonction de validation du formulaire d'opération angulaire ajouter, supprimer, modifier et vérifier
- php中世界最好的语言original
- 2018-04-16 17:33:581606parcourir
Cette fois, je vais vous apporter la fonction de vérification d'ajout, de suppression, de modification et de vérification du formulaire d'opération angulaire. Quelles sont les précautions pour la fonction de vérification d'ajout, de suppression, de modification et de vérification de l'opération angulaire. form Ce qui suit est un cas pratique, jetons un coup d'œil.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.sspan{
background: #28a54c;
color: #fff;
margin-left: 5px;
}
th,td{
border: 1px solid #000;
padding: 10px;
}
table{
text-align: center;
width: auto;
border-collapse: collapse;
}
button{
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<p style="width: 1000px">
<input type="text" placeholder="用户名搜索" ng-model="yhmss"/>
<input type="text" placeholder="手机号搜索" ng-model="sjhss"/>
<select ng-model="Choicecity">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select>
<select ng-model="Choicestate">
<option>选择状态</option>
<option>发货</option>
<option>已发货</option>
</select>
<select ng-model="Choiceorder">
<option>开始月份</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
-
<select>
<option>结束月份</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</p>
<button ng-click="tianjia()">新增订单</button>
<button ng-click="plsc()">批量删除</button>
<table>
<thead>
<tr style="background: #4404">
<th><input type="checkbox" ng-model="checkAll" ng-click="quan()"/></th>
<th>id<button ng-click="sort('id')" class="sspan">排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<button ng-click="sort('price')" class="sspan">排序</button></th>
<th>城市</th>
<th>下单时间<button ng-click="sort('order')" class="sspan">排序</button></th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data|filter:{name:yhmss}|filter:{phone:sjhss}|filter:cityFun|filter:stateFun|filter:orderFun|orderBy:cc:dd">
<td><input type="checkbox" ng-model="item.done"/></td>
<td>{{$index+1}}</td>
<td>{{item.commodity}}</td>
<td>{{item.name}}</td>
<td>{{item.phone}}</td>
<td>{{item.price}}</td>
<td>{{item.city}}</td>
<td>{{item.order}}</td>
<td ng-click="fahuo($index)"> {{item.state}} </td>
</tr>
</tbody>
</table>
<p ng-show="tj" style="margin-left: 200px" >
<h1>添加</h1>
<form name="registerForm" novalidate>
<p id="email-group">
<label for="email">E-mail:</label> <input type="email" class="form-control" ng-model="email" name="email" id="email" placeholder="请输入电子邮箱..." required>
<p>
<span style="color: red" ng-show=" registerForm.email.$invalid">
<span ng-show="registerForm.email.$error.required">*请输入邮箱</span> <span
ng-show="registerForm.email.$error.email">*请输入正确的email地址</span>
</span>
</p>
</p>
<p id="name-group">
<label for="name">昵称：</label> <input type="text" class="form-control" ng-model="name" name="name" id="name" placeholder="请输入昵称..." required>
<p>
<span style="color: red" ng-show="registerForm.name.$invalid">
<span ng-show="registerForm.name.$error.required">*请输入姓名</span>
</span>
</p>
</p>
<p id="password-group">
<label for="password">密码：</label> <input type="password" class="form-control" ng-model="password"
ng-minlength="6" ng-maxlength="20" name="password" id="password"
placeholder="请输入密码..." required>
<p>
<span style="color: red" ng-show="registerForm.password.$invalid">
<span ng-show="registerForm.password.$error.minlength">*密码长度不小于6</span>
<span ng-show="registerForm.password.$error.maxlength">*密码长度不超过20</span>
</span>
</p>
</p>
<p id="passwordagaingroup">
<label for="passwordagain">再输入一遍密码：</label> <input type="password"
class="form-control" ng-model="passwordagain" name="passwordagain"
id="passwordagain" placeholder="请再输一遍密码..." required>
<p>
<span style="color: red" ng-show="registerForm.password.$valid">
<span ng-show="passwordagain!=password">*两次密码输入不一致</span>
</span>
</p>
</p>
<button type="submit" class="btn btn-success" ng-click="tianjiapp()"
ng-disabled="registerForm.email.$invalid || registerForm.name.$invalid || registerForm.password.$invalid || password != passwordagain">
提交<span class="fa fa-arrow-right"></span>
</button>
</form>
</p>
</body>
</html>
<script src="angular.js"></script>
<script>
var app = angular.module("myapp",[]);
app.controller("myCtrl",function ($scope) {
$scope.data = [
{ commodity:"iPhone4",
name:"张三",
phone:151111111,
price:4999,
city:"北京",
order:"8-1",
state:"发货",
done:false
},
{ commodity:"小米6",
name:"李四",
phone:15222222,
price:2999,
city:"北京",
order:"8-2",
state:"发货",
done:false
},
{ commodity:"华为P9",
name:"王五",
phone:153333333,
price:3999,
city:"上海",
order:"9-3",
state:"已发货",
done:false
},
{ commodity:"OPPO R11",
name:"赵六",
phone:15444444,
price:4999,
city:"天津",
order:"9-4",
state:"已发货",
done:false
},
{ commodity:"ViVo",
name:"钱七",
phone:155555555,
price:2999,
city:"重庆",
order:"10-4",
state:"已发货",
done:false
}
];
$scope.Choicecity = "选择城市";
$scope.cityFun = function (item) {
if($scope.Choicecity != "选择城市"){
if( item.city == $scope.Choicecity){
return true;
}else {
return false;
}
}else {
return true;
}
};
$scope.Choicestate = "选择状态";
$scope.stateFun = function (item) {
if($scope.Choicestate != "选择状态"){
if(item.state == $scope.Choicestate){
return true;
}else {
return false;
}
}else {
return true;
}
};
$scope.pl = "已发货";
$scope.fahuo = function (index) {
if($scope.data[index].state=="发货"){
$scope.data[index].state =$scope.pl;
}
};
$scope.Choiceorder = "开始月份";
$scope.orderFun = function (item) {
if($scope.Choiceorder != "开始月份"){
var arr = $scope.order.split("-");
var min = arr[0];
var max = arr[1];
if(item.order >= min){
return false;
}else {
return true;
}
}else {
return true;
}
}
$scope.quan = function () {
if($scope.checkAll == true){
for(var i = 0 ; i <$scope.data.length ; i++){
$scope.data[i].done = true;
}
}else{
for(var i = 0 ; i <$scope.data.length ; i++){
$scope.data[i].done = false;
}
}
};
$scope.plsc = function () {
for(var i = 0 ; i <$scope.data.length ; i++){
if($scope.data[i].done == true){
$scope.data.splice(i,1);
i--;
}
}
};
$scope.tj = false;
$scope.tianjia = function () {
$scope.tj = true;
};
$scope.error = false;
$scope.tijiaola = function () {
if($scope.commoditys==null||$scope.names==null||
$scope.commoditys<6||$scope.commoditys.length>20){
$scope.error = true;
}
};
$scope.dd = false;
$scope.cc = "id";
$scope.sort = function (couldm) {
if($scope.cc == couldm ){
$scope.dd =! $scope.dd;
}
$scope.cc = couldm;
}
$scope.tianjiapp = function () {
$scope.data.push({commodity:$scope.email,name:$scope.name,phone:$scope.password})
}
})
</script>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment Yuansheng JS implémente le téléchargement de fichiers asynchrone
Explication graphique détaillée de Require.js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter le téléchargement de fichiers asynchrone dans Yuansheng JSArticle suivant：Comment implémenter le téléchargement de fichiers asynchrone dans Yuansheng JS
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript