Vue+Element-UI rules実装フォーム検証(インスタンス)

記事のナビゲーション

カスタムチェックルールjs

フォームページにチェックルールを導入し、rulse=「rules」バインド

を使用します.
検証ルールjsをカスタマイズ
validator.js

//    
export var reg_email = (rule, value, callback) => {
  const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
  if (!value) {
    callback(new Error('     '));
  } else {
    let check = reg.test(value);
    if (!check) {
      callback(new Error('      '))
    }else{
      return true,
      callback()
    }
  }
}
//    
export var reg_password = (rule, value, callback) => {
  const reg = /^(?![a-zA-Z]+$)(?![0-9]+$)[A-Za-z0-9]{8,18}$/;
  if(!value){
    callback(new Error('     '));
  }else{
    let check = reg.test(value);
    if (!check) {
      callback(new Error('      '))
    }else{
      callback()
    }
  }
}

フォームページに検証ルールを導入し、rulse=「rules」バインドを使用します.
1)必要な検証ルールのインポート

import {
    reg_email,
    reg_password
  } from '../../js/validator.js'

2):rules="rules"を使用してrulesオブジェクトをバインドする

<el-form label-position="right" :model="loginForm" :rules="rules" ref="loginForm" label-width="0px">...</el-form>

3)検証が必要なフォーム項目にprop属性を追加する

<el-form-item prop="userAccount">
    <el-input v-model="loginForm.userAccount" placeholder="     " prefix-icon="fa fa-user-circle-o" clearable/>
</el-form-item>

4)rulesでの検証の構成

rules: {
    userAccount: [{
        required: true,
        validator: reg_email,
        trigger: 'blur',
    }]
    ...
}

5)methodsで検査結果を判断する

this.$refs.loginForm.validate()
    .then(res => {...}) //      
    .catch(error => {...}) //       

次はloginです.vue完全コードlogin.vue

<template>
  <div class="div-login">
    <el-form label-position="right" :model="loginForm" :rules="rules" ref="loginForm" label-width="0px">
      <el-form-item class="form-item-title">
        <span class="span-title">    </span>
      </el-form-item>
      <el-form-item prop="userAccount">
        <el-input v-model="loginForm.userAccount" placeholder="     " prefix-icon="fa fa-user-circle-o" clearable/>
      </el-form-item>
      <el-form-item prop="userPassword">
        <el-input v-model="loginForm.userPassword" placeholder="     " prefix-icon="fa fa-lock" show-password/>
      </el-form-item>
        <el-button type="primary" @click="submitLogin" :loading="loadingBtn">   </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    reg_email,
    reg_password
  } from '../../js/validator.js'

  export default {
    name: "Login",
    data() {
      return {
        loadingBtn: false,
        rules: {
          userAccount: [{
            required: true,
            validator: reg_email,
            trigger: 'blur',
          }],
          userPassword: [{
            required: true,
            validator: reg_password,
            trigger: 'blur'
          }]
        },
        loginForm: {
          userAccount: '',
          userPassword: ''
        }
      }
    },
    mounted() {
      var that = this;
    },
    methods: {
      submitLogin() {
          this.loadingBtn = true;
          this.$refs.loginForm.validate() //          ，      .then()，    .catch()
            .then(res => {
              if (this.loginForm.userAccount == '[email protected]' && this.loginForm.userPassword == 'abcd1998') {
                setTimeout(() => {
                  this.$message({
                    type: 'success',
                    message: '    '
                  });
                  this.loadingBtn = false;
                }, 500);
              } else {
                setTimeout(() => {
                  this.$message({
                    type: 'error',
                    message: '    '
                  });
                  this.loadingBtn = false;
                }, 500);
              }
            })
            .catch(error => {
              setTimeout(() => {
                this.$message({
                  type: 'error',
                  message: '    '
                });
                this.loadingBtn = false;
              }, 500);
            })
        }
      }

    },
    watch: {
      'verifyCode': function() {
        this.isVerifyCode = this.GVerifyCode.validate(this.verifyCode);
        console.log(this.isVerifyCode)
      },
    }
  }
</script>
<style>
</style>