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 ...
随机推荐
- 漫谈PHP组件、框架、Composer那些事
什么是组件 组件是一组打包的代码,是一系列相关的类.接口和Trait,用于帮助我们解决PHP应用中某个具体问题.例如,你的PHP应用需要收发HTTP请求,可以使用现成的组件如guzzle/guzzle ...
- java中this的N种使用方法
this可能是几乎所有有一点面向对象思想的语言都会引用到的变量,java自然不例外.只是,this有多少种用法,我也不知道了,让我们来see see. 由简入奢! 易. 来个例子说明下: public ...
- Redis 设计与实现 （一）--数据结构
底层数据结构:动态字符串.字典.整数集合.双端链表.压缩列表 字符串对象: int 浮点数值 raw 字符串值>32字节 embstr 字符串值<32字节 字符串编码转换: i ...
- 开源框架SpringMvc和Struts2的区别
1.机制 spring mvc 和 struts2的加载机制不同:spring mvc的入口是servlet,而struts2是filter:(servlet和filter的区别?) 2.性能 spr ...
- Python - 使用objgraph生成对象引用关系图
1- objgraph简介 HomePage:https://mg.pov.lt/objgraph/ PyPI:https://pypi.org/project/objgraph/ 一般用于分析pyt ...
- pycharm中配置启动Django项目
1.先打开mange.py,然后再运行,会提示一堆东西,表示没有配置参数.在pycharm中点击edit configurations 编辑配置参数. 2.点开之后弹出如下对话框,在scrip par ...
- java多线程（2）---生命周期、线程通讯
java生命周期.线程通讯 一.生命周期 有关线程生命周期就要看下面这张图,围绕这张图讲解它的方法的含义,和不同方法间的区别. 1.yield()方法 yield()让当前正在运行的线程回到就绪 ...
- NLog 自定义Target
http://nlog-project.org/2015/06/30/extending-nlog-is-easy.html 新建一个类库,命名规则为NLog.*.dll 定义一个类输出日志到Rabb ...
- 译《The Part-Time Parliament》——终于读懂了Paxos协议！
最近的考古发现表明,在Paxos小岛上,尽管兼职议会成员都有逍遥癖,但议会模式仍然起作用.他们依旧保持了一致的会议记录,尽管他们频繁的进出会议室并且他们的信使还很健忘.Paxon议会协议提供了一种新方 ...
- Win32编程之静态库编写与使用.动态链接库的编写与使用
Win32编程之静态库编写与使用.动态链接库的编写与使用 一丶什么是静态库.什么是动态链接库. 静态库其实就是解决模块开发的一种解决方案.在以前.我们写代码的时候.每个人都可以独立写一个项目.但是现在 ...