vue表单验证不起作用,vue3 表单验证,vue实现表单验证功能

vue表单验证不起作用,vue3 表单验证,vue实现表单验证功能

这篇文章主要为大家详细介绍了某视频剪辑软件实现表单验证功能,基于NUXT的使生效方法实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本篇主要讲述如何基于NUXT的使生效方法实现表单的验证。

将验证方法封装后,使用的时候只需像:rules= filter _ rules({ required:true,type:mobile})这么一行代码便可在页面中实现验证了。

首先看一下实现效果

一、新建一个validate.js文件:

该文档中放所需的一些验证规则,下面直接看代码:

/**

*由贾晨攀于16/11/18创作。

**/

导出函数isvalidUsername (str) {

const valid_map=[admin , editor]

返回有效地图。(字符串的索引。trim())=0

}

//非负数

导出函数没有funnumber(str){

常量=/^d。{0,1}d ){0,0}$/

返回注册测试(str)

}

//手机号

导出函数isvalidMobile (str) {

常量=/^1(3|4|5|7|8)d{9}$/

返回注册测试(str)

}

//中文、英文、数字

导出函数正则表达式(字符串){

常量=/^[u4e00-u9fa5_a-za-z0-9]$/

返回注册测试(str)

}

/* 合法uri */

导出函数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 . %$#=~_-] ))*$/

返回urlregex.test(textval)

}

/* 小写字母*/

导出函数validateLowerCase (str) {

const reg=/^[a-z] $/

返回注册测试(str)

}

/* 大写字母*/

导出函数验证大写(字符串){

const reg=/^[A-Z] $/

返回注册测试(str)

}

/* 大小写字母*/

导出函数有效字母(字符串){

const reg=/^[A-Za-z] $/

返回注册测试(str)

}

/**

*验证电子邮件

* @param电子邮件

* @返回{boolean}

*/

二、新建filter_rules.js文件:

该文档放验证的回调函数和验证字段。

附代码:

从" @/utils/validate "导入{ isvalidMobile,regexn,noFuNumber }

导出默认值{

安装(Vue) {

/**

* 注意:定义类型规则时不用做非空验证

* 只需要传入必填:真即可

* */

/* 验证非负数*/

const isnoFuNumber=(规则,值,回调)={

如果(值!=空值!==) {

如果(!noFuNumber(值)){

回调(新错误(请输入非负数的数字!))

}否则{

回调()

}

}否则{

回调()

}

}

/* 验证手机号*/

const isvalidateMobile=(规则,值,回调)={

如果(值!=空值!==) {

如果(!isvalidMobile(value)) {

回调(新错误(请输入正确的手机号码!))

}否则{

回调()

}

}否则{

回调()

}

}

/* 含有非法字符(只能输入中文、英文、数字) */

const isvalidateRegexn=(rule,value,callback)={

如果(值!=空值!==) {

如果(!正则表达式(值)){

回调(新错误(含有非法字符(只能输入中文、英文、数字)!))

}否则{

回调()

}

}否则{

回调()

}

}

/* 请输入正整数*/

//const isvalidateInteger=(rule,value,callback)={

//如果(值!=空值!=) {

//如果(!整数(值)){

//回调(新错误(请输入正整数!))

//}其他{

//回调()

//}

//}

//否则{

//callback();

//}

//}

/**

* 参数项目

*要求为真必填项

* maxLength字符串的最大长度

*最小值和最大必须同时给最小最大类型=数量

*类型手机号可动的

* 邮箱电子邮件

* 网址全球资源定位器(统一资源定位器)

* 各种自定义类型定义在src/utils/验证中持续添加中.

* */

vue。原型。filter _ rules=function(item){

let rules=[]

if (item.required) {

rules.push({必填:真的,消息: 该输入项为必填项!,触发器:模糊 })

}

if (item.maxLength) {

rules.push({ min: 1,max: item.maxLength,message:最多输入 item.maxLength 个字符!,触发器:模糊 })

}

if (item.min item.max) {

rules.push({ min: item.min,max: item.max,message:字符长度在 item.min 至 item.max 之间!,触发器:模糊 })

}

if (item.type) {

let type=item.type

开关(类型){

//case email :

//rules.push({ type: email ,message:请输入正确的邮箱地址,触发器:模糊,改变 })

//break是nofnumber

案例“活动订单”:

规则。push({ validator:isnofnumber,trigger: blur })

破裂

案例"移动":

规则。push({ validator:is validate mobile,trigger: blur })

破裂

案例"名称":

规则。push({ validator:isvalidateRegexn,消息:请输入正确的用户姓名,触发器:模糊 })

破裂

大小写"密码":

规则。push({ validator:isvalidateRegexn,消息:请输入密码,触发器:模糊 })

破裂

案例"组织名称":

规则。push({ validator:isvalidateRegexn,消息:机构名称不能包含特殊字符,触发器:模糊 })

破裂

默认值:

rules.push({})

破裂

}

}

退货规则

}

}

}

三、在页面中引入:

从" @/utils/filter_rules "导入验证

四、在页面中使用验证:

需将验证规则写在埃尔-表单-项目标签内。

需要注意的是:

这三个地方的名称要书写一致。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

vue表单验证不起作用,vue3 表单验证,vue实现表单验证功能