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 ...
随机推荐
- idea src下源文件和class编译文件不一致
今天遇到一个神奇BUG,一个和elasticsearch没有任何关系的项目,报错ES某个包找不到,刚开始以为是依赖了父项目的某个包,并且本项目主启动类ComponentScan扫描了相关的类进入Spr ...
- linux上安装jdk环境
只在于安装jdk1.6.jdk1.7和jdk1.8,其他版本请绕行,目的在于方便自己和大家以后急于做jdk环境,苦于没有jdk安装包和设置变量的过程,我将安装包均放在云盘中, 需要直接在连接中找即可: ...
- js自定义水印
前言:今天在github上看到了一个定义水印的项目,因为获取的星星还蛮多,就多看了几眼,发现该项目简单有趣,心想以后可能会用的到,并且我下载到本地并亲自测试运行了一波.其实该项目最吸引我的是它定义js ...
- 深入Vue2.x的虚拟DOM diff原理
一.前言 Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),关于双向绑定可以参阅木琴的文章<剖析Vue原理&实现双向绑定MVVM>,vdom是树状结构,其节点为vnod ...
- [Jenkins]IOS构建机配置记录
------------------- 如需转载,请注明出处 ------------------- 随着业务量和开发人员的递增,IOS构建每天都会排队,影响研发效率.随购买了新的垃圾桶,进行配置. ...
- 04 Tensorflow的中的常量、变量和数据类型
打开Python Shell,先输入import tensorflow as tf,然后可以执行以下命令. Tensorflow中的常量创建方法: hello = tf.constant('Hello ...
- SaltStack安装配置详解
一.简介 Saltstack 比 Puppet 出来晚几年,是基于Python 开发的,也是基于 C/S 架构,服务端 master 和客户端 minions :Saltstack 和 Puppet ...
- EDI 学习开发（一）
最近有个需求,关于EDI 的开发,效果烂成一坨屎,写个总结,记录这坨屎. 配置文件:01.EDI.Export.Config(在EDI 服务器SystemConfig目录下) 02.EDI.TypeC ...
- Golang中的自动伸缩和自防御设计
Raygun服务由许多活动组件构成,每个组件用于特定的任务.其中一个模块是用Golang编写的,负责对iOS崩溃报告进行处理.简而言之,它接受本机iOS崩溃报告,查找相关的dSYM文件,并生成开发者可 ...
- Perl基础速成
本文是针对没有Perl基础,但想用perl一行式命令取代grep/awk/sed的人,用于速学Perl基础知识. Perl一行式系列文章:Perl一行式程序 perl的-e选项 perl命令的-e选项 ...