vue实现验证用户名是否可用

本文实例为大家分享了vue验证用户名是否可用的具体代码，供大家参考，具体内容如下

验证用户名是否可用

案例效果

实现步骤(思路）

1、通过v-model实现数据绑定
2、需要提供提示信息
3、需要侦听器监听输入信息的变化
4、需要修改触发的事件

进一步调整就是

1、采用侦听器监听用户名的变化
2、如果用户名发生变化（调用后台接口进行验证）
3、根据验证的结果调整提示信息

代码

基本布局

<div id="app">
  <span>用户名:</span>
  <span>
   <input type="text" v-model.lazy="uname">
  </span>
  <span>
   {{tip}}
  </span>
</div>

通过监听器实现具体功能

<script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
  /* 侦听器
  采用侦听器监听用户名的变化
  如果用户名发生变化（调用后台接口进行验证）
  根据验证的结果调整提示信息 */
  var vm = new Vue({
   el: "#app",
   data: {
    uname: '',
    tip: ''
   },
   methods: {
    checkName: function (uname) {
     // 调用接口，但是可以使用定时任务的方式模拟接口调用
     var that = this;
     setTimeout(function () {
      // 模拟接口调用
      if (uname == 'admin') {
       that.tip = '用户名已经存在，请更换一个'
      } else {
       that.tip = '用户名可以使用'
      }
     }, 1000)
    }
   },
   watch: {
    uname: function (val) {
     // 调用后台接口验证用户名的合法性
     this.checkName(val);
     this.tip = '正在验证...'
    }
   },

  });
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能 第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig

  • Go+Vue开发一个线上外卖应用的流程(用户名密码和图形验证码)

    图形化验证码生成和验证 功能介绍 在使用用户名和密码登录功能时,需要填写验证码,验证码是以图形化的方式进行获取和展示的. 验证码使用原理 验证码的使用流程和原理为:在服务器端负责生成图形化验证码,并以数据流的形式供前端访问获取,同时将生成的验证码存储到全局的缓存中,在本案例中,我们使用redis作为全局缓存,并设置缓存失效时间.当用户使用用户名和密码进行登录时,进行验证码验证.验证通过即可继续进行登录. 验证码库安装 借助开源的验证码工具库可以生成验证码. 首先,安装开源的验证码生成库: go

  • vue实现验证用户名是否可用

    vue实现验证用户名是否可用

    本文实例为大家分享了vue验证用户名是否可用的具体代码,供大家参考,具体内容如下 验证用户名是否可用 案例效果 实现步骤(思路) 1.通过v-model实现数据绑定 2.需要提供提示信息 3.需要侦听器监听输入信息的变化 4.需要修改触发的事件 进一步调整就是 1.采用侦听器监听用户名的变化 2.如果用户名发生变化(调用后台接口进行验证) 3.根据验证的结果调整提示信息 代码 基本布局 <div id="app"> <span>用户名:</span>

  • Vue验证用户名是否可用的方法

    Vue验证用户名是否可用的方法

    本文实例为大家分享了Vue验证用户名是否可用的具体代码,供大家参考,具体内容如下 当在输入框中输入姓名,失去焦点时验证是否存在,如果已经存在,提示重新输入,如果不存在,提示可以使用. 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con

  • 基于jQuery实现Ajax验证用户名是否可用实例

    本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="/jquery_aj

  • php+Ajax无刷新验证用户名操作实例详解

    php+Ajax无刷新验证用户名操作实例详解

    本文实例讲述了php+Ajax无刷新验证用户名操作.分享给大家供大家参考,具体如下: AJAX 简介 AJAX = Asynchronous JavaScript And XML(异步 JavaScript 及 XML) AJAX 是 Asynchronous JavaScript And XML 的首字母缩写. AJAX 并不是一种新的编程语言,而仅仅是一种新的技术,它可以创建更好.更快且交互性更强的 web 应用程序. AJAX 使用 JavaScript 在 web 浏览器与 web 服务

  • 使用struts2+Ajax+jquery验证用户名是否已被注册

    推荐阅读:JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册 在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面的例子,我们只希望返回一个1和0有助于进行后续判断即可,没必要返回json类型,返回一个text字符串就可以了. regist.jsp(这里只提供<script>部分): <script type

  • 利用jQuery.Validate异步验证用户名是否存在（推荐）

    HTML头部引用: <script type="text/JavaScript" src="../js/jQuery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.validate.min.js"></script> <script type="text/javas

  • Ajax实现异步刷新验证用户名是否已存在的具体方法

    Ajax实现异步刷新验证用户名是否已存在的具体方法

    都是简单的实例,所以直接发代码 静态页面Ajax.html 复制代码 代码如下: <html>    <head>        <title>Ajax</title>        <script type="text/javascript">            function loadXMLDoc() {                if (document.getElementById("account

  • Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）

    Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）

    其中用到了jquery插件来验证用户名哦,这里是利用jquery ajax来验证用户名是否存在哦.大家看看效果图,后面将附上源码下载. jquery框架实现的ajax 验证用户名是否存在的部分JS 复制代码 代码如下: $("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputVal

  • jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名,操作如下:新建一个输入页面,起名为input.jsp, 复制代码 代码如下: <%@ page contentType="text/html; charset=utf-8"%> <html> <head> <title>jsp+ajax实现无刷新_鼠标离开文本框即验证用户名</title> <meta http-equiv="Content-Type&qu

  • asp.net结合Ajax验证用户名是否存在的代码

    1, 使用JavaScript js文件,验证用户名是否存在 复制代码 代码如下: var ajax = function(option) { var request; var createRequest = function() { //var request; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else { try { request = new ActiveXObject("Microsoft.XM

随机推荐