<el-form-item prop="password"
label="登录密码">
<el-col :span="23">
<span style="display: flex;justify-content: space-between;">
<el-input v-model="dataForm.password"
placeholder="请输入">
<!-- @input="validatePassword" -->
</el-input>
<el-button @click="generateAndFillPassword"
size="small">随机密码</el-button>
</span>
<p v-if="errorMessage">{{ errorMessage }}</p>
</el-col>
</el-form-item>
<script>
export default {
data () {
let passwords = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'))
} else if (value.length < 6 || value.length > 16) {
callback(new Error('请输入6-16位,包括大写字母,小写字母,数字,特殊字符'))
} else {
// let pPattern = /^.*(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).{6,16}/
let pPattern = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()`\-_=+{};:,<.>]).{6,16}$/
// let order = 0 // 顺序
console.log(pPattern.test(value), 99)
if (pPattern.test(value)) {
callback()
} else {
callback(new Error('请输入6-16位,包括大写字母,小写字母,数字,特殊字符'))
}
}
}
return {
dataForm: {
password: '' // 登录密码
},
errorMessage: '',
passwordLength: 6,
dataRule: {
password: [
{ required: true, validator: passwords, trigger: 'change' }
],
}
}
},
methods: {
// 在 Input 值改变时触发验证
validatePassword () {
// Password validation regex
// (?=.*[a-zA-Z]) 表示要有小写与大写字母
// (?=.*\d) 表示要有数字
const regex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*`()\-_=+{};:,<.>]).{6,16}$/
// console.log()
if (this.dataForm.password.length < 6 || this.dataForm.password.length > 16) {
// console.log('密码必须介于6到8个字符之间')
this.errorMessage = '密码必须介于6到16个字符之间'
// this.errorMessage = 'Password must be between 6 and 8 characters.'
return
}
console.log(regex.test, 'test', regex.test(this.dataForm.password), '!www', !regex.test(this.dataForm.password))
if (!regex.test(this.dataForm.password)) {
this.errorMessage = '密码必须至少包含一个字母、一个数字和一个特殊字符。'
// this.errorMessage = 'Password must contain at least one letter, one number, and one special character.'
// console.log('密码必须至少包含一个字母、一个数字和一个特殊字符。')
return
}
// Reset error message
this.errorMessage = ''
},
// 随机密码
generateAndFillPassword () {
this.dataForm.password = this.generateRandomPassword(this.passwordLength)
},
generateRandomPassword (length) {
// const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]}:;?><,./-='
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&`*()-_=+{};:,<.>'
let password = ''
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * chars.length)
password += chars[randomIndex]
}
return password
},
}
vue2+element-ui可进行输入或者点击随机密码生成,密码格式:字母+数字+特殊符号,限制6位以上。
最新推荐文章于 2024-06-27 16:33:24 发布