实现和el-form相识的组件

 <xl-form :model="formData" :rules="rules" ref="form">
    <xl-form-item labell="手机号" prop="tel">
      <xl-input type="tel" maxlength="11" v-model.trim="formData.tel" />
    </xl-form-item>
    <br/>
    <xl-button @click="handleSubmit">提交</xl-button>
  </xl-form>
<script>
  export default {
    data() {
      return {
        formData: {
          tel: ""
        },
        rules: {
          tel: [
            { required: true, message: "您的手机号码未输入" },
            { pattern: /^1[34578]\d{9}$/, message: "您的手机号码输入错误" }
          ]
        },
      }
    },
     methods: {
      handleSubmit() {
        this.$refs.form.validate(errs => {
          console.log(errs);
        });
      },
    }
  }
</script>

1. 通过$slot和componentName来获取插入到form标签中的数据

    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;
       }
     }
   

2. 使用async-validator库 ，根据rules的规则调用validate()方法，根据结果做处理

   validate() {
     const validator = new AsyncValidator(this.rules);
   
     let isSuccess = true;
   
     const findErrorByProp = (errors, prop) => {
       return (
         errors.find(error => {
           return error.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);
   }
   

配置规则：

rule属性 type: 'integer', 'float', 'array', 'regexp', 'object', 'method', 'email', 'number', 'date', 'url', 'hex' min、max、len(优先级高于min、max属性)

实用的校验规则

1. 数组 array { type: 'array', required: true, min: 1 } 数据value非空、且为数组类型、且长度匹配校验条件。required为false时，跳过非空校验，后同。

2. 时间 date { type: 'date', required: true, min: new Date('2017 12 10').getTime() } 数据value非空、且为date日期对象，且该日期对象匹配起止时间校验。在date校验器的实现中，通过value.getTime()方法将其转化为毫秒数，然后再作range基础校验。

3. 枚举 enum { type: 'enum', required: true, enum: ['male', 'female'] }

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

5. 字符串 string { type: 'string', pattern: /\s/, required: true, min: 1, whitespace: true } 数据value非空、且为字符串、且其长度匹配校验条件、且匹配正则表达式或正则字符串、且不是空字符串。

浅析async-validator源码 MDN对form的描述 Html5 form校验属性

Html5 form校验属性

form action 、method 、autocomplete 、target 、novalidate input onvalid 、require 、pattern、type: email,url,number,tel,date

input:required:invalid {
    background-color: powderblue;
}
input:required:invalid, input:focus:invalid {
    -moz-box-shadow: none; 
}

<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>