How to use Element form validation in vue

This article mainly introduces how to use Element form verification in vue. It has certain reference value. Now I share it with you. Friends in need can refer to it

Element form verification (2)

The previous article talked about the basic elements of async-validator. So, how to use it in Element and how to use it elegantly is in this article.

As mentioned in the previous articleasync-validator consists of 3 major parts

• Options

• Validate

• ##Rules

The basic verification process is as follows

• First follow the rules of the rule, formulate the specifications of each field, and generate rules

• Generate a validator based on the rules

  const validator = new Validator( rules)

• The validator has a verification function

  validator.validate(source, callback)

• source The fields correspond to the fields in the rules, and callback is called after all pass or error

validator.validate above corresponds to this.$refs in Element [refName].validate, just modified. Moreover, :model='form' defined in Element is 62fc52efcba6176fb61d86a6f2591ed5, and that form is source. The field name of source, such as source.name is form.name, then as long as 5c42ba5dfee284cf88c42b87cb32f678Set the same field name name as source to match b3f67149bbb9f5e6d157a8b259a4962d rules.name.

It is very important that

rules.Field name must be the same as source.Field name for verification.

<template>
  <el-form :model=&#39;form&#39; ref=&#39;domForm&#39; :rules=&#39;rules&#39;>
    <el-form-item prop=&#39;name&#39; lable=&#39;名字&#39;>
      <el-input v-model=&#39;form.name&#39;>
    </el-form-item>
  </el-form>
</template>

export default {
  data() {
    this.rules = {
      name: { type: 'string', required: true, trigger: 'blur' }
    }

    return {
      form: {
        name: ''
      }
    }
  },
  methods: {
    submit() {
      this.$refs.domForm.validate(valid => {
        if (!valid) {
          // 验证不通过
        }

        // 验证通过后的处理...
      })
    }
  }
}

The above

validate(callback) function has been added to the attribute on the DOM node of the form element. Then there is a bad point above. That is the way the rules are defined is not flexible enough.

For example, I have two fields

firstName and lastName. firstName is required, while lastName is optional; and the length of firstName is required to be greater than 1 and less than 4, while the length of lastName is required to be greater than 1 Less than 6. Then we need to write two different rules. Now it’s just 2 fields, nothing. If there are many fields with different requirements, then we need to write many different rules and many rules? Isn't it annoying? Can it be reused?

Rules three definition methods

• Function method:

  { name(rule, value, callback, source, options) { } }

• Object method:

  { name: { type: 'string', required: true } }

• Array method:

  { name: [{ type: 'string' }, { required: true }] }

Function method is very powerful , if you need to use

options, you can use functions. The most commonly used methods are objects and arrays. Several reuse methods are now recommended.

Simple encapsulation of some commonly used rules

// 返回一个规则数组，必填且字符串长度在2~10之间
export const name = (msg, min = 2, max = 10, required = true) => ([
  { required, message: msg, trigger: 'blur' },
  { min, max, message: `长度在${min}~${max}个字符`, trigger: 'blur' }
])

// 邮箱
export const email = (required = true) => ([
  { required, message: '请输入邮箱', trigger: 'blur' },
  { type: 'email', message: '邮箱格式不对', trigger: 'blur' }
])

/* 自定义验证规则 */

// 大于等于某个整数
const biggerAndNum = num => (rule, v, cb) => {
  const isInt = /^[0-9]+$/.test(v)
  if (!isInt) {
    return cb(new Error('要求为正整数'))
  }

  if (v < num) {
    return cb(new Error(`要求大于等于${num}`))
  }
  return cb()
}

export const biggerInt = (int, required = true) => ([
  { required, message: &#39;必填&#39;, trigger: &#39;blur&#39; },
  { validator: biggerAndNum(int), trigger: &#39;blur&#39; }
])

Encapsulation of a class specifically created for rules, chain call

export default class CreateRules {
  constructor() {
    super()
    this.rules = []
  }

  need(msg = '必填', trigger = 'blur') {
    this.rules.push({
      required: true,
      message: msg,
      trigger
    })
    return this
  }
  
  url(message = '不是合法的链接', trigger = 'blur') {
    this.rules.push({
      type: 'url',
      trigger,
      message
    })
    return this
  }

  get() {
    const res = this.rules
    this.rules = []
    return res
  }
}

const createRules = new CreateRules()

//规则
const needUrl = createRules.need().url().get()
const isUrl = createRules.url().get()

// imgUrl必填且是链接；href可选不填，如果填写必须是链接
const rules = {
  imgUrl: needUrl,
  href: isUrl
}

// deep rule 定义
// urls是数组，长度大于1
// urls的元素是链接
const urls = ['http://www.baidu.com', 'http://www.baidu.com']

const rules = {
  urls: {
    type: 'array',
    min: 1,
    defaultField: isUrl
  }
}

The above is the entire content of this article, I hope it will help everyone learn Helpful, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

Basic elements of Element form validation in Vue

How to solve attributes when for in objects in Vue Problems with non-negative integers

The above is the detailed content of How to use Element form validation in vue. For more information, please follow other related articles on the PHP Chinese website!