最新在做一套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>