element_form_校验、表单、嵌套、多层

1、标签校验

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm frombd">
      <el-form-item label="标题" :prop="{ required: true, message: '请输入标题', trigger: 'blur' }">
      <el-input v-model="ruleForm.titles" placeholder="请输入标题"></el-input>
      </el-form-item>
  </el-from>
</template>

2、至少两种校验规则

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm frombd">
      <el-form-item label="标题" prop="titles">
      <el-input v-model="ruleForm.titles" placeholder="请输入标题"></el-input>
      </el-form-item>
  </el-from>
</template>
<script>
export default {
data(){
return {
ruleForm:{
titles:''
}
rules:{
    titles: [
        { required: true, message: '请输入标题', trigger: 'blur' },
        { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'change' }
    ],    
 };
}
}

}
</script>

3、对象嵌套校验

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm frombd">
      <el-form-item label="姓名" prop="user.name"></el-form-item>
  </el-from>
 </template>
<script>
export default {
data(){
return {
ruleForm:{
titles:''
}
rules:{
    'user.name': [
        { required: true, message: '姓名不能为空', trigger: 'blur' }
    ]
 };
}
}
}
</script>

4、数组对象嵌套校验

el-form中有数组内嵌对象，对内嵌对象内的属性做校验

<template>
<el-form :model="formData" :rule="rules" label-width="0">
    <el-form-item>
      <input v-model="formData.brand" />
    </el-form-item>
//这里是数组的数据，我的是可以新增的数组，一样适用这种处理
<div v-for="(item,index) in formData.phones" :key="index" >
//prop绑定
    <el-form-item :prop=`phones[${index}].name`
//rules定义好之后，一定要在这里引入一下
    :rules="rules.productGroupRules.name">
    <input v-model="item.name" />
    </el-form-item> 
      <el-form-item :prop=`phones[${index}].type`
       :rules="rules.productGroupRules.type">
    <input v-model="item.type" />
    </el-form-item>
</div>
</el-form>
 </template>
<script>
export default {
data(){
return {
formData:{
brand:'',
phones:[],
}
rules:{
   productGroupRules:{
      name:[{ required: true, message: '姓名不能为空', trigger: 'blur' }],
      type:[{ required: true, message: '不能为空', trigger: 'blur' }]
   }
 };
}
}
}
</script>

5、自定义校验

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm frombd">
      <el-form-item label="姓名" prop="tel"></el-form-item>
  </el-from>
 </template>
<script>
export default {
data(){
//写在data里 return 外面
let tells = (rule, value, callback)=>{
        if(value){
          let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
          let isPhone = reg.test(value);
          value = Number(value); //转换为数字
          if (typeof value === "number" && !isNaN(value)) {//判断是否为数字
            value = value.toString(); //转换成字符串
            if (value.length < 0 || value.length > 12 || !isPhone) { //判断是否为11位手机号
              callback(new Error("手机号码格式如:138xxxx8754"));
            } else {
              callback();
            }
          } else {
            callback(new Error("请输入电话号码"));
          }
        }else {
          callback();
        }

      }       //手机号正则验证
return {
ruleForm:{
tel:''
}
rules:{
    tel: [
        { validator: tells, trigger: "blur" }
    ]
 };
}
}
}
</script>