Vue-表单验证-全选-反选-删除-批量删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app" style="width: 1000px;margin: 0 auto;margin-top: 60px;">
<div class="form-group">
<label>手机号</label>
<input type="text" class="form-control" placeholder="(请输入手机号)" style="width: 500px;" v-model="mobile" />
</div>
<div class="form-group">
<label>邮箱</label>
<input type="text" class="form-control" placeholder="(请输入电子邮箱)" style="width: 500px;" v-model="email" />
</div>
<div class="form-group">
<label>真实姓名</label>
<input type="text" class="form-control" placeholder="(姓名必须是中文汉字)" style="width: 500px;"
v-model="realname" />
</div> <button type="button" class="btn btn-primary" @click="add">立即添加</button>
<p v-for="(v,k) in errors" style="margin: 0 auto;margin-top: 20px;color: red;font-size: 18px;">
{{v}}
</p> <div style="margin-top: 60px;">
<table class="table table-hover">
<th><input type="checkbox" v-model="isCheck" @click="check()"></th>
<th>编号</th>
<th>手机号</th>
<th>邮箱</th>
<th>真实姓名</th>
<th>操作</th>
<tr v-for="(v,k) in user">
<td><input type="checkbox" v-model="v.status"></td>
<td>{{v.id}}</td>
<td>{{v.mobile}}</td>
<td>{{v.email}}</td>
<td>{{v.realname}}</td>
<td><button class="btn btn-danger" @click="del(k)">删除</button></td>
</tr>
</table>
<button class="btn btn-danger" @click="checkAll()">全选</button>
<button class="btn btn-danger" @click="checkNo()">全不选</button>
<button class="btn btn-danger" @click="checkRev()">反选</button>
<button class="btn btn-danger" @click="checkDel()">批量删除</button>
</div>
</div>
</body>
</html> <script>
new Vue({
el: "#app",
data: {
mobile: "",
email: "",
realname: "",
errors: [],
isCheck: false,
user: [{
id: 1,
mobile: '18518393112',
email: '123131@qq.com',
realname: '邓超',
status: false
},
{
id: 2,
mobile: '18518393000',
email: '3322441@qq.com',
realname: '戎飞',
status: false
}
]
},
methods: {
//添加
add() {
if (this.checkForm()) {
//window.location.href = 'success.html'
var obj = {
id: this.user.length + 1,
mobile: this.mobile,
email: this.email,
realname: this.realname,
status: false
}
this.user.push(obj);
}
},
//表单验证
checkForm() {
this.errors = [];
if (this.mobile == '') {
this.errors.push('手机号不能为空');
return false;
}
var regMobile = /^1[35789]\d{9}$/;
if (!regMobile.test(this.mobile)) {
this.errors.push('手机号格式不正确');
return false;
}
if (this.email == '') {
this.errors.push('邮箱不能为空');
return false;
}
var regEmail = /^\w{6,30}@\w{2,6}\.+(com|cn)$/;
if (!regEmail.test(this.email)) {
this.errors.push('邮箱格式为空');
return false;
}
if (this.realname == '') {
this.errors.push('真实姓名不能为空');
return false;
}
var regRealname = /^[\u4e00-\u9fa5]{2,5}$/i;
if (!regRealname.test(this.realname)) {
this.errors.push('真实姓名格式不正确');
return false;
} if (this.errors.length == 0) {
return true;
} else {
return false;
}
},
//全选
checkAll() {
this.user.map(function(v, k) {
v.status = true;
});
},
//全不选
checkNo() {
this.user.map(function(v, k) {
v.status = false;
});
},
//反选
checkRev() {
this.user.map(function(v, k) {
v.status = !v.status;
});
},
//删除
del(k) {
this.user.splice(k, 1);
},
//批量删除
checkDel() {
var arr = [];
this.user.map(function(v, k) {
if (v.status == false) {
arr.push(v);
}
});
this.user = arr;
},
//点击复选框，全选/取消全选
check() {
if (this.isCheck == false) {
this.user.map(function(v, k) {
v.status = true;
});
} else {
this.user.map(function(v, k) {
v.status = false;
});
}
} }
});
</script>
Vue-表单验证-全选-反选-删除-批量删除的更多相关文章
- jQuery实现全选/反选和批量删除
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- JavaScript实现表单的全选,反选,获取值
构思 通过for循环和for in循环来实现,界面效果如下 步骤 全选: 循环给所有的表单设置checked 反选: 循环内判断checked是否为true,如果为true则改为false否则改为tr ...
- 表单Checkbox全选反选全不选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue表单验证--veevalidate使用教程
vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- vue 表单验证实例
1.注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- vue表单验证：vee-validate中文提示
官方文档:https://baianat.github.io/vee-validate/guide/ vee-validate可用于vue项目中进行表单验证,使用方法在官方API上都可以查到: 使用过 ...
- Vue表单验证插件的制作过程
一.表单验证模块的构成 任何表单验证模块都是由 配置――校验――报错――取值 这几部分构成的. 配置: 配置规则 和配置报错,以及优先级 校验: 有在 change 事件校验, 在点击提交按钮的时候校 ...
- PHP基础班初学心得：用JQ实现表单的全选、反选、取消和删除功能
摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...
随机推荐
- 布局TabBar
布局TabBar中的items Tabbar中应该有5个Item 主页/消息/发布按钮/发现/我 布局TabBar中的Items可以通过下面的方式 通过自定义TabBar的方式 多添加一个控制器,让中 ...
- NSTimer的使用
开启定时器 @property (nonatomic, weak) NSTimer *timer; // 返回一个自动开始执行任务的定时器 self.timer = [NSTimer schedule ...
- Linux 内核引导参数简介
概述 内核引导参数大体上可以分为两类:一类与设备无关.另一类与设备有关.与设备有关的引导参数多如牛毛,需要你自己阅读内核中的相应驱动程序源码以获取其能够接受的引导参数.比如,如果你想知道可以向 AHA ...
- 【CF888G】Xor-MST(生成树 Trie)
题目链接 大意 给出\(N\)个点的点权,定义两个点之间的边权为这两个点权的异或和,求这\(N\)个点间的最小生成树. 思路 贪心地想,相连的两个点异或和应当尽量的小. 那么应先从高位确定,因为高位的 ...
- 编译安装http2.4
编译安装http2.4 1.安装相关依赖包 [root@centos7 ~]yum -y install gcc make 2.下载http2.4包,并解压 [root@centos7 ~]#tar ...
- 生成一个node项目
生成一个node项目1.创建文件夹2.文件夹中右键->在此处打开命令窗口->文件夹中打开dos3.执行:npm init //一路回车,最后y4.安装插件: C:\www\nodejs\h ...
- Solution -「HDU 6875」Yajilin
\(\mathcal{Description}\) Link.(HDU 裂开了先放个私链 awa.) 在一个 \(n\times n\) 的方格图中,格子 \((i,j)\) 有权值 \(w_ ...
- Vue脚手架报错 Component name "Student" should always be multi-word vue/multi-word-component-names
报错信息分析: 新手在第一个次使用脚手架的时候难免会遇到各种各样奇怪的问题,最近在学习Vue的过程中就出现了如下问题 通过阅读报错信息可知: 是我们的组件名有一些问题,(报错信息翻译过来大概就是组件名 ...
- MySQL 利用frm文件和ibd文件恢复表结构和表数据
文章目录 frm文件和ibd文件简介 frm文件恢复表结构 ibd文件恢复表数据 通过脚本利用ibd文件恢复数据 通过shell脚本导出mysql所有库的所有表的表结构 frm文件和ibd文件简介 在 ...
- NeurIPS 2017 | QSGD: Communication-Efficient SGD via Gradient Quantization and Encoding
由于良好的可扩展性,随机梯度下降(SGD)的并行实现是最近研究的热点.实现并行化SGD的关键障碍就是节点间梯度更新时的高带宽开销.因此,研究者们提出了一些启发式的梯度压缩方法,使得节点间只传输压缩后的 ...