Element表单验证规则

Element表单验证规则

一、简单的逻辑验证使用方法：

方法步骤：

1、在html中给el-form增加 :rules=“rules”

2、html中在el-form-item 中增加属性 prop=“名称”

3、js中直接在data中定义rules:{}

在template标签中的写法：

     
          
          提交
      

script标签中：

二、自定义验证逻辑：

步骤：

1、在js中找到data中的rules，然后在对应的名称中设置 validator: 验证器名称；

2、在js的data中的return之上书写验证器对应的js验证逻辑，如：

三、表单提交

methods: {
   onSubmit(formName) {
     this.$refs[formName].validate(valid => {
        if (valid) {
             //如果通过验证 to do...
        } else {
          console.log('error submit!!')
          return false
        }
    })
 }

四 常用表单验证