JS通用校验工具
将以下form的校验内容存放到路径中
1 // 是否包含<script>
2 export function checkScript(rule, value, callback) {
3 const reg = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
4 setTimeout(() => {
5 if (reg.test(value)) {
6 callback(new Error('输入内容不能含js脚本！'))
7 } else {
8 callback()
9 }
10 }, 500)
11 }
12 // 是否包含标签
13 export function checkHtml(rule, value, callback) {
14 const reg = /<(.*)\/>/;
15 const regtwo = /<(.*)>.*<\/(.*)>/;
16 setTimeout(() => {
17 if (reg.test(value)) {
18 callback(new Error('输入内容不能含标签！'))
19 } else if (regtwo.test(value)) {
20 callback(new Error('输入内容不能含成对的标签！'))
21 } else {
22 callback()
23 }
24 }, 500)
25 }
26
27 // 是否手机号码（不做非空判断）
28 export function checkPhone(rule, value, callback) {
29 setTimeout(() => {
30 if (!/^1[3456789]\d{9}$/.test(value) && value != '' && value != undefined) {
31 callback(new Error('请输入正确的手机号'))
32 } else {
33 callback()
34 }
35 }, 500)
36 }
37
38 // 特殊字符校验
39 export function specialCharacters(rule, value, callback) {
40 var reg = new RegExp('[\\\\/:*?\"<>|]');
41 if (reg.test(value)) {
42 callback(new Error('名称不能含有特殊字符'))
43 } else {
44 callback()
45 }
46 }
47
48 // 纯数字校验
49 export function validateNumber(rule, value, callback) {
50 let numberReg = /^[0-9]+(.[0-9]{1,4})?$/
51 if (!numberReg.test(value)) {
52 callback(new Error('请输入小数点4位以内的正数'))
53 } else {
54 callback()
55 }
56 }
57
58 // 是否是固话
59 export function validateTelphone(rule, value, callback) {
60 const reg = /0\d{2,3}-\d{7,8}/;
61 if (value == '' || value == undefined || value == null) {
62 callback();
63 } else {
64 if ((!reg.test(value)) && value != '') {
65 callback(new Error('请输入正确的固定电话）'));
66 } else {
67 callback();
68 }
69 }
70 }
71
72 // 是否手机号码或者固话
73 export function validatePhoneTwo(rule, value, callback) {
74 const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
75 if (value == '' || value == undefined || value == null) {
76 callback();
77 } else {
78 if ((!reg.test(value)) && value != '') {
79 callback(new Error('请输入正确的电话号码或者固话号码'));
80 } else {
81 callback();
82 }
83 }
84 }
85
86 //是否合法IP地址
87 export function validateIP(rule, value, callback) {
88 if (value == '' || value == undefined || value == null) {
89 callback();
90 } else {
91 const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
92 if ((!reg.test(value)) && value != '') {
93 callback(new Error('请输入正确的IP地址'));
94 } else {
95 callback();
96 }
97 }
98 }
99
100 // 是否身份证号码
101 export function validateIdNo(rule, value, callback) {
102 const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
103 if (value == '' || value == undefined || value == null) {
104 return callback(new Error('身份证不能为空'))
105 } else {
106 if ((!reg.test(value)) && value != '') {
107 callback(new Error('请输入正确的身份证号码'));
108 } else {
109 callback();
110 }
111 }
112 }
113
114 // 是否邮箱
115 export function validateEMail(rule, value, callback) {
116 const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
117 if (value == '' || value == undefined || value == null) {
118 callback();
119 } else {
120 if (!reg.test(value)) {
121 callback(new Error('请输入正确的邮箱'));
122 } else {
123 callback();
124 }
125 }
126 }
127
128 // 合法url
129 export function validateURL(url) {
130 const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
131 return urlregex.test(url);
132 }
133
134 // 验证内容是否包含英文数字以及下划线
135 export function isPassword(rule, value, callback) {
136 const reg = /^[_a-zA-Z0-9]+$/;
137 if (value == '' || value == undefined || value == null) {
138 callback();
139 } else {
140 if (!reg.test(value)) {
141 callback(new Error('仅由英文字母，数字以及下划线组成'));
142 } else {
143 callback();
144 }
145 }
146 }
147
148 // 自动检验数值的范围
149 export function checkMax20000(rule, value, callback) {
150 if (value == '' || value == undefined || value == null) {
151 callback();
152 } else if (!Number(value)) {
153 callback(new Error('请输入[1,20000]之间的数字'));
154 } else if (value < 1 || value > 20000) {
155 callback(new Error('请输入[1,20000]之间的数字'));
156 } else {
157 callback();
158 }
159 }
160
161 // 验证数字输入框最大数值
162 export function checkMaxVal(rule, value, callback) {
163 if (value < 0 || value > 最大值) {
164 callback(new Error('请输入[0,最大值]之间的数字'));
165 } else {
166 callback();
167 }
168 }
169
170 // 验证是否1-99之间
171 export function isOneToNinetyNine(rule, value, callback) {
172 if (!value) {
173 return callback(new Error('输入不可以为空'));
174 }
175 setTimeout(() => {
176 if (!Number(value)) {
177 callback(new Error('请输入正整数'));
178 } else {
179 const re = /^[1-9][0-9]{0,1}$/;
180 const rsCheck = re.test(value);
181 if (!rsCheck) {
182 callback(new Error('请输入正整数，值为【1,99】'));
183 } else {
184 callback();
185 }
186 }
187 }, 0);
188 }
189
190 // 验证是否整数
191 export function isInteger(rule, value, callback) {
192 if (!value) {
193 return callback(new Error('输入不可以为空'));
194 }
195 setTimeout(() => {
196 if (!Number(value)) {
197 callback(new Error('请输入正整数'));
198 } else {
199 const re = /^[0-9]*[1-9][0-9]*$/;
200 const rsCheck = re.test(value);
201 if (!rsCheck) {
202 callback(new Error('请输入正整数'));
203 } else {
204 callback();
205 }
206 }
207 }, 0);
208 }
209
210 // 验证是否整数,非必填
211 export function isIntegerNotMust(rule, value, callback) {
212 if (!value) {
213 callback();
214 }
215 setTimeout(() => {
216 if (!Number(value)) {
217 callback(new Error('请输入正整数'));
218 } else {
219 const re = /^[0-9]*[1-9][0-9]*$/;
220 const rsCheck = re.test(value);
221 if (!rsCheck) {
222 callback(new Error('请输入正整数'));
223 } else {
224 callback();
225 }
226 }
227 }, 1000);
228 }
229
230 // 验证是否是[0-1]的小数
231 export function isDecimal(rule, value, callback) {
232 if (!value) {
233 return callback(new Error('输入不可以为空'));
234 }
235 setTimeout(() => {
236 if (!Number(value)) {
237 callback(new Error('请输入[0,1]之间的数字'));
238 } else {
239 if (value < 0 || value > 1) {
240 callback(new Error('请输入[0,1]之间的数字'));
241 } else {
242 callback();
243 }
244 }
245 }, 100);
246 }
247
248 // 验证是否是[1-10]的小数,即不可以等于0
249 export function isBtnOneToTen(rule, value, callback) {
250 if (typeof value == 'undefined') {
251 return callback(new Error('输入不可以为空'));
252 }
253 setTimeout(() => {
254 if (!Number(value)) {
255 callback(new Error('请输入正整数，值为[1,10]'));
256 } else {
257 if (!(value == '1' || value == '2' || value == '3' || value == '4' || value == '5' || value == '6' || value == '7' || value == '8' || value == '9' || value == '10')) {
258 callback(new Error('请输入正整数，值为[1,10]'));
259 } else {
260 callback();
261 }
262 }
263 }, 100);
264 }
265
266 // 验证是否是[1-100]的小数,即不可以等于0
267 export function isBtnOneToHundred(rule, value, callback) {
268 if (!value) {
269 return callback(new Error('输入不可以为空'));
270 }
271 setTimeout(() => {
272 if (!Number(value)) {
273 callback(new Error('请输入整数，值为[1,100]'));
274 } else {
275 if (value < 1 || value > 100) {
276 callback(new Error('请输入整数，值为[1,100]'));
277 } else {
278 callback();
279 }
280 }
281 }, 100);
282 }
283
284 // 验证是否是[0-100]的小数
285 export function isBtnZeroToHundred(rule, value, callback) {
286 if (!value) {
287 return callback(new Error('输入不可以为空'));
288 }
289 setTimeout(() => {
290 if (!Number(value)) {
291 callback(new Error('请输入[1,100]之间的数字'));
292 } else {
293 if (value < 0 || value > 100) {
294 callback(new Error('请输入[1,100]之间的数字'));
295 } else {
296 callback();
297 }
298 }
299 }, 100);
300 }
301
302 // 验证端口是否在[0,65535]之间
303 export function isPort(rule, value, callback) {
304 if (!value) {
305 return callback(new Error('输入不可以为空'));
306 }
307 setTimeout(() => {
308 if (value == '' || typeof (value) == undefined) {
309 callback(new Error('请输入端口值'));
310 } else {
311 const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
312 const rsCheck = re.test(value);
313 if (!rsCheck) {
314 callback(new Error('请输入在[0-65535]之间的端口值'));
315 } else {
316 callback();
317 }
318 }
319 }, 100);
320 }
321
322 // 验证端口是否在[0,65535]之间，非必填,isMust表示是否必填
323 export function isCheckPort(rule, value, callback) {
324 if (!value) {
325 callback();
326 }
327 setTimeout(() => {
328 if (value == '' || typeof (value) == undefined) {
329 //callback(new Error('请输入端口值'));
330 } else {
331 const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
332 const rsCheck = re.test(value);
333 if (!rsCheck) {
334 callback(new Error('请输入在[0-65535]之间的端口值'));
335 } else {
336 callback();
337 }
338 }
339 }, 100);
340 }
341
342 // 小写字母
343 export function validateLowerCase(val) {
344 const reg = /^[a-z]+$/;
345 return reg.test(val);
346 }
347
348 // 两位小数验证
349 const validateValidity = (rule, value, callback) => {
350 if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
351 callback(new Error('最多两位小数！！！'));
352 } else {
353 callback();
354 }
355 };
356
357 // 是否大写字母
358 export function validateUpperCase(val) {
359 const reg = /^[A-Z]+$/;
360 return reg.test(val);
361 }
362
363 // 是否大小写字母
364 export function validatAlphabets(val) {
365 const reg = /^[A-Za-z]+$/;
366 return reg.test(val);
367 }
368
369 // 密码校验
370 export const validatePsdReg = (rule, value, callback) => {
371 if (!value) {
372 return callback(new Error('请输入密码'))
373 }
374 if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {
375 callback(new Error('请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种'))
376 } else {
377 callback()
378 }
379 }
380
381 // 中文校验
382 export const validateContacts = (rule, value, callback) => {
383 if (!value) {
384 return callback(new Error('请输入中文'))
385 }
386 if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
387 callback(new Error('不可输入特殊字符'))
388 } else {
389 callback()
390 }
391 }
392
393 // 账号校验
394 export const validateCode = (rule, value, callback) => {
395 if (!value) {
396 return callback(new Error('请输入账号'))
397 }
398 if (!/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/.test(value)) {
399 callback(new Error('账号必须为6-20位字母和数字组合'))
400 } else {
401 callback()
402 }
403 }
404
405 // 最多一位小数
406 const onePoint = (rule, value, callback) => {
407 if (!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value)) {
408 callback(new Error('最多一位小数！！！'));
409 } else {
410 callback();
411 }
412 };
在要校验的js文件中引用。
import { checkScript, checkHtml } from '@/common/validate'
在rule中添加已经引用的规则
rules: {
name: [
{ required: true, message: '计划名称不能为空', trigger: 'blur' },
{ validator: checkScript, trigger: 'blur' },
{ validator: checkHtml, trigger: 'blur' },
{ max: 20, message: '长度在20个字符以内', trigger: 'blur' }
]
}
JS通用校验工具的更多相关文章
- 免费IP代理池定时维护，封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池，并制作简易流量爬虫
前言 我们之前的爬虫都是模拟成浏览器后直接爬取,并没有动态设置IP代理以及UserAgent标识,本文记录免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作 ...
- Manifesto – HTML5 离线应用程序缓存校验工具
Manifesto 是一个 HTML5 离线应用程序缓存校验工具,提供了快速校验 HTML5 manifest 文件有效性的方法.离线应用程序缓存在使用中最困难的部分之一就是无法正常工作的时候没有明显 ...
- Node.js前端自动化工具：gulp
前端自动化工具 -- gulp 使用简介 gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是 ...
- Node.js 命令行工具的编写
日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作.其编写也不难,和日常编写 Node.js 代码并无二致. package.json 中的 bin 字段 一个 npm 模块, ...
- ESLint – 可扩展的 JavaScript & JSX 校验工具
ESLint 是一个开源的 JavaScript 代码校验工具,最初是由 Nicholas C. Zakas 在2013年创建的.经常被用来发现问题的模式或代码,不符合特定的风格准则. ESLint ...
- CSS 和 JS 文件合并工具
写 CSS 和 JavaScript 的时候, 我们会遇到一个两难的局面: 要么将代码写在一个大文件, 要么将代码分成多个文件. 前者导致文件难以管理, 代码复用性差, 后者则因为需要在载入多个文件令 ...
- js 性能基准测试工具-告别可能、也许、大概这样更快更省
平时写js经常遇到这样做是不是更快点?但又没有具体简单可测试的工具,最近也倒序看博客园司徒正美 js分类下的文章 [ps:去年灵光一闪,发现看博客园排名前100的博客.按照文章分类倒序看是学习最快的方 ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
- JS通用事件监听函数
JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...
随机推荐
- 【VBA】模块更新方法
删除模块,重新导入 1 Sub 更新模块() 2 With ThisWorkbook.VBProject 3 .VBComponents.Remove .VBComponents("模块1& ...
- Paxos 图解 (秒懂)
文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...
- SpringBoot代码与jar包分离部署
第一步,打出带有jar包的SpringBoot工程 首先配置pom.xml文件 <build> <finalName>demo</finalName> <pl ...
- .Net Core 3.1简单搭建微服务
学如逆水行舟,不进则退!最近发现微服务真的是大势所趋,停留在公司所用框架里已经严重满足不了未来的项目需要了,所以抽空了解了一下微服务,并进行了代码落地. 虽然项目简单,但过程中确实也学到了不少东西. ...
- 如何在Vue的项目里对element的表单验证进行封装
介绍需求 熟悉并优化公司项目的第五天,领导说能不能把表单验证封装一下,我打开代码一看 由于是后台管理系统,无数个需要验证的输入框,由于截图长度受限,只能展示部分,类似于这种页面还有无数个!代码重复率非 ...
- 详解C++中继承的基本内容
有些类与类之间存在特殊的关系,有共性也有特性,比如动物类可以细分为猫,狗等.下级别的成员除了拥有上一级的共性,还有自己的特性,这个时候就可以考虑继承的技术,减少重复代码. 一.继承中的对象模型 1.1 ...
- hdu 4686 Arc of Dream 自己推 矩阵快速幂
A.mat[0][0] = 1, A.mat[0][1] = 1, A.mat[0][2] = 0, A.mat[0][3] = 0, A.mat[0][4] = 0; A.mat[1][0] = 0 ...
- Redis中的布隆过滤器及其应用
什么是布隆过滤器 布隆过滤器(Bloom Filter)是由Howard Bloom在1970年提出的一种比较巧妙的概率型数据结构,它可以告诉你某种东西一定不存在或者可能存在.当布隆过滤器说,某种东西 ...
- buu 达芬奇 && ROT
一.达芬奇 百度了下电影简介,发现了斐波那契数列,同时发现密文是由斐波那契数列移动而来的,有点像base64变种 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 ...
- vue（16）vue-cli创建项目以及项目结构解析
vue-cli创建项目 上一篇我们安装了vue-cli,接下来我们就使用该脚手架进行创建项目 1.进入一个目录,创建项目 创建项目命令如下: vue create <Project Name&g ...