实现表单数据校验功能

因为项目用的UI库功能太少,表单不具备校验功能,所以自己写了一个,只有一个文件。

使用

import { required, email, useValidate } from 'validate'
let rules = {
username: { name:'邮箱号', validate: [required, email] }, // name用于错误提示,validate是需要符合的校验规则列表
password: { name:'密码', validate: [required] }
}
useValidate(formData, rules)

源文件

validate.js

// 校验的主函数
export const useValidate = (formData, rules) => {
return Promise.all(
Object.entries(rules).map(([key, rule]) => {
return Promise.all(
rule.validate.map(func => func(formData[key]))
).catch((err) => {
console.log(rule.name + err) // 错误提示(打印或弹窗)
return Promise.reject()
})
})
)
} // 以下都是一些常见的校验方法
// 是否必填
export const required = (value) => {
return isEmpty(value) ? Promise.reject('未填写') : Promise.resolve()
} // 数字
export const number = () => {
const reg = /^[0-9]*$/;
if (!reg.test(value)) {
return Promise.reject('应输入数字')
} else {
return Promise.resolve()
}
} // 邮箱
export const email = (value) => {
const reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
if (reg.test(value)) {
Promise.resolve()
} else {
return Promise.reject('格式错误')
}
} // 大陆手机号
export const phone = (value) => {
const reg = /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[235-8]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|66\d{2})\d{6}$/
if (reg.test(value)) {
return Promise.resolve()
} else {
return Promise.reject('格式错误')
}
} // URL
export const https = (value) => {
const reg = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
if (reg.test(value)) {
return Promise.resolve()
} else {
return Promise.reject('格式错误')
}
} // 特殊字符
export const specialChar = () => {
const regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
const regCn = /[·!#¥(——):;“”‘、,|《。》?、【】[\]]/im;
if (regEn.test(value) || regCn.test(value)) {
return Promise.reject('不能包含特殊字符')
} else {
return Promise.resolve()
}
} const isEmpty = (v) => { // 为空的逻辑,可以自己看需求实现
switch (typeof v) {
case 'undefined' : return true;
case 'string' : if(v.trim().length == 0) return true; break;
case 'boolean' : if(!v) return true; break;
case 'number' : if(0 === v) return false; break;
case 'object' :
if(null === v) return true;
if(undefined !== v.length && v.length==0) return true;
for(var k in v) { return false; } return true;
break;
default: break;
}
return false;
};

[JavaScript] 实现简单的表单数据校验功能的更多相关文章

  1. SpringBoot表单数据校验

    Springboot中使用了Hibernate-validate作为默认表单数据校验框架 在实体类上的具体字段添加注解 public class User { @NotBlank private St ...

  2. 04004_使用JavaScript完成注册表单数据校验

    1.需求分析 (1)用户在进行注册的时候会输入一些内容,但是有些用户会输入一些不合法的内容,这样会导致服务器的压力过大,此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验): (2)前端校验 ...

  3. 关于elementui表单数字校验踩坑记

    需求:1.输入类型是数字.2.数字大小有限制.3.非必填 做法: <el-form-item label="熟悉程度" prop="averageCaseRunTi ...

  4. JavaScript实现ajax发送表单数据

    知识点: 1.重置表单数据 2.获取表单数据(纯JavaScript) 3.设置表单数据(纯JavaScript) 4.ajax发送数据到客户端 (1)设置请求头,自己组合数据 (2)实例化表单对象, ...

  5. 每天一个JavaScript实例-检測表单数据

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. SpringMVC4+thymeleaf3的一个简单实例(篇四:form表单数据验证)

    关于表单数据验证有很多中方法,这里我仅介绍JSR303注解验证.JSR303仅仅是一个规范,这里我们要用到它的一个实现:hibernate-validator. 注意在spring的配置文件sprin ...

  7. Js:消息弹出框、获取时间区间、时间格式、easyui datebox 自定义校验、表单数据转化json、控制两个日期不能只填一个

    (function ($) { $.messageBox = function (message) { $.messager.show({ title:'消息框提示', msg:message, sh ...

  8. javascript定时保存表单数据的代码

    (忘记是不是两家邮箱都有这个功能). 那这个功能是怎么做的呢? 定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据.但是,这个却有个缺点:那就是刷新页面后,数据将会丢失. 而此时,就 ...

  9. 表单数据验证方法(二)——ASP.NET后台验证

    昨天写了一下关于如何在前台快捷实现表单数据验证的方法,今天接着昨天的,把后台实现数据验证的方法记录一下.先说明一下哈,我用的是asp.net,所以后台验证方法也是基于.net mvc来做的. 好了,闲 ...

随机推荐

  1. AT5661-[AGC040C]Neither AB nor BA【模型转换】

    正题 题目链接:https://www.luogu.com.cn/problem/AT5661 题目大意 一个包含\(A,B,C\)的序列,每次可以选择相邻的两个除了\(AB\)和\(BA\)的删去. ...

  2. span标签的巧用

    前言: 用struts的标签结合<td>标签将后台数据在表格里渲染了出来,目前需求是需要将两个状态组合在一起显示 解决:通过span标签在td里的套用可以实现 <logic:notE ...

  3. Springboot2.0整合Redis(注解开发)

    一. pom.xm文件引入对应jar包 <dependency> <groupId>org.springframework.boot</groupId> <a ...

  4. cybersploit

    靶机准备 将ova文件导入虚拟机中,设置网络模式为NAT 从靶机描述得知包含3个flag kali扫描其ip netdiscover -r 192.168.164.0/24 渗透测试 namp扫描端口 ...

  5. mybatis plus 一对多,多表联查的使用小记

    阅读本博文需要有基础的mybatis以及mybatis plus知识,如果没有建议您了解相关的内容 本项目使用的是springboot构建的,数据库字段命名不严谨仅做演示测试使用,本文不做相关源码的解 ...

  6. struct结构体大小的计算(内存对齐)

    本次实验环境 环境1:Win10, QT 5.12 一. 背景 当普通的类型无法满足我们的需求的时候,就需要用到结构体了.结构体可衍生出结构体数组,结构体还可以嵌套结构体,这下子数据类型就丰富多彩了, ...

  7. Java编译运行环境讨论(复古但能加深对Java项目的理解)

    Java编译运行环境讨论(复古但能加深对Java项目的理解) 如今我们大多数情况都会使用IDE来进行Java项目的开发,而一个如今众多优秀的IDE已经能够帮助我们自动的部署并调试运行我们的Java程序 ...

  8. C++核心编程 1 程序的内存模型

    1.内存分区模型 C++程序在执行时,将内存大方向划分为4个区域 代码区:存放函数体的二进制代码,由操作系统进行管理(写的所有代码都在代码区) 全局区:存放全局变量.静态变量以及常量 栈   区:由编 ...

  9. OpenSSL version mismatch. Built against 1010104f, you have 101000cf

    现象:公司一台Ubuntu16.04.2的ssh后台无法连接,telnet端口也不通,只能接显示器操作了. 先进行初步排查 查看服务是否启动(公司测试机ssh都是默认启动的) netstat -anp ...

  10. 一文看懂JVM内存区域分布与作用

    那么我们在开始介绍Java内存区域之前,我们先放一张内存区域的图,方便我们后面介绍的时候可以对照着看. 须知,本文是根据JDK8来介绍的. 程序计数器 首先它是线程私有的,它也称为代码的行号指示器,字 ...