Basic code structure

Form validation is a frequently used skill that is used in many forms submission situations.ElementUIThe introduction of theasync-validatorIn theElementUIThe official documentation on some validation configurations is vague and gives a simple example. Actually, writing code against the plug-in’s documentation will write a lot less code, after all, the package is better.

1.htmlThe code structure

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
    <el-form-item prop="email" label="Email"
        :rules="[{required: true, message: 'Please enter the email address ', trigger: 'blur'}, {type: 'email', message:' Please enter the correct email address ', trigger: 'blur,change' } ]"
    >
        <el-input v-model="dynamicValidateForm.email"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">submit</el-button>
    </el-form-item>
<el-form>

Copy the code

Let’s start with a simple validation rule configuration:

1. Bind the model attribute to the el-form tag, whose value is the data object of the defined form, and configure a REF attribute to bind the same form data object as the Model attribute. Model defines form field bindings and REF defines objects for form validation, which can be consistent or different.

2. Set the prop property on each el-Form-Item tag (except the el-Form-item tag for the wrap button). The value is the corresponding key value of the data object of the form

3. Bind the validation rule attribute to each el-form-item (except for the el-form-item of the wrap button), and configure the rule as described in the next section

4. Bind the submit validation form event to the form Submit button (optional, but mandatory when submitting the form)

2,JavaScriptThe code structure

<script> export default { data() { return { dynamicValidateForm: { email: '' } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit! '); } else { console.log('error submit!! '); return false; }}); } } } </script>Copy the code

It’s a little bit easier in JavaScript

1. Define a data object for a form field in data

$refs[formName].validate((valid)); $refs[formName].validate((valid)); Validation does not pass (valid = false) return false.

Verification rule configuration details

1, Validate

function(source, [options], callback)

  • sourceObject to configure validation rules (must)
  • options(Optional) Configuring authentication Parameters
  • callbackCallback function to execute after validation is complete (must)

2, Rules,

function(rule, value, callback, source, options)

  • ruleValidation rules for fields
  • valueThe value of the field being validated
  • callbackValidates the callback function after completion, accepting an array of error messages
  • sourceObjects that pass validation
  • optionsAdditional parameters
  • options.messagesMessage object, which is deeply merged with the default message

3, Type

Validates the type value set by the rule

  • string: Must be of type string. This is the default type.
  • number: Must be of type number.
  • boolean: Must be of type boolean.
  • method: Must be of type function.
  • regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
  • integer: Must be of type number and an integer.
  • float: Must be of type number and a floating point number.
  • array: Must be an array as determined by Array.isArray.
  • object: Must be of type object and not Array.isArray.
  • enum: Value must exist in the enum.
  • date: Value must be valid as determined by Date
  • url: Must be of type url.
  • hex: Must be of type hex.
  • email: Must be of type email.

4, the Required

The value of the field to be validated must exist

5, the Pattern

The value of the field being validated by validating the matching regular expression

6, the Range

The range of field values specifies the length to be validated when the field value is a string or array. If the value is number, the value must be greater than or equal to min and less than or equal to Max.

7, Length

If the field value is a string or array, the length property is specified. If the field value is number, the length of the value is specified.

8 Enumerable.

Validate the value of the field against the list value given

var descriptor = {
    role: {type: "enum".enum: ['admin'.'user'.'guest']}}Copy the code