zoukankan      html  css  js  c++  java
  • 使用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{
            //表单验证失败
           }
            
          })
        }

      }
    }
  • 相关阅读:
    filter, map, reduce, zip函数
    schwartzian sort
    各种排序
    MVVM
    js/jquery学习笔记(附百度统计初探??)
    由一句需求引发的mysql崩溃说起
    高效前端优化工具Fiddler入门教程
    由一次很有意思的购物体验想到的
    个人电脑文件目录变更日志小程序
    浅谈COOKIE和SESSION关系和区别等
  • 原文地址:https://www.cnblogs.com/erfsfj-dbc/p/10065482.html
Copyright © 2011-2022 走看看