<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <script src="vue.js"></script>

</head>

<body>

<div id="app">

    <form>

        用户名 <input type="text" name="username" v-model="username">

        手机号 <input type="text" name="mobile" v-model="mobile">

        密码 <input type="password" name="password" v-model="password">

        <button type="button" @click="login" >登录</button>

    </form>

    <p v-for="(v,k) in err_arr">

        {{v}}

    </p>

</div>

</body>

</html>

<script>

    new Vue({

        el:"#app",

        data:{

            auth_user:"zhangsan123",

            auth_pass:"123456",

            auth_mobile:"18518505221",

            username:'',

            password:'',

            mobile:'',

            err_arr:[]

        },

        methods:{

            login(){

                if(this.validate()){

                    alert("登录成功");

                }

            },

            //验证器

            validate(){

                this.err_arr = [];

                if(this.username == ""){

                    this.err_arr.push('用户名不能为空');

                    return false;

                }

                var reg_user = /^[a-zA-Z\u4e00-\u9fa5]\w{6,16}$/;

                if(!reg_user.test(this.username)){

                    this.err_arr.push('用户名格式不正确');

                    return false;

                }

                if(this.mobile == ""){

                    this.err_arr.push('手机号不能为空');

                    return false;

                }

                var reg_mobile = /^1[35678]\d{9}$/;

                if(!reg_mobile.test(this.mobile)){

                    this.err_arr.push('手机号格式不正确');

                    return false;

                }

                if(this.password == ""){

                    this.err_arr.push('密码不能为空');

                    return false;

                }

                var reg_pass = /^\w{6,15}$/;

                if(!reg_pass.test(this.password)){

                    this.err_arr.push('密码格式不正确');

                    return false;

                }

                if(this.auth_mobile == this.mobile  && this.auth_pass == this.password &&  this.auth_user == this.username){

                    this.err_arr = [];

                    return true;

                }else {

                    this.err_arr.push('账号或者密码出错');

                    return false;

                }

            }

        }

    });

</script>

　　

VUE-表单验证的更多相关文章

  1. vue表单验证--veevalidate使用教程

    vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...

  2. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

  3. vue 表单验证实例

    1.注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. vue表单验证：vee-validate中文提示

    官方文档:https://baianat.github.io/vee-validate/guide/ vee-validate可用于vue项目中进行表单验证,使用方法在官方API上都可以查到: 使用过 ...

  5. Vue表单验证插件的制作过程

    一.表单验证模块的构成 任何表单验证模块都是由 配置――校验――报错――取值 这几部分构成的. 配置: 配置规则 和配置报错,以及优先级 校验: 有在 change 事件校验, 在点击提交按钮的时候校 ...

  6. Vue 表单验证插件

    verify github:https://github.com/liuyinglong/verifynpm:https://www.npmjs.com/package/vue-verify-plug ...

  7. vue 表单验证省市县三联动

    <el-col :span="24"> <el-form-item label="所在地区" prop="region" ...

  8. vue表单验证不通过，依然能执行点击事件里面的代码？

    遇到的问题:表单提交的时候,写了rules,明明验证不通过依然执行了点击事件里面的代码. 这个验证有什么用? 后来 我看elementUI组件才发现,我漏写了几行代码. methods里面这样写 完美 ...

  9. 一个不错的vue表单验证插件

    github文档 用着不错,官方的文档例子很简单 <body> <div id="app"> <validator name="valida ...

  10. vue 表单 验证 async-validator

    1.使用插件async-validator async-validator 地址:https://github.com/yiminghe/async-validator 2.示例(vue+elemen ...

随机推荐

  1. 使用Xamarin开发移动应用示例——数独游戏（八）使用MVVM实现完成游戏列表页面

    项目代码可以从Github下载:https://github.com/zhenl/ZL.Shudu .代码随项目进度更新. 前面我们已经完成了游戏的大部分功能,玩家可以玩预制的数独游戏,也可以自己添加 ...

  2. SSH 远程访问及控制 （ 早上好，我是派大星，上帝派来爱你的那颗星）

    远程访问及控制 1.SSH远程管理,TCP Wrappers访问控制 2.配置密钥对验证 1.SSH远程管理,TCP访问控制 SSH是一种安全通道协议,主要用来实现字符界面的远程登录.远程复制等功能: ...

  3. Typora如何上传图片到gitee

    Typora是一款非常好用的Markdown文本编辑器,深受广大程序员的青睐,那么在使用过程中,当我们插入图片的时候,其实是默认放在一个相对路径文件夹下的,这就导致,一旦我们移动文件,或者发送给别人, ...

  4. 第2章 selenium开发环境的搭建

    前端技术: html:网页的基础,一种标记语言,显示数据: JS:前端脚本语言,解释型语言,在页面中添加交互行为 xml:扩展标记语言,用来传输和存储数据 css:层叠样式表,用来表现HTML或XML ...

  5. Solution Set -「LOCAL」冲刺省选 Round XXIV

    \(\mathscr{Summary}\)   名副其实的 trash round,希望以后没有了.   A 题算好,确实一个比较关键的简化状态的点没想到,所以只拿了暴力(不考虑 \(\mathcal ...

  6. ESXI 7.0.0 U2 部署

    文章目录 什么是ESXI? ESXi 的优势 功能特性 部署ESXI 创建虚拟机 开始安装 打开浏览器输入ip进行管理 什么是ESXI? ESXI官网:https://www.vmware.com/c ...

  7. Spring MVC拦截器(Interceptor)使用

    第一篇Spring MVC的小作文就是关于Interceptor的,而不是很多基础的东西呢,很无奈.因为实践的项目中用到了,用地不太好,导致重复跳转页面浏览器cookie溢出了. 这个过程中呢就将与I ...

  8. linux历史命令审计

    一.添加历史命令记录 1.首先在/etc/profile中添加 export HISTORY_FILE=/var/log/Command/Command.log export PROMPT_COMMA ...

  9. ShaderLab实现Vignette过场动画效果

    实现Vignette过场动画效果 postprocessing中有渐晕效果(Vignette),镜头可以由边缘往中间慢慢变黑: 但是我打包WebGL的时候提示我postprocessing,GPU不支 ...

  10. Eclipse插件开发demo

    一.安装 1. 下载安装JDk 2. 下载安装PDE(Plugin-in Development Environment) 访问eclipse官网,点击Download,选择Download Pack ...