你好!这是一个示例代码,用于在 Element UI 中使用密码表单验证必须为大小写字母、数字和 @ 符号。
<template>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" autocomplete="off"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
password: ''
},
rules: {
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@])[\w@]{8,}$/, message: '密码必须包含大小写字母、数字和 @ 符号', trigger: 'blur' }
]
}
}
}
}
</script>
在这个示例代码中,我们使用了 Element UI 的 el-form
、el-form-item
和 el-input
组件。el-form
组件用于包装表单元素,el-form-item
组件用于包装单个表单项,el-input
组件用于创建单行文本输入框。
在模板中,我们使用了 el-input
组件的 type
属性来设置输入框为密码输入框,并使用 v-model
指令绑定到表单模型中的 password
字段。
在脚本部分中,我们在 rules
对象中设置了密码字段的验证规则。我们使用了 pattern
规则来匹配密码中必须包含大小写