Vue使用表单验证用户名和密码
功能描述:实现输入用户名和密码不合法时提前弹出提示
表单样式:
基本功能:
为空时提示:
长度不合法时提示:
表单输入文本框代码:
<el-form :model="user" :rules="rules"><el-form-item prop="username"><!--对应user.username--><!--输入框 v-model通常用于input的双向数据绑定 ,也可以实现子组件到父组件数据的双向数据绑定--><el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user"v-model="user.username"></el-input></el-form-item><!--密码--><el-form-item prop="password"><!--对应user.password--><el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-passwordv-model="user.password"></el-input></el-form-item>
</el-form>
注意:
- el-form>:model>[user]>username
- el-form-item>prop>[username]
- el-input>v-model>[user.username]
- rules>[username]
以上四个地方出现的 username 名称必须一样(指拼写)
JavaScript代码:
<script>export default {name: "Login",data() {return {user: {},rules: {// usn和prop对应username: [// blur表示鼠标失焦时触发{required: true, message: '请输入用户名', trigger: 'blur'},],password: [{required: true, message: '请输入密码', trigger: 'blur'},{min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}]}}}}
</script>
Vue使用表单验证用户名和密码相关推荐
- vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)
vue表单验证(用户名.密码.身份证号.中文姓名.手机号.邮箱) new Vue({el: '#register',data: function() {// 验证邮箱let checkEmail = ...
- vue 表单验证两次密码是否一致
template: <template><div class="logon_home"><div class="logon_bg" ...
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
- vue表单验证,多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现 这里以antd 举例 <template><a-form-model ref="rule ...
- html验证用户名和密码,如何用javascript判断用户名和密码是否为空?
用javascript判断用户名和密码是否为空的方法:JavaScript中可以使用(表单名.文本域名.value==''")来判断表单中用户名与密码是否为空. 用javascript判断用 ...
- vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法 子组件: //内容部分 <Form ref="formCustom" :model="formC ...
- 用户姓名保护python_Python操作LDAP,对用户进行认证(验证用户名以及密码)
Python操作LDAP,对用户进行认证 1.环境 Python版本: 3.7.1 操作系统:windows 7 x64 第三方包:python-ldap 2.LDAP LDAP,它是基于X.500标 ...
- 注册时验证用户名和密码是否合法
一. /* 在注册时通常要验证用户名和密码是否合法,运用学习过的知识完成如下操作: 1.用户名长度大于等于6位,必须包含数字和英文字母 2.密码长度大于等于8位,必须包含特殊符合_或者$,英文字母以及 ...
最新文章
- 【直播】耿远昊:Pandas入门讲解(安泰第四届数据科学训练营)
- 【408预推免复习】操作系统引论
- Spring整合Quartz定时任务 在集群、分布式系统中的应用(Mysql数据库环境)
- 《黑客秘笈——渗透测试实用指南(第2版)》—第2章2.7节总结
- jvm堆内存设置原理
- 接口(interface)有什么优点,为什么要用接口
- 知识点 | Revit族库插件哪家强?
- jQuery源码阅读
- 26.【案例:敏感词汇过滤】
- Java实现的餐厅点餐系统源码Java点餐系统Java点餐系统Java网上订餐系统Java在线订餐系统
- 知识图谱构建流程及算法
- 什么是MTU?为什么MTU值普遍都是1500?
- 基于社交网络的推荐算法
- 拼多多视频直播回放视频下载软件方法分享地瓜网络技术
- 手游联运系统隐藏福利大揭秘
- eclipes 快捷键操作:
- VB中常用的函数(一)
- 基于单片机的车速控制语音报警系统
- 布隆过滤器(Bloom Filter)
- 史上最全的集合框架讲解 ----- Java 集合框架(3)---- Map 相关类最全解析