zoukankan      html  css  js  c++  java
  • 自定义表单验证方法的使用

    自定义表单验证方法

    1. 自定义表单验证方法适合于简单的验证:
    passwordAgain: {
      validator: (rule, value, callback) => {
        console.log(value)
        if (value === "" || value === undefined || value === null) {
          callback(new Error(" "));
        } else if (this.emailForm.password != "" && value == "") {
          callback(new Error(" "));
        } else if (
          this.emailForm.password != "" &&
          value !== this.emailForm.password
        ) {
          callback(new Error(this.$t("validate.passwordMatch")));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
    
    1. 也可以引入外部的函数来验证
    /**
     *  验证手机号
     * @param value
     * @returns {boolean}
     */
    export function validateTelephone(value) {
        if (value === undefined || value == null || value === '') return true
        return /^((13[0-9])|(14[5,7,9])|(15([0-3]|[5-9]))|(166)|(17[0,1,3,5,6,7,8])|(18[0-9])|(19[8|9]))d{8}$/.test(
            value
        )
    }
    
    import {validateTelephone} from "~/utils/validate" 
    
    
    telephone:{
      validator: async (rule, value, callback) => {
        if (value === "" || value === undefined || value === null) {
          callback(new Error(" "));
        } else if (this.basicInfoForm.areaCode == "+86" &&
            !validateTelephone(this.basicInfoForm.telephone)) {
          callback(new Error(" "));
        } else {
          try {
            let result = await this.$store.dispatch(
              "API_user/user_checkIdentifier",
              { identifier: value, type: 2 }
            );
            if (result.success) {
              callback();
            } else {
              if (result.errorcode == 1000) {
                this.emailCetshow = true;
              }
              callback(new Error(" "));
            }
          } catch (e) {
            callback(new Error(" "));
            this.$seTip();
          }
        }
      },
      trigger: "blur"
    }
    
  • 相关阅读:
    解决ios下的微信页面背景音乐无法自动播放问题
    vue Vue-cli 笔记
    document.documentElement和document.body区别介绍
    GD库使用小结---2
    GD库使用小结---1
    踩到两只“bug”
    CI加载流程小结
    文件加载---理解一个project的第一步
    缓存的使用
    小小的分页
  • 原文地址:https://www.cnblogs.com/my466879168/p/13129172.html
Copyright © 2011-2022 走看看