实现效果
实现
<div class="registerWarp"><el-formlabel-position="top"label-width="100px":model="form"ref="ruleFormRef":rules="rulesForm"hide-required-asteriskclass="register-form"><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" placeholder="电子邮箱" /></el-form-item><el-form-item label="密码" prop="pwd"><el-inputv-model="form.pwd"type="password"show-passwordplaceholder="登录密码"/></el-form-item><el-form-item><template #label><div class="item-label"><span>填写邀请ID（选填）</span><img:class="{ active: isIdShow }"@click="isIdShow = !isIdShow"src="@/assets/images/register/right-jian.svg"/></div></template><el-inputv-show="isIdShow"v-model="form.idkey"placeholder="填写邀请用户ID"/></el-form-item><el-form-item><div class="form-bottom"><div class="promise">点击注册即表示同意<span>服务协议</span>和<span>隐私条款</span></div><div class="submit-btn">注册</div><div class="switch-login">已有账户？<span>去登录</span></div></div></el-form-item></el-form></div>一起校验
<script setup>
import { ref, reactive } from 'vue';
const isIdShow = ref(false);
const ruleFormRef = ref(null);
const form = reactive({email: '',pwd: '',idkey: ''
});
const validatePwd = (rule, value, callback) => {if (!value) {callback(new Error('请输入密码'));}callback();
};
const rulesForm = reactive({email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ type: 'email', message: '邮箱输入格式错误', trigger: 'blur' }],pwd: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 24, message: '密码长度为6-24个字符', trigger: 'blur' },{pattern:/^(?=.*[A-Z])(?=.*\d)(?=.*[~`!@#$%^&*()_\-\+={}0|;;<>.?/])[A-Za-z\d~`!@#$%^&*()_\-\+={}0|;;<>.?/]*$/,message: '密码必须包含至少一个大写字母、一个数字、一个特殊字符',trigger: 'blur'}
//自定义校验规则// {required: true, message: '请输入密码', trigger: 'blur',validator: validatePwd}]
});
</script>我们使用
el-form组件创建了一个表单，其中的密码输入框使用了el-input组件，并设置了type属性为"password"。然后，在
formRules中定义了验证规则，包括required: true表示必填项，min: 6, max: 24表示密码长度为6-24个字符，pattern使用正则表达式来校验密码是否包含至少一个大写字母、一个数字、一个特殊字符。最后，在提交表单时，通过调用
this.$refs.form.validate方法进行表单校验，如果校验通过，则执行提交逻辑；如果校验不通过，则会自动显示相应的错误提示信息。
分开校验
<script setup>
import { ref, reactive } from 'vue';
import NormalHeader from '@/components/NormalHeader/index.vue';
const isIdShow = ref(false);
const ruleFormRef = ref(null);
const form = reactive({email: '',pwd: '',idkey: ''
});
const validateUppercase = (rule, value, callback) => {if (!/[A-Z]/.test(value)) {callback(new Error('密码必须包含至少一个大写字母'));} else {callback();}
};
const validateNumber = (rule, value, callback) => {if (!/\d/.test(value)) {callback(new Error('密码必须包含至少一个数字'));} else {callback();}
};
const validateSpecialCharacter = (rule, value, callback) => {if (!/[~`!@#$%^&*()_\-+={}0|;;<>.?/]/.test(value)) {callback(new Error('密码必须包含至少一个特殊字符'));} else {callback();}
};
const rulesForm = reactive({email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ type: 'email', message: '邮箱输入格式错误', trigger: 'blur' }],pwd: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 24, message: '密码长度为6-24个字符', trigger: 'blur' },{ validator: validateUppercase, trigger: 'blur' },{ validator: validateNumber, trigger: 'blur' },{ validator: validateSpecialCharacter, trigger: 'blur' }// {// pattern:// /^(?=.*[A-Z])(?=.*\d)(?=.*[~`!@#$%^&*()_\-\+={}0|;;<>.?/])[A-Za-z\d~`!@#$%^&*()_\-\+={}0|;;<>.?/]*$/,// message: '密码必须包含至少一个大写字母、一个数字、一个特殊字符',// trigger: 'blur'// }]
});
</script>在上述示例中，我们将每个密码条件分别定义为单独的校验规则。使用
validator属性来指定自定义的校验方法，其中validateUppercase方法用于校验是否包含至少一个大写字母，validateNumber方法用于校验是否包含至少一个数字，validateSpecialCharacter方法用于校验是否包含至少一个特殊字符。在校验方法中，如果条件不满足，我们调用
callback函数传递一个错误对象，否则调用callback函数传递空参数表示校验通过。最后，在提交表单时，通过调用
this.$refs.form.validate方法进行表单校验，依次触发每个校验规则。
实现效果
