zoukankan      html  css  js  c++  java
  • elementui---验证重复密码以及生日和身份证号一致

    最新在做一套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>
  • 相关阅读:
    scala之伴生对象的继承
    scala之伴生对象说明
    “Failed to install the following Android SDK packages as some licences have not been accepted” 错误
    PATH 环境变量重复问题解决
    Ubuntu 18.04 配置java环境
    JDBC的基本使用2
    DCL的基本语法(授权)
    ZJNU 1374
    ZJNU 2184
    ZJNU 1334
  • 原文地址:https://www.cnblogs.com/e0yu/p/14888196.html
Copyright © 2011-2022 走看看