阅读数:135 评论数:0

一、设置el-label和el-input高度

<style scoped>
    ::v-deep.el-form-item.foldLabel .el-form-item__label {
        white-space: pre-line; /*换行显示*/
        height: 32px;/*设置lable高度，与input高度一样*/
        line-height: 16px!important;/*设置行高为label高度的一半（有n行就是label高度的1/n）*/
    }
</style>

二、自定义检验

<el-form ref="perfectInfo"   
        :model="perfectData" //所有form表单中的值全放到此JSON中 
        label-width="90px"  
        :rules="rulesPerfectData" //定义校验规则
        class="page-form secondForm">
       <el-form-item prop="realName" label="真实姓名">
             <el-input v-model="perfectData.realName" placeholder="请输入真实姓名">
             </el-input>
       </el-form-item>
       <el-form-item style="margin-left:-80px;" class="confirmBtn">
          <el-button @click="perfectInformation" type="success" style="width:100%;">
             确认激活
          </el-button>
       </el-form-item>
</el-form>
 

js部分

<script>
  export default{
      data(){
            //定义自定义表单验证，else必须callback()否则点击确认执行按钮无法校验拦截，会直接进 
            //入下一步
            var checkName=(rule,value,callback)=>{
                let nameZz= /^[a-zA-Z\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
                if(!value){
                    return callback(new Error('姓名不能为空'));
                }else if(!nameZz.test(value)){
                    return callback(new Error('姓名格式不正确'))
                }else{
                    callback();
                }
            };
          return{
             perfectData:{
                    realName:''
             },
            //执行校验
             rulesPerfectData:{
               realName:[
                 //此写法是执行上面定义的校验规则
                 {required:true,validator:checkName,trigger:'blur'}，
                 //此写法默认校验值不能为空
                 {required:true,message:'姓名不能为空',trigger:'blur'}
               ]
 
          }
      },
      methods:{
        perfectInformation(){
            this.$refs[perfectInfo'].validate(async (valid)=>{
                 if(valid){
                    //校验通过valid为true
                    console.log(‘校验通过’);
                }
            })
        }
      }  
  }
</script>