vue批量验证提交表单的数据是否合规
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue批量判定数据是否合规</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body>
<div id="app">
<p>主要用于数据的提交，批量判定是否有数据是否和规则</p>
<ul>
<li>
姓名：
<input type="text" v-model="name">
</li>
<li>
年龄：
<input type="number" v-model="age">
</li>
<li>
体重：
<input type="number" v-model="weight">
</li>
<li>
手机：
<input type="phone" v-model="phone">
</li>
<li>
邮箱：
<input type="email" v-model="email">
</li>
<li>
地址：
<input type="text" v-model="address">
</li>
</ul>
<button @click="btn()">点击测试数据是否正确</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: '',
age: '',
weight: '',
phone: '',
email: '',
address: ''
},
methods: {
// 判定是否合规
have_empty: function (arr) {
for (let key in arr) {
console.log(arr[key].inspect)
if (arr[key].inspect) { // 有值并且有规则执行验证
if(arr[key].reg){
let reg = new RegExp(arr[key].reg)
var red_end = reg.test(arr[key].inspect)
if( !red_end ){
alert('请输入正确的' + arr[key].msg)
return false
}
}
}else{ // 没值返回 fasle
alert('请输入' + arr[key].msg)
return false
}
}
return true },
// 判定规则前传入参数
inspect: function () {
var end = this.have_empty([
{
inspect: this.name, // 待检测的字段
msg: '姓名', // 空值返回的提示
},
{
inspect: this.age,
msg: '年龄'
},
{
inspect: this.weight,
msg: '体重'
},
{
inspect: this.phone,
msg: '手机号',
reg: '^[1][3,4,5,7,8][0-9]{9}$'
},
{
inspect: this.email,
msg: '邮箱',
reg: '^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$'
},
{
inspect: this.address,
msg: '地址'
}
])
console.log(end)
if (!end) return // 判定验证结果
console.log('执行提交的ajax函数') },
btn: function () {
this.inspect()
} },
mounted () { }, })
</script>
</body> </html>
vue批量验证提交表单的数据是否合规的更多相关文章
- 26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单
提交表单不刷新页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 11.VUE学习之提交表单时拿到input里的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- symfony2-创建提交表单生成数据过程
一.”一对多“关系 表shop(一)
- vue 自定义指令input表单的数据验证
一.代码 <template> <div class="check" > <h3>{{msg}}</h3> <div clas ...
- from提交表单后 数据提交到后台 但不跳转页面 可用iframe
可以页面事先加载被隐藏的iframe标签,或者等到需要的时候通过js生成,再提交,提交之前,form的target指向iframe(我是要实现新页面生成的时候程半透明状态,所以用了后者的方法) 代码如 ...
- post提交表单的数据查看方式(不是很理解，但要会看，可以找人商讨下，比如崔老师，自己再看一遍HTTP基础)
- ajax提交表单序列化（serialize()）数据
知识点: $("#form").serialize();将表单数据序列化为标准URL编码文本字符串(key1=value1&key2=value2…). 以下用一个例子来演 ...
- A、B同时打开一个页面进行同一条数据库记录进行修改，A修改完成后提交表单，A修改的数据保存完成后；当B也修改完成后，提交数据进行数据修改。此时B修改的内容会覆盖A修改的内容，请问如何避免?
A.B同时打开一个页面进行数据中的一条数据进行修改,A修改完成后提交表单,数据修改保存完成后B开始页面也修改完成,开始提交进行修改.此时B修改的内容会覆盖A的内容,请问如何避免? 通过搜索和我个人总结 ...
- validate验证注册表单
点击预览; <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
随机推荐
- Android屏幕相关的概念
1. 屏幕尺寸 实际的物理尺寸,作为屏幕的对角线测量. 为简单起见,安卓所有的实际屏幕尺寸为四个广义的大小:小,正常,大,和特大. 2. 屏幕密度 一个屏幕的物理区域内像素的数量:通常称为DPI(每英 ...
- 多条SQL语句对查询结果集的垂直合并，以及表设计时如何冗余字段
需求引入 你有一个销售单表A 和一个销售单详情表B 和一个收付款记录表C A---->B 一对多 A---->C一对多 如果一个销售单有两个详情,三条收款记录 对一个销售单 我们想查询 ...
- CI-CD平台搭建过程整理
Coding ---> gitlab --->jenkins ---> maven(nexus) ---> 编译构建成image ---> Harbor ---> ...
- springBoot(5)---单元测试，全局异常
单元测试,全局异常 一.单元测试 1.基础版 1.引入相关依赖 <!--springboot程序测试依赖,如果是自动创建项目默认添加--> <dependency> <g ...
- 课程回顾-Convolutional Neural Networks
为什么卷积层计算量更低paddingStrided convolution多维卷积LeNet 参数卷积网络的好处参数共享稀疏连接经典网络实现LeNet-5AlexNetVGGResNet残差块iden ...
- CountDownLatch/CyclicBarrie用法记录
在jdk1.5中,java提供了很多工具类帮助我们进行并发编程,其中就有CountDownLatch和CyclicBarrie 1.CountDownLatch的用法 CountDownLatch 位 ...
- Java 容器 & 泛型：五、HashMap 和 TreeMap的自白
Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Java 容器的文章这次应该是最后一篇了:Java 容器 系列. 今天泥瓦匠聊下 Maps. 一.Ma ...
- centos7非centos标准服务 /etc/init.d/service_name start || stop 启动异常
公司自己写的java程序,在centos7系统执行/etc/init.d/service_name start||stop的时候报错: grafana二次开发的程序 [root@docp1 init. ...
- web进修之—Hibernate 继承映射（5）
先看三个类的继承关系,Payment是父类,CashPayment和CreditCardPayment是Payment的子类: view plaincopy to clipboardprint p ...
- Perl的time、localtime和gmtime函数
time用于返回当前时间点,但返回结果是以从1970年1月1日(纪元由操作系统决定,但unix系统一般都是1970年1月1日)距离现在的秒数表示的 localtime用于返回给定时间的秒.分.时.日. ...