ElementUI 表单规则验证

在rules中配置规则：

<!--普通表单校验 HTML部分-->
<el-form ref="userForm" :model="userForm" :rules='userFormRules' label-width="90px" >
    <el-form-item prop='name' label='姓名'>
          <el-input  v-model="userForm.name" placeholder='请输入姓名' clearable></el-input>
    </el-form-item>
    <el-form-item prop='mobile' label='手机号'>
          <el-input  v-model="userForm.mobile" placeholder='请输入手机号' clearable></el-input>
    </el-form-item>
    <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
    </el-form-item>
</el-form>

<!--数组表单校验 HTML部分-->
<el-form ref="userForm" :model="userFormLists" label-width="90px" >
    <div class="form-wrap" v-for="(detail,index) in userFormLists.details" :key="index">
        <el-form-item
            :prop="`details.${index}.name`"
            :rules='userFormRules.name'
            label='姓名'>
            <el-input  v-model="detail.name" placeholder='请输入姓名' clearable></el-input>
         </el-form-item>
          <el-form-item
              :prop="`details.${index}.mobile`"
              :rules='userFormRules.mobile'
              label='手机号'>
              <el-input  v-model="detail.mobile" placeholder='请输入手机号' clearable></el-input>
          </el-form-item>
    </div>
    <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
    </el-form-item>
</el-form>

<!--表单校验 JS部分-->
  userForm:{},//普通表单
  userFormLists:{//数组表单
      details:[
        {name:"",mobile:""},
        {name:"",mobile:""}
      ]
  },
  userFormRules:{//规则校验
          name: [
                { required: true, message: '请输入姓名', trigger: 'blur'}
          ],
          mobile: [
                {  required: true, message: '请输入手机号码', trigger: 'blur' },
                {  pattern:/^1[3456789]\d{9}$/, message: '手机格式不正确'}
          ],
  },
onSubmit(){//表单提交
    this.$refs["userForm"].validate(valid=>{
          if(valid){

          }
    });
},