vue中使用element-ui进行表单验证

element-ui中验证

一、简单逻辑验证(直接使用addRules)

实现思路

  • html中给el-form增加 :rules="addRules"
  • html中在el-form-item 中增加属性 prop="名称"
  • js中直接在data中定义addRules:{}

  • html部分


     
         
         常用地址
     

js部分

二、自定义验证逻辑

实现思路

  • html中给el-form增加 :rules="addRules"
  • html中在el-form-item 中增加属性 prop="名称"
  • js中直接在data中在rules中的名称对应中设置 validator: 验证器名称,
  • js中在data中 return之上书写验证器对应的js验证逻辑
  • html部分
    
     
        
     

js部分

 

你可能感兴趣的:(VUE,前端,vue,element-ui)