Hungry form component

1 Basic Usage

在Element-UILook for examples on the website and change from there

2 Form Verification

Verification necessity

We need to validate the parameters we are passing to nip user errors in the bud before we invoke the interface with a back-end request.

Check the content

  • The content cannot be empty
  • What is the length of the password
  • The format of the phone number must be correct
  • The format of the email should be in compliance
  • .

Define the rules

  • Procedure Step 1 Define a form verification rule
data() {
  return {
    rules: {
        // Field name 1: indicates the attribute to be validated
        // Value: indicates the list of validation rules. It's an array, and each item in the array represents a rule.
        // Multiple rules in the array are executed in orderThe field name1: [{validate rule1}, {validate rules2},], field name2: [{validate rule1}, {validate rules2},],}}}Copy the code
export default {
  data () {
    return {
      rules: {
        phone: [
          // trigger check time: lose focus
          { required: true.message: 'Cannot be empty'.trigger: 'blur' },
          { pattern: / [0-9] {10} ^ 1 $/, message: 'Please enter a valid mobile phone number'.trigger: 'blur'},].password: [{required: true.message: 'Cannot be empty'.trigger: 'blur' },
          { pattern: / ^ [0-9] {8} $/, message: 'Please enter the correct password'.trigger: 'blur'}]}}}}Copy the code
  • Step 2 Configure the template

When this step is completed, the effect can be accepted. If the user input does not meet the requirements, it will be prompted, and if it is correct, it will not be prompted

  • Step 3 Manually perform bottom-pocket verification

Note: These three attribute names must be the same

Element - UI form component.validate (valid= > {
	if(valid) {
	   // It passes the validation
	} else {
	   // Verification failed}})Copy the code

The validate method comes with the form component and is used to verify the form’s contents

export default{...methods: {
    doLogin () {
      alert('do login... ')
    },
    onSubmit () {
      // Submit data for manual bottom check
      this.$refs.form.validate(valid= > {
        if (valid) {
          // The form is verified
          this.doLogin()
        } else {
          alert('Error')}})}}}Copy the code

Summary of use process

Define verification rules. 2. Configure templates. 3

3 Customize check rules

format

Rules: {attribute names1: [{// Pay attention to the order of arguments
        validator: function (rule, value, callback) {
      		// rule: indicates the adopted rule
          // value: indicates the verified value
          // callback is a callback function,
          // If the rule is passed, call callback()
          // If the rule fails, call callback(error object, in which the reason is specified)
        	// For example: callback(new Error(' Error '))
      	}, 
        trigger: 'blur'}}]Copy the code

Example: The password cannot be 123456

{validator:(rule,value,callback) = >{
  console.log(rule,value,callback);
  if(value==='123456'){
    callback(new Error('Password is too simple'))}else{
    callback()
  }
},trigger:'blur'}
Copy the code

If one of them doesn’t call then the bottom check doesn’t pass

4 Reset the form to clear verification traces

format

this.$refs.form component reference. ResetFields ()Copy the code

role

1. Clear verification traces. 2