vue表单验证rules及validator验证器的使用方法实例

您所在的位置:网站首页 vue校验表单数据 vue表单验证rules及validator验证器的使用方法实例

vue表单验证rules及validator验证器的使用方法实例

2024-06-02 21:29| 来源: 网络整理| 查看: 265

  

    

  

  

    

      

      

    

  

  

    

      

        

      

    

    -

    

      

        

      

    

  

  

    

  

  

    

      

      

      

      

    

  

  

    

      

      

    

  

  

    

  

  

    立即创建

    重置

  

  export default {

    data() {

      return {

        ruleForm: {

          name: '',

          region: '',

          date1: '',

          date2: '',

          delivery: false,

          type: [],

          resource: '',

          desc: ''

        },

        rules: {

          name: [

            { required: true, message: '请输入活动名称', trigger: 'blur' },

            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }

          ],

          region: [

            { required: true, message: '请选择活动区域', trigger: 'change' }

          ],

          date1: [

            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }

          ],

          date2: [

            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }

          ],

          type: [

            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }

          ],

          resource: [

            { required: true, message: '请选择活动资源', trigger: 'change' }

          ],

          desc: [

            { required: true, message: '请填写活动形式', trigger: 'blur' }

          ]

        }

      };

    },

    methods: {

      submitForm(formName) {

        this.$refs[formName].validate((valid) => {

          if (valid) {

            alert('submit!');

          } else {

            console.log('error submit!!');

            return false;

          }

        });

      },

      resetForm(formName) {

        this.$refs[formName].resetFields();

      }

    }

  }



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3