<xl-form :model="formData" :rules="rules" ref="form">
    <xl-form-item labell="Mobile phone Number" prop="tel">
      <xl-input type="tel" maxlength="11" v-model.trim="formData.tel" />
    </xl-form-item>
    <br/>
    <xl-button @click="handleSubmit">submit</xl-button>
  </xl-form>
<script>
  export default {
    data() {
      return {
        formData: {
          tel: ""
        },
        rules: {
          tel: [{required: true.message: "Your mobile phone number has not been entered." },
            { pattern: /^1[34578]\d{9}$/, message: "Your mobile phone number is entered incorrectly."}},}},methods: {
      handleSubmit() {
        this.$refs.form.validate(errs= > {
          console.log(errs); }); }}},</script>
Copy the code

  1. Get the data inserted into the form tag with $slot and componentName

     if (this.$slots.default) {
    const children = this.$slots.default
      .filter(vnode= > {
        return (
          vnode.tag &&
          vnode.componentOptions &&
          vnode.componentOptions.Ctor.options.name === "XlFormItem"
        );
      })
      .map(({ componentInstance }) = > componentInstance);

    if (
      !(
        children.length === this.formItems.length &&
        children.every((pane, index) = > pane === this.formItems[index])
      )
    ) {
      this.formItems = children; }}Copy the code

  2. Using the Async-Validator library, the validate() method is called based on rules’ rules and the result is processed

    validate() {
  const validator = new AsyncValidator(this.rules);

  let isSuccess = true;

  const findErrorByProp = (errors, prop) = > {
    return (
      errors.find(error= > {
        returnerror.field === prop; }) | |""
    );
  };

  validator.validate(this.model, (errors, fields) = > {
    this.formItems.forEach(formItem= > {
      const prop = formItem.prop;
      const error = findErrorByProp(errors || [], prop);
      if (error) {
        isSuccess = false;
      }

      formItem.showError((error && error.message) || "");
    });
  });

  return Promise.resolve(isSuccess);
}
Copy the code

Configuration rules:

Rule attribute type: ‘integer’, ‘float’, ‘array’, ‘regexp’, ‘object’, ‘method’, ’email’, ‘number’, ‘date’, ‘url’, ‘hex’ min, Max, len(priority over min, Max attributes)

Practical verification rules

  1. Array array {type: ‘array’, required: true, min: 1} Data value is not null, is an array type, and its length matches the verification condition. If required is false, non-null validation is skipped, and the following is the same.

  2. Date {type: ‘date’, required: true, min: new date (‘2017 12 10’).getTime()} Data value is non-empty and a date object that matches the start and end time checksum. In the implementation of the Date validator, it is converted to a number of milliseconds by the value.getTime() method, and then the range base check is performed.

  3. Enumeration enum {type: ‘enum’, required: true, enum: [‘male’, ‘female’]}

  4. Regular pattern {pattern: /\s/, required: true}

  5. String string {type: ‘string’, pattern: /\ S /, Required: true, min: 1, whitespace: True} Data value is a non-empty string whose length matches the verification condition, matches the regular expression or regular string, and is not an empty string.

Html5 form validation attribute

Html5 form validates attributes

The form of action, method, autocomplete, target, novalidate input onvalid, the require, the pattern, type: email, url, number, tel, and the date

input:required:invalid {
    background-color: powderblue;
}
input:required:invalid.input:focus:invalid {
    -moz-box-shadow: none; 
}
Copy the code
<form action="demo-form.php" target="_self">
  Country code: 
	<input type="text" name="country_code" required
		    oninvalid="validData()" onsubmit="setSubmit()"
		   pattern="[A-Za-z]{3}" title="Three letter country code">
	<input type="text" name="country_code" pattern="[A-Za-z]{3}"
		   title="Three letter country code" onvalid="validData()">
  <input type="submit">
</form>
<script>
  function validData () {
    console.log(11);
  }
</script>
Copy the code