vue.js怎么添加密码框验证

Posted 2023-05-06

参考技术A 第一步，创建静态页面validation.html，并引入vue.js相关的js文件，如下图所示：

第二步，在页面主体中插入form表单元素，有用户名、密码、提交按钮，如下图所示：

第三步，作为vue.js校验，利用到vue-validator插件，需要引入vue-validator相关的js文件，如下图所示：

第四步，预览静态页面，可以看到页面展示内容为：用户名、密码、提交按钮，如下图所示：

第五步，调用vue方法
new Vue( el:'#validForm');
如下图所示：

第六步，再次预览静态页面，查看页面显示内容，并输入内容，如下图所示：本回答被提问者采纳

如何使用带有 Vue 的 HTML 5 验证添加错误消息

【中文标题】如何使用带有 Vue 的 HTML 5 验证添加错误消息

【英文标题】：How to add an error message using HTML 5 Validation with Vue

【发布时间】：2021-05-17 07:34:05

【问题描述】：

我遵循了一个关于使用 Vue.js 进行 HTML 5 表单验证的精彩教程，我尝试了太多次在失败的输入旁边添加消息错误，但我做不到。 这是教程：https://logaretm.com/blog/2019-05-03-html-aided-vuejs-form-validation/

这是我的代码：

function updateMessage(el, vm) 
  vm.errors = Object.assign(, vm.errors, 
    [el.name]: el.validationMessage
  );


export const ValidateMixin = 
  data: () => (
    errors: 
  ),
  computed: 
    hasErrors() 
      // Check if we have errors.
      return Object.keys(this.errors).some(key => 
        console.log(this.errors)
        return !!this.errors[key];
      );
    
  ,
  directives: 
    validate: 
      bind(el, _, vnode) 
        const vm = vnode.context;
        el.addEventListener("input", e => 
          updateMessage(e.target, vm);
        );
        vnode.context.$on("validate", () => 
          updateMessage(el, vm);
        );
      
    
  ,
  methods: 
    validate() 
      this.$emit("validate");
    
  
;

我想在每个输入字段旁边的 span 中显示错误消息

【参考方案1】：

mixin 的 errors 对象属性包含元素 name 到该元素的验证错误消息的映射。例如，在<input name="myEmail" type="email" v-validate> 的输入中输入无效的电子邮件地址会在errors.myEmail 中创建一条验证消息。

您可以使用模板中的errors 对象将元素的错误消息绑定到对应的input 旁边的span：

<input name="myEmail" type="email" v-validate>
<span v-if="errors.myEmail"> errors.myEmail </span>

demo