current position:Home>[element UI] use of form verification -- detailed explanation

[element UI] use of form verification -- detailed explanation

2022-05-15 02:10:53Triumph-light

Summarize the use of form validation , If there are any subsequent operations, you will continue to add
Helpful students , I hope three times in a row , Or pay attention to me , Let's learn and improve together !!!

Custom form validation

First step : by form-item add to prop attribute (prop The attribute value is the field name of the verification rule )
 Insert picture description here
The second step : by form add to rules Property and in :model Bind the value to be verified at (rules The attribute value is the verification rule )
 Insert picture description here
The third step : Definition rules

notes : there rules Must be defined in data Inside return in
Step four : Define your own verification rules
 Insert picture description here

notes : The verification rules here must be written in data Inside return In front of , and value The value is due to the of form data model Property is bound to the object we want to verify the rule , We have to make sure that :model The value in the attribute must be the value we want to verify

Own project code case :

<el-form :model='form'></el-form>

props:{
    
	form:Object
	// form The form of transmission is 
	// form:{ username:'', newpassword:'' } 
	
}
data () {
    
    let validatePass = (rule, value, callback) => {
    
      //  Define the verification rules for passwords 
      const passreg = /^(?=.*[a-z])(?=.*[A-Z])[[email protected]&%#_]{8,16}$/
      if (value === '') {
    
        callback(new Error(' Please input a password '))
      } else if (!passreg.test(value)) {
    
        if (value.length <= 8 || value.length >= 16) {
    
          callback(new Error(' Password length must be 8-16 position '))
        } else {
    
          callback(new Error(' The password must contain both uppercase and lowercase letters '))
        }
      } else {
    
        callback()
      }
    }
    let validatePass2 = (rule, value, callback) => {
    
      if (value === '') {
    
        callback(new Error(' Please input the password again '))
      } else if (value !== this.form.newpassword) {
    
        callback(new Error(' The two passwords are not the same !'))
      } else {
    
        callback()
      }
    }
    return {
    
      rules: {
    
        username: [
          {
     required: true, message: ' Please enter a name ', trigger: 'blur' }
        ],
        nickname: [
          {
     required: true, message: ' Please enter a user name ', trigger: 'blur' }
        ],
        oldpassword: [
          {
     required: true, message: ' Please input a password ', trigger: 'blur' }
        ],
        newpassword: [
          {
     required: true, validator: validatePass, trigger: 'blur' }
        ],
        endpassword: [
          {
     required: true, validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },

design sketch :
 Insert picture description here

copyright notice
author[Triumph-light],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120526195102.html

Random recommended