使用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{
　　　　　　　　//表单验证失败
　　　　　　　}
　　　　　　　　
　　　　　　})
　　　　}

　　}
}

转载于:https://www.cnblogs.com/erfsfj-dbc/p/10065482.html