使用vue做表单验证


<template>
<Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
  <Row>
<Col span='8'>
公司名称:
</Col>
<Col span='16'>
<FormItem prop="name">
<Input type="text" v-model="formInline.name" placeholder="请输入公司名称">
</Input>
</FormItem>
</Col>
</Row>
</Form>
</template>
export default{
  name:'本vue文件名',
  date(){
    return {
      others:'',//其他变量
      formInline:{
        name:'',//绑定表单下的prop属性至信息框
        ...
      }
      ruleInline:{//定义规则
        name:[
          {request:ture, message:'不合规则提示的信息', trigger:'blur'}//是否规则,,绑定的触发事件
        ]
      }
    }
  }
  methods:{
    //提交表单方法
    submit(){
      //表单验证方法,调用父组件-from
      this.$refs['父组件的ref值'].validate((valid)=>{
      //自动检测,返回true/false给valid进行相应操作
       if(valid){
        //表单验证通过
       }else{
        //表单验证失败
       }
        
      })
    }

  }
}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM