Vue--表单验证

最新推荐文章于 2024-04-20 14:59:10 发布
最新推荐文章于 2024-04-20 14:59:10 发布
阅读量698 收藏 6
点赞数
分类专栏： 前端三件套 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47518713/article/details/127417581
版权
这是一个关于尚硅谷会员登录和注册页面的HTML代码实现，使用了Vue.js进行数据绑定和表单验证。登录页面包含用户名和密码输入框，提交按钮及错误提示信息。注册页面则增加了用户名、密码、确认密码和邮箱验证，所有输入项均通过正则表达式进行合法性检查。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>尚硅谷会员登录页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
    <script src="../../../day03_Vue/03_vue/vue.js"></script>
  </head>

  <body>
  <div id="app">
    <div id="login_header">
      <a href="../../index.html">
        <img class="logo_img" alt="" src="../../static/img/logo.gif" />
      </a>
    </div>

    <div class="login_banner">
      <div id="l_content">
        <span class="login_word">欢迎登录</span>
      </div>

      <div id="content">
        <div class="login_form">
          <div class="login_box">
            <div class="tit">
              <h1>尚硅谷会员</h1>
            </div>
            <div class="msg_cont">
              <b></b>
              <span class="errorMsg">{{errMsg}}</span>
            </div>

            <div class="form">
              <form action="login_success.html" @submit="checkLogin">
                <label>用户名称：</label>
                <input
                        class="itxt"
                        type="text"
                        placeholder="请输入用户名"
                        autocomplete="off"
                        tabindex="1"
                        name="username"
                        id="username"
                        v-model="username"
                />
                <br />
                <br />
                <label>用户密码：</label>
                <input
                        class="itxt"
                        type="password"
                        placeholder="请输入密码"
                        autocomplete="off"
                        tabindex="1"
                        name="password"
                        id="password"
                        v-model="password"
                />
                <br />
                <br />
                <input type="submit" value="登录" id="sub_btn" />
              </form>
              <div class="tit">
                <a href="regist.html">立即注册</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
  </div>

  <script>
    new Vue({
      el:"#app",
      data:{
        username:"",
        password:"",
        errMsg:"请输入账号密码"
      },
      methods:{
        checkLogin:function () {
          if (this.username==""){
            this.errMsg="用户名为空"
            event.preventDefault()
          }else if (this.password==""){
            this.errMsg="密码为空"
            event.preventDefault()
          }
        }
      }
    })
  </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
    <link rel="stylesheet" href="../../static/css/register.css" />
    <style type="text/css">
      .login_form {
        height: 420px;
        margin-top: 25px;
      }
    </style>
    <script src="../../../day03_Vue/03_vue/vue.js"></script>
  </head>
  <body>
  <div id="app">
    <div id="login_header">
      <a href="../../index.html">
        <img class="logo_img" alt="" src="../../static/img/logo.gif" />
      </a>
    </div>

    <div class="login_banner">
      <div class="register_form">
        <h1>注册尚硅谷会员</h1>
        <form action="regist_success.html" @submit="checkAll">
          <div class="form-item">
            <div>
              <label>用户名称:</label>
              <input type="text" placeholder="请输入用户名" v-model="username" @blur="checkUsername"/>
            </div>
            <span class="errMess">{{errMess1}}</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户密码:</label>
              <input type="password" placeholder="请输入密码" v-model="password" @blur="checkPassword"/>
            </div>
            <span class="errMess">{{errMess2}}</span>
          </div>
          <div class="form-item">
            <div>
              <label>确认密码:</label>
              <input type="password" placeholder="请输入确认密码" v-model="confimpassword" @blur="checkConfimPassword"/>
            </div>
            <span class="errMess">{{errMess3}}</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户邮箱:</label>
              <input type="text" placeholder="请输入邮箱" v-model="email" @blur="checkEmail"/>
            </div>
            <span class="errMess">{{errMess4}}</span>
          </div>

          <div class="form-item">
            <div>
              <label>验证码:</label>
              <div class="verify">
                <input type="text" placeholder="" />
                <img src="../../static/img/code.bmp" alt="" height="50px"/>
              </div>
            </div>
            <span class="errMess">请输入正确的验证码</span>
          </div>
          <button class="btn">注册</button>
        </form>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
  </div>

    <script>
        new Vue({
          el:"#app",
          data:{
            username:'',
            errMess1:"用户名应为6~16位数组和字母组成",
            password:'',
            errMess2:"密码的长度至少为8位",
            confimpassword:'',
            errMess3:"两次输入的密码不同",
            email:'',
            errMess4:"请输入正确的邮箱格式",
          },
          methods:{
            checkUsername:function () {
              var usernameReg = /^[a-zA-Z0-9]{6,16}$/
              if (usernameReg.test(this.username)){
                  this.errMess1 = '√'
                  return true
              }else {
                this.errMess1='用户名应为6~16位数组和字母组成'
                return false
              }
            },
            checkPassword:function () {
              var passwordReg=/^[a-zA-Z0-9]{8,}$/
              if (passwordReg.test(this.password)){
                this.errMess2 = '√'
                return true
              }else {
                this.errMess2 = "密码的长度至少为8位"
                return false
              }
            },
            checkConfimPassword:function () {
                if (this.checkPassword()){
                  if (this.confimpassword == this.password){
                    this.errMess3 = '√'
                    return true
                  }else {
                    this.errMess3 = '两次输入的密码不同'
                    return false
                  }
                }
            },
            checkEmail:function () {
                var emailReg=/^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/;
                if (emailReg.test(this.email)){
                  this.errMess4 = '√'
                  return true
                }else {
                  this.errMess4 = '请输入正确的邮箱格式'
                  return false
                }
            },
            checkAll:function () {
                if (!this.checkUsername()&this.checkPassword()&this.checkConfimPassword()&this.checkEmail()){
                  event.preventDefault()
                }
            }
          }
        })

    </script>
  </body>
</html>

 

 

听~宇
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 表单校验大全，含对象嵌套对象验证、数组格式验证、动态添加验证等
共同学习，共同成长
07-15 2210
大家好，我是码喽的自我修养！今天给大家分享vue3 表单校验大全，含对象嵌套对象验证、数组格式验证、动态添加验证规则、validateField 验证具体的某个某些字段等，由浅入深详细讲解！并提供具体代码帮助大家深入理解，彻底掌握！
vue+vue-validator 表单验证功能的实现代码
08-28
Vue.js是一个轻量级的JavaScript库，它提供了一种声明式、组件化的开发方式，而vue-validator则是一个用于Vue.js的表单验证工具，使得在Vue应用中处理表单验证变得更加方便。 首先，让我们看一下提供的代码示例。第...
vue表单验证—完整版本（多种验证方式）
qq_41926051的博客
04-11 5833
【代码】vue表单验证—完整版本（多种验证方式）
VUE项目中如何进行表单校验
m0_57524265的博客
05-29 1万+
本文主要讲解Form 表单的必填项校验、正则验证、自定义校验规则和兜底校验
vue 的表单验证
目标架构师
03-23 1万+
1.使用包裹整个表单 在其中使用:model 绑定数据 和 :rules绑定校验规则 2.在script中添加使用数据 以及 校验规则（都添加在data中） 3.在input应该被el-from-item包裹 传入prop （prop对应校验数据） 4.数据提交校验 在中使用ref （校验失败就不会发送请求）ref：本页面获取dom元素
十二、表单验证技术
qq_52916408的博客
04-19 3391
文章目录十二、表单验证技术12.1 表单验证概述12.2 表单验证方式12.2.1 编程式表单验证(基本不用)12.2.2 正则表达式表单验证12.2.2.1 正则表达式元字符12.2.2.2 正则表达式限定符12.3 JS 中常用事件12.4 常用函数 十二、表单验证技术 12.1 表单验证概述 <1> 表单验证指在客户端中对用户输入的数据进行有效性(合法性)检测;检测不通过不让提交给服务端；检测通过后才让数据提交给服务端以这种方式来降低服务端的压力; <2> 有效性主要指：
JavaScript之表单验证
weixin_64938628的博客
03-06 1万+
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。 目录 一.简单的表单验证 验证方式一: 验证方式二： 二.正则验证 一.正则的规则 内容 次数 二.正则的注意事项 三.二级联动 一.简单的表单验证 验证方式一: <html> <head> <meta charset="UTF-8"> <title>Title&...
vue-form表单验证是否为空值的实例详解
10-16
总结一下，这个 Vue-form 表单验证实例展示了如何利用 Vue 的响应式系统和事件处理来实现表单验证。通过绑定数据、监听表单事件以及编写验证逻辑，我们可以创建出一个能够有效处理用户输入并提供反馈的交互式表单。...
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
Vue-Sku-Form 是一个专为电商领域设计的前端组件，它基于 Vue.js 框架和 ElementUI 组件库，旨在提供一个高度可配置的 SKU（Stock Keeping Unit，库存单位）表单生成器。在电商网站中，SKU 通常用于唯一标识商品的...
vue-form-json:通过数组验证生成Vue表单
04-29
vue-form-json验证生成Vue表单所有字段都是必填字段，默认情况下输入文本。 提交后，将在$ root上发出带有formName和所有值的事件“ formSubmitted”。特征从数组生成表单（formFields属性） 默认情况下，布尔玛类...
VUE-shop商城源码
05-17
5. ** Element UI**：Element UI是一个基于Vue.js的UI组件库，提供了丰富的表单元素和布局组件，常用于快速搭建企业级后台界面。Vue-shop可能使用Element UI来构建界面，提供美观且响应式的用户体验。 6. ** Mock...
vue form表单验证
qq_28586135的博客
07-21 2870
vue form表单验证 非必填不能为空，并且需要正则验证 必填，正则验证，不能只输入空格验证 必填，正则验证，不能输入空格(v-model.trim) 选了多选框后必填
vue表单校验
qq_35427185的博客
03-16 6921
     vue表单校验常用方法：vue修饰符，使用第三方插件表单校验组件，本文以以elementui为例，相比官网新增了一些进阶用法：关联元素校验，异步结果校验，动态数组校验。不建议手写监听校验 1.vue表单输入修饰符 前后去除空格 <el-input type="text" v-model.trim="search" /> 只允许输入数字 <el-input v-model.number=
【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项
热门推荐
BMG-Princess
04-09 2万+
最全最全正则验证 + 表单验证 + 注意事项 一、正则验证 1.输入字母/数字/下划线： 2.请输入中英文/数字/下划线： 3.请输入中文/英文： 4.规范金额： 5.用户名不能全是数字: 6.中文： 7.非中文： 8.限制长度： 9.数字： 10.正整数及整数： 11.请输入数字(可正负) 12.请输入数字/小数点: 13.请输入0-9999 14.大写，小写，数字，特殊字符，至少上面的三种,至少八位 15.自定义校验 16.是否合法IP地址: 17.是否手
JavaScript表单验证
weixin_52629592的博客
06-14 1万+
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了IO的频率,提高了效率.在表单验证中,我们通常使用如下的验证功能:验证用户名与密码为指定格式在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等验证单选框所选内容最常见的验证单选框就是验证
2.html5表单验证
weixin_46293452的博客
03-18 1345
html5表单验证 1. html5 基本表单验证特性介绍 form表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
JavaScript表单验证表单验证
最新发布
zzb_lly的博客
04-20 474
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了频率,提高了效率.在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等。验证邮箱时是否为邮箱格式，是否添加@与符合标准的后缀名等。· 验证用户名与密码为指定格式。· 验证单选框所选内容。
如何在Vue中进行表单验证？
wzxue1984的博客
07-22 571
这只是一种实现表单验证的方式，您可以根据业务需求和个人喜好进行调整和扩展。Vue还提供了一些优秀的第三方表单验证插件，如VeeValidate和Vuelidate，可以简化表单验证的实现并提供更丰富的验证规则。方法用于在表单提交时执行相应的操作，根据错误信息判断是否继续提交或进行错误处理。来根据验证规则对表单数据进行验证，并返回错误信息。方法用于验证单个字段的值。上述代码中，通过计算属性。
JavaScript中的表单验证
ren__wei_的博客
01-10 5710
文章目录1.什么是表单验证2.常见的表单验证 1.什么是表单验证 大多数网站的注册页面中，都会要求用户输入生日，我们知道日期的格式是yyyy-MM-dd并且由数字组成，中间不允许出现字母或是其他符号，如果填写格式与日期格式不符合，name注册将失败，这种操作就是表单验证的体现。 表单验证就是js在数据被送往服务器前，对html表单中的数据进行验证的过程，在验证所有信息均符合要求之后，经表单提交到服务器由服务器进行数据处理。常见的表单验证有：表单中的必填项目、输入的邮件是否合法，输入日期是否合法等。 2.常见
vue3 vue-i18n翻译表单验证
07-20
对于Vue 3和vue-i18n的表单验证翻译，你可以按照以下步骤进行操作： 1. 首先，确保你已经正确安装并配置了Vue 3和vue-i18n。 2. 创建一个语言包文件，用于存储表单验证的翻译文本。可以将其命名为`validation.json...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值