注册页面提交验证-密保问题实现

实现页面

需求

HTML

  <div class="register-form">
      <el-form ref="regForm" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm" @submit.native.prevent>
        <el-form-item prop="account" label="用户名:">
          <el-input v-model="form.account" type="text" placeholder="不超过15个字符">
          </el-input>
        </el-form-item>
        <el-form-item prop="pwd" label ="密码:">
          <el-input v-model="form.pwd" type="password" placeholder="6-16位大小写字母+数字组合" auto-complete="off" >
          </el-input>
        </el-form-item>
        <el-form-item prop="confirmPass" label ="确认密码:">
          <el-input v-model="form.confirmPass" placeholder="重复密码" type="password">
          </el-input>
        </el-form-item>
        <el-form-item prop="security1"  label="密保问题一:">
          <el-select v-model="form.security1" class="wid">
            <el-option label="你父亲的姓名" value="1"></el-option>
            <el-option label="你母亲的姓名" value="2"></el-option>
            <el-option label="你的高中学校" value="3"></el-option>
            <el-option label="你的大学学校" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="answer1" label="答案:">
          <el-input v-model="form.answer1" type="text" placeholder="不超过10个字符">
          </el-input>
        </el-form-item>
        <el-form-item prop="security2"  label="密保问题二:">
          <el-select v-model="form.security2" class="wid">
            <el-option label="你父亲的姓名" value="1"></el-option>
            <el-option label="你母亲的姓名" value="2"></el-option>
            <el-option label="你的高中学校" value="3"></el-option>
            <el-option label="你的大学学校" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="answer2" label="答案:">
          <el-input v-model="form.answer2" type="text" placeholder="不超过10个字符">
          </el-input>
        </el-form-item>
        <el-form-item prop="security3"  label="密保问题三:">
          <el-select v-model="form.security3" class="wid">
            <el-option label="你父亲的姓名" value="1"></el-option>
            <el-option label="你母亲的姓名" value="2"></el-option>
            <el-option label="你的高中学校" value="3"></el-option>
            <el-option label="你的大学学校" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="answer3" label="答案:">
          <el-input v-model="form.answer3" type="text" placeholder="不超过10个字符">
          </el-input>
        </el-form-item>
        <el-form-item style="width:100%;margin-bottom:0">
          <el-button :loading="loading" type="primary" style="width:100%;background: #00aaff" @click.native.prevent="submit">
            <span v-if="!loading">提交注册</span>
            <span v-else>注册中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>

js

  export default {
    name: "Register",
    data(){
      let validateAccount = (rules,value,callback) =>{
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error('账户名称不能输入汉字!'));
        } else if (/^[0-9]+$/g.test(value)) {
          callback(new Error('账户名称不能输入纯数字!'));
        } else {
          callback();
        }

      }
      let validateConfirmPass = (rule, value, callback) => {
        if (value !== this.form.pwd) {
          callback(new Error('两次输入密码不一致,请重新输入'));
        } else {
          callback();
        }
      };
      return {
        imageUrl:"",
        loading:false,
        fileData:null,
        form:{
          account:"",
          pwd:"",
          confirmPass:"",
          security1:"1",
          security2:"3",
          security3:"4",
          answer1:"",
          answer2:"",
          answer3:""
        },
        rules:{
          account:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 1, max: 15, message: '用户名不超过15个字符,请重新输入',trigger: "blur" },
            { validator: validateAccount, trigger: 'blur' }
            ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 16, message: '长度在6-16位之间',trigger: "blur" },
            {pattern: new RegExp("^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,16}$") , message: '密码为6-16位大小写字母+数字组合，请重新输入',trigger: "blur" }
          ],
          confirmPass: [
            { required: true, message: '请输入确认密码', trigger: 'blur' },
            { validator: validateConfirmPass, trigger: 'blur' },
            { min: 6, max: 16, message: '长度在6-16位之间',trigger: "blur" },
            {pattern: new RegExp("^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,16}$") , message: '密码为6-16位大小写字母+数字组合，请重新输入',trigger: "blur" }
          ],
          security1:[
            { required: true, message: '请选择密保问题一', trigger: 'change' }
          ],
           security2:[
            { required: true, message: '请选择密保问题二', trigger: 'change' }
          ],
           security3:[
            { required: true, message: '请选择密保问题三', trigger: 'change' }
          ],
          answer1:[
            { required: true, message: '请输入答案', trigger: 'blur' },
            { min: 1, max: 10, message: '答案不可超过10个字符，请重新输入',trigger: "blur" },
          ],
           answer2:[
            { required: true, message: '请输入答案', trigger: 'blur' },
            { min: 1, max: 10, message: '答案不可超过10个字符，请重新输入',trigger: "blur" },
          ],
           answer3:[
            { required: true, message: '请输入答案', trigger: 'blur' },
            { min: 1, max: 10, message: '答案不可超过10个字符，请重新输入',trigger: "blur" },
          ]
        }
      }
    },
    methods:{
      submit() {
        this.$refs.regForm.validate(valid => {
          if (valid) {
            if (this.form.security1 === this.form.security2 || this.form.security1 === this.form.security3 ||  this.form.security2===this.form.security3) {
               this.$message({
                      message:'密保问题不可重复，请重新选择',
                      type: 'error'
                    });
            }
            //姓名唯一性验证
            uniqueValidationName({account:this.form.account}).then(res=>{
              if(res.obj){
                let params = {
                  ...this.form,file:this.fileData.raw
                }
                delete params.confirmPass
                register({...params}).then(res=>{
                  if(res.code == 200){
                    this.$message({
                      message:"注册成功，请登录。",
                      type: 'success'
                    });
                    this.$router.push({ path: '/login' });
                  }else{
                    this.$message({
                      message:res.message,
                      type: 'warning'
                    });
                  }
                })
              }else{
                this.$message({
                  message: res.message,
                  type: 'warning'
                });
              }
            })
          }
        })
      },
    }
  }