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 NDK学习（二）：编译脚本语法Android.mk和Application.mk
一.Android.mk Android.mk分为一下几部分: LOCAL_PATH:= $(call my-dir), 返回当前文件在系统中的路径,Android.mk文件开始时必须定义该变量. i ...
- 项目笔记：2017年（SSM架构）
一.第一部分 前后端分离后的测试工具的使用(Postman): svn先更新再提交,冲突就把自己占位的地方让出,再提交: maven项目也可以用tomcat直接启动: 在mybatis.xml文件中, ...
- 性能调优之Mapping
Mapping层级的调优可能会花费时间,但是性能调优的效果确实非常显著的 优化Target,Source之后,可以调优Mapping 通常的方法是尽可能减少组件及组件的字段间不必要的连线 即尽可能用最 ...
- iview导航菜单updateOpened和updateActiveName的使用
先看官方文档: iview导航菜单 这里主要遇到的问题有两个: 1. 点击回到首页(B按钮)时需要取消选中当前选中的菜单项(全部不选中),这里用到的是 updateActiveName方法 2. 点击 ...
- .NET Core部署中你不了解的框架依赖与独立部署
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9703460.html NET Core项目发布的时候你有没有注意到这两个选项呢?有没有纠结过框架依赖与独 ...
- error) DENIED Redis is running in protected mode because protected mode is enabled报错
官网地址:https://redis.io/download 官方安装文档如下: Installation Download, extract and compile Redis with: $ wg ...
- sql server 日志文件结构及误操作数据找回
一. 概述 在sql server 里有数据文件.mdf和日志文件.ldf,日志文件是sqlserver数据库的另一个重要组成部分,日志文件记录了所有事务以及每个事务对数据库所做的修改.为了提高数据库 ...
- pip install 安装出现问题：UnicodeEncodeError: 'ascii' codec can't encode characters in position XX的解决办法
pip install 安装出现问题:UnicodeEncodeError: 'ascii' codec can't encode characters in position XX的解决办法 转自c ...
- Struts1入门实例（简单登录）
Struts1入门实例(简单登录) 现在开始加入公司的核心项目,但由于项目开发比较早,所以使用的技术不是很新潮,前台用的还是struts1. 虽然不是什么新技术,但仍可以从中学到好多东西的.花了一个晚 ...
- ⑦JSP2.0的福利（标签文件）
前言 本篇接着上一篇博客:[传送门] 这次讲的是JSP2.0的特性之一,我们可以编写标签文件,指没有标签处理器和标签类库描述符的定制动作指令,不编译,无标签类描述符. 本文结构: ①标签文件简介 ②第 ...