el-form 表单 单个表单选项验证 手机号 验证

正常的表单验证  ： 

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="search_area">
    <el-form-item label="联系电话" prop="phone"  class="itemRequiredStyle">
      <el-input v-model="ruleForm.phone"  placeholder="请输入手机号码" class="inp_normal inpStyle"></el-input>
    </el-form-item>

</el-form>

<script>
export default {
   name:"",
   // 验证手机 
    let checkPhone = (rule, value, callback) => {
      let reg = /^1[345789]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入11位手机号'))
      } else {
        callback()
      }
    }
    return{
          rules: {
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { type: 'number', validator: checkPhone, message: '请输入11位有效手机号号码', trigger: ['blur', 'change'] }

        },
    }

</script>

但是表单空间是动态创建的时候  直接在data内写 validator  是报错的   此时需要单独对表单控件 单独在行内进行验证  

将validator的校验规则写在methods 内    动态创建时  需要注意   :prop值  具体写法参考 

https://element.eleme.io/#/zh-CN/component/form

下面以手机号验证作为案例： 

<el-form-item  
     class="itemStyle" 
     label="联系电话" 
     label-width="80px"
     :prop="'parent_info.' + index + '.phone'"
     :rules="[
        {required: true, message: '电话不能为空',trigger: ['blur', 'change']},
        {  validator: (rule, value, callback)=>{checkPhone(rule, value, callback)},   trigger: ['blur', 'change']  }
       ]"
    >
    <el-input v-model="item.phone" placeholder="请输入"  class="inp_normal inpStyle" ></el-input>
    </el-form-item>


// methods 
methods:{
    //验证手机号 
  checkPhone(rule, value, callback){
        let reg = /^1[345789]\d{9}$/
        if (!reg.test(value)) {
          callback(new Error('请输入11位手机号'))
        } else {
          callback()
        }
      },
}

效果如图