vue表单验证不起作用,vue3 表单验证
这篇文章主要为大家详细介绍了某视频剪辑软件实现表单验证功能，基于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(34578)\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 "导入验证
四、在页面中使用验证：
需将验证规则写在埃尔-表单-项目标签内。
需要注意的是：
这三个地方的名称要书写一致。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。