vue校验密码的三种写法

一、在el-form（element ui中的form表单）中使用:rules=“rules” 实现

1.在项目的src/utils文件夹下创建validate.js文件

validate.js文件中内容为：

/*** @param value* 测试密码是否满足条件，包括四种类型*/export function validPassword(value) {const num = /^.*[0-9]+.*/const low = /^.*[a-z]+.*/const up = /^.*[A-Z]+.*/const spe = /^.*[^a-zA-Z0-9]+.*/const passLength = value.length > 5 && value.length < 21return num.test(value) && low.test(value) && up.test(value) && spe.test(value) && passLength
}

2.在需要校验密码的vue文件内import引入validate.js中的validPassword函数

import { validPassword } from '@/utils/validate'

3.在需要校验密码的vue文件中的data定义校验函数，调用validPassword 函数

const validatePassword = (rule, value, callback) => {if (validPassword(value)) callback()else callback(new Error('密码6-20位，必须包含大写字母，小写字母，数字及特殊字符'))}

4.在需要校验密码的vue文件中的form表单中写:rules=“rules”

5.在rules中通过validator: validatePassword使用自定义校验规则

password: [{ required: true, trigger: "blur",validator: validatePassword},],

二、使用this.$prompt实现

 /** 重置密码按钮操作 */handleResetPwd(row) {this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {confirmButtonText: "确定",cancelButtonText: "取消",closeOnClickModal: false,inputPattern: /^.*(?=.{6,20})(?=.*\d)(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[!@#$%^&*?\(\)]).*$/,inputErrorMessage: "'密码6-20位，必须包含大写字母，小写字母，数字及特殊字符'",}).then(({ value }) => {resetUserPwd(row.userId, value).then(response => {this.msgSuccess("修改成功，新密码是：" + value);});}).catch(() => {});},

prompt() 弹出个输入框

三、a-input（ant-design-vue）中使用

前两步同一

 <a-inputplaceholder="请输入新密码"type="password"v-decorator="['newPassword', {rules: [{required: true, message: '请输入新密码！'},{validator: validateToNextPassword,},]}]" />

validateToNextPassword (rule, value, callback) {if (validPassword(value)) callback()else callback(new Error('密码8-20位，必须包含大写字母，小写字母，数字及特殊字符'))}

vue校验密码的三种写法相关推荐

vue中template的三种写法
第一种(字符串模板写法):直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. 第二种:直接写在template标签里,这 ...
Vue的props的三种写法
写法一: props:['data','isShow'] 写法二: props:{data: Object,isShow: Boolean } 写法三: props:{data:{require: t ...
vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型
目录在组件中获取数据二.组件中的data为什么必须要是函数? 父组件给子组件传递数据--props属性第一种写法: 第二种写法: 第三种写法: 传默认值 : 父组件传子组件数据--引用类型的两种 ...
vue2.0模板的三种写法
vue2.0中的模板有三种写法,根据不同的需求运用不同的方法来实现 1. <!DOCTYPE html> <html lang="en"> <head ...
CSS伪类的三种写法
今天逛蓝色时,无意发现了有人讨论伪类的正确写法,让我对伪类的认识也更清晰了,转贴于此,以备日后查询(原贴当时没记下地址,已经记不得了) Code <style> a.tb{text-dec ...
Promise的链式调用三种写法，Promise.all与式调用
Promise的链式调用三种写法: // 1,Promise原始链式调用 new Promise((resolve, reject) => {setTimeout(() => {conso ...
android 闪屏页处理_Android应用闪屏页延迟跳转的三种写法
闪屏页也称之为欢迎页.在打开一个App时,我们第一眼看到的往往是一个闪屏页面,之所以叫闪屏页,是因为它出现之后会短暂地停留几秒钟再跳转到其他页面.闪屏页除了使用户体验更好外,还能给app留出初始化数据 ...

vue校验密码的三种写法

一、在el-form（element ui中的form表单）中使用:rules=“rules” 实现

二、使用this.$prompt实现

三、a-input（ant-design-vue）中使用

vue校验密码的三种写法相关推荐

最新文章

热门文章