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 ...
随机推荐
- clion打断点不生效
打开CLion的偏好设置(Preferences),选择Build,Execution,Deployment->Toolchains,将Debugger中的Bundled LLDB修改为Bund ...
- [Swift]两种线程休眠的方式
一.线程休眠方式1 [Swift]与[C#]的比较: //C#:需要添加using System.Threading; //线程休眠3000毫秒,即3秒 Thread.Sleep(); //Swift ...
- python创建数组的方法
一 直接定义法: 1.直接定义 matrix=[0,1,2,3] 2.间接定义 matrix=[0 for i in range(4)] print(matrix) 二 Numpy方法: Numpy内 ...
- VIM简单配置
配置vim配置 编辑配置文件 feng@mint ~ $ vim ~/.vimrc 配置如下 主要配置为自动换行,设置行号,设置tab键为4个空格,同时将tab键自动转换成空格 set autoind ...
- 动态dp初探
动态dp初探 动态区间最大子段和问题 给出长度为\(n\)的序列和\(m\)次操作,每次修改一个元素的值或查询区间的最大字段和(SP1714 GSS3). 设\(f[i]\)为以下标\(i\)结尾的最 ...
- Java之单元测试工具（Junit）
Junit是Java单元测试框架,一般Eclipse里面会集成这个Junit4测试工具 既然是测试工具,虽然开发用得比较多,但作为测试人员也需要具备会Junit测试的思想,况且技多不压身 这里简单介绍 ...
- Java IO 导入导出Excel表格
1.将excel导入到内存 1. 调用工作簿Workbook的静态方法getWorkbook(),获得工作簿Workbook对象 InputStream in = new FileInputStrea ...
- 【ABP框架系列学习】N层架构(3)
目录 0.引言 1.DDD分层 2.ABP应用构架模型 客户端应用程序(Client Applications) 表现层(Presentation Layer) 分布式服务层(Distributed ...
- mysql 架构篇系列 1 复制原理和复制架构
一. 复制概述 mysql 从3.23版本开始提供复制功能,复制是指将主数据库的ddl和dml操作通过二进制日志传到复制服务器(也叫从服务器)上,然后在从服务器上对这些日志重新执行(也叫重做),从而使 ...
- 通用Web后台魔方NewLife.Cube
魔方 是一个基于 ASP.NET MVC 的 用户权限管理平台,可作为各种信息管理系统的基础框架. 演示:http://cube.newlifex.com 源码 源码: http://git.newl ...