最新在做一套OA系统,UI使用elementUI做的,有个需求,在做员工生日提醒的时候,录入个人信息,以及个人更新资料的时候,生日需要保持和身份证上的生日保持一致。
思路:确认密码验证的思路来验证就可以了。
具体代码:
<template> <div class="hello"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="password"> <el-input v-model="ruleForm.password"></el-input> </el-form-item> <el-form-item label="重复密码" prop="repassword"> <el-input v-model="ruleForm.repassword"></el-input> </el-form-item> <el-form-item label="身份证" prop="idcard"> <el-input v-model="ruleForm.idcard"></el-input> </el-form-item> <el-form-item label="生日" prop="birthday"> <el-input v-model="ruleForm.birthday"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { var repasswordValidator = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.ruleForm.password) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; var birthdayValidator = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入生日')); } else if (this.ruleForm.idcard.indexOf(value) == -1) { callback(new Error('生日和身份证生日不一致!')); } else { callback(); } }; return { ruleForm: { password: '123', repassword: '123', idcard: '202541199309010875', birthday: '', }, rules: { password: [ { required: true, message: '请输入密码', trigger: 'blur' }, ], repassword: [ { required: true, message: '请输入确认密码', trigger: 'blur' }, { validator: repasswordValidator,trigger: 'blur' }, ], idcard: [ { required: true, message: '请输入身份证', trigger: 'change' } ], birthday: [ { required: true, message: '请输入生日', trigger: 'blur' }, { validator: birthdayValidator,trigger: 'blur' }, ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。