vue实现表单验证功能
作者:Eva_伊娃 发布时间:2024-06-05 10:03:59
标签:vue,表单验证
本篇主要讲述如何基于NUXT的validate方法实现表单的验证。
将验证方法封装后,使用的时候只需像:rules="filter_rules({required:true,type:'mobile'})"这么一行代码便可在页面中实现验证了。
首先看一下实现效果
一、新建一个validate.js文件:
该文档中放所需的一些验证规则,下面直接看代码:
/**
* Created by jiachenpan on 16/11/18.
**/
export function isvalidUsername (str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
}
// 非负数
export function noFuNumber (str) {
const reg = /^\d+(\.{0,1}\d+){0,0}$/
return reg.test(str)
}
// 手机号
export function isvalidMobile (str) {
const reg = /^1(3|4|5|7|8)\d{9}$/
return reg.test(str)
}
// 中文、英文、数字
export function regexn (str) {
const reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/
return reg.test(str)
}
/* 合法uri */
export function validateURL (textval) {
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.,?'\\+&%$#=~_-]+))*$/
return urlregex.test(textval)
}
/* 小写字母 */
export function validateLowerCase (str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/* 大写字母 */
export function validateUpperCase (str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/* 大小写字母 */
export function validateAlphabets (str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
/**
* validate email
* @param email
* @returns {boolean}
*/
二、新建filter_rules.js文件:
该文档放验证的回调函数和验证字段。
附代码:
import { isvalidMobile, regexn, noFuNumber } from '@/utils/validate'
export default {
install (Vue) {
/**
* 注意: 定义type 规则时 不用做非空验证
* 只需要传入 required:true 即可
* */
/* 验证非负数 */
const isnoFuNumber = (rule, value, callback) => {
if (value != null && value !== '') {
if (!noFuNumber(value)) {
callback(new Error('请输入非负数的数字!'))
} else {
callback()
}
} else {
callback()
}
}
/* 验证手机号 */
const isvalidateMobile = (rule, value, callback) => {
if (value != null && value !== '') {
if (!isvalidMobile(value)) {
callback(new Error('请输入正确的手机号码!'))
} else {
callback()
}
} else {
callback()
}
}
/* 含有非法字符(只能输入中文、英文、数字) */
const isvalidateRegexn = (rule, value, callback) => {
if (value != null && value !== '') {
if (!regexn(value)) {
callback(new Error('含有非法字符(只能输入中文、英文、数字)!'))
} else {
callback()
}
} else {
callback()
}
}
/* 请输入正整数 */
// const isvalidateInteger= (rule, value, callback) => {
// if (value != null && value != "") {
// if (!integer(value)) {
// callback(new Error('请输入正整数!'))
// } else {
// callback()
// }
// }
// else {
// callback();
// }
// }
/**
* 参数 item
* required true 必填项
* maxLength 字符串的最大长度
* min 和 max 必须同时给 min < max type=number
* type 手机号 mobile
* 邮箱 email
* 网址 url
* 各种自定义类型 定义在 src/utils/validate 中 持续添加中.......
* */
Vue.prototype.filter_rules = function (item) {
let rules = []
if (item.required) {
rules.push({ required: true, message: '该输入项为必填项!', trigger: 'blur' })
}
if (item.maxLength) {
rules.push({ min: 1, max: item.maxLength, message: '最多输入' + item.maxLength + '个字符!', trigger: 'blur' })
}
if (item.min && item.max) {
rules.push({ min: item.min, max: item.max, message: '字符长度在' + item.min + '至' + item.max + '之间!', trigger: 'blur' })
}
if (item.type) {
let type = item.type
switch (type) {
// case 'email':
// rules.push({ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' })
// break isnoFuNumber
case 'activeOrder':
rules.push({ validator: isnoFuNumber, trigger: 'blur' })
break
case 'mobile':
rules.push({ validator: isvalidateMobile, trigger: 'blur' })
break
case 'name':
rules.push({ validator: isvalidateRegexn, message: '请输入正确的用户姓名', trigger: 'blur' })
break
case 'password':
rules.push({ validator: isvalidateRegexn, message: '请输入密码', trigger: 'blur' })
break
case 'org_name':
rules.push({ validator: isvalidateRegexn, message: '机构名称不能包含特殊字符', trigger: 'blur' })
break
default:
rules.push({})
break
}
}
return rules
}
}
}
三、在页面中引入:
import Validate from '@/utils/filter_rules'
四、在页面中使用验证:
需将验证规则写在el-form-item标签内。
需要注意的是:
这三个地方的名称要书写一致。
来源:https://blog.csdn.net/u014445517/article/details/96475744
0
投稿
猜你喜欢
- 本文作者在和同事的一次讨论中发现,对 IntelliJ IDEA 内存采用不同的设置方案,会对 IDE 的速度和响应能力产生不同的影响。Do
- 前言:牛奶冻曲线(blancmange curve),因在1901年由高木贞治所研究,又称高木曲线。在单位区间内,牛奶冻函数定义为:分形曲线
- easy_install 和 pip的介绍:easy_install和pip都是用来下载安装Python一个公共资源库PyPI 的相关资源包
- 本文作者系程序猿Daniel F Pupius,这是一篇他发表在Medium上的博文,讲述自己怎么在实际写代码的过程中,发现在效率和质量间做
- 前文复习:openCV第一篇openCV第二篇一、Canny边缘检测该边缘检测法步骤如下:使用高斯滤波器,以平滑图像,滤除噪声。计算图像中每
- 在处理数据的时候经常需要读取TXT文件类型的数据转换为可执行的list,但是当我们有Excel的文件,如何将Excel文件转换为每行固定长度
- 慢查询日志概念MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应时间超过阀值的语句,具体指运行时间超过lon
- StringIO它主要是用在内存读写str中。主要用法就是:from io import StringIOf = StringIO()f.w
- 使用ASP生成图片彩色校验码49行代码,三个文件 Asp文件:Co
- 感觉这个东西很常用,很多其它js框架里有,但是太大了,用不了太多,自己写了个。需要的朋友可以参考下。下面是html测试代码:<!DOC
- OpenCV介绍OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux、Windows、Android和Ma
- 如何把imagenet预训练的模型,输入层的通道数随心所欲的修改,从而来适应自己的任务#增加一个通道w = layers[0].weight
- vue3 表单验证前言表单验证可以有效的过滤不合格的数据,减少服务器的开销,并提升用户的使用体验。今天我们使用 vue3 来做一个表单验证的
- 本地使用Navicat连接 错误描述2013-Lost connection to MySQL server at ‘reading ini
- 简介这个模块处理python中常见类型数据和Python bytes之间转换。这可用于处理存储在文件或网络连接中的bytes数据以及其他来源
- 随机数和蒙特卡洛模拟求解单一变量非线性方程求解线性系统方程函数的数学积分常微分方程的数值解等势线绘图和曲线:等势线 import
- “用户体验”作为舶来品在国内风靡已经有几个年头了,而且从目前情况来看仍旧会继续风靡一段时间。当某产品发布会上,发言人张口闭口就
- 一、项目需求爬取排行榜小说的作者,书名,分类以及完结或连载二、项目分析目标url:“https://www.qidian.com/rank/
- 这篇文章主要介绍了python线程join方法原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋
- Python 中的 timeit 模块可以用来测试一段代码的执行耗时,如一个变量赋值语句的执行时间,一个函数的运行时间等。timeit 模块