layui 手机_使用正则layui框架做个QQ验证

最新推荐文章于 2023-11-30 17:27:13 发布
最新推荐文章于 2023-11-30 17:27:13 发布
阅读量203 收藏
点赞数
文章标签： layui 手机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_26854829/article/details/113085928
版权

前端验证 QQ注册 layui 正则表达式 前端开发
关键词由CSDN通过智能技术生成

064b3dd7824907c3e14f079439e181d6.png

DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Documenttitle>

    <link rel="stylesheet" href="./layui/css/layui.css"  media="all">

    <style>

        a{

            text-decoration: none;

            color: skyblue;

        }

        .w{

            display: flex;

            flex-direction: column;

            height: 500px;

            width: 370px;

            margin: 0 auto;

        }

        h1{

            font-size: 50px;

            margin-bottom: 15px;

            /* flex: 1; */

        }

        h3{

            display: flex;

            justify-content:space-between;

            margin-bottom: 15px;

        }

        .messages{

            /* display: none; */

            margin-left: 50px;

            text-align:left;

            margin-bottom: 15px;

        }

        .name{

            height: 75px;

        }

        .name input{

            width: 70%;

            height: 38%;

        }

        .passworld{

        }

        .passworld input{

            width: 70%;

            height: 38%;

        }

        .phone input{

            width: 200px;

            margin-left: 50px;

            margin-bottom: 15px;

        }

        .test{

            display: flex;

        }

        .test input{

            /* flex: 1; */

            width: 200px;

            margin-left: 50px;

            margin-right: 10px;

        }

        .register{

            height: 100px;

            display: flex;

            justify-content: center;

            align-items: center;

            /* flex: 1; */

        }

        .register button{

            /* width: 80%;

            height: 70%; */

            width: 320px;

        }

    style>

head>

<body>

    <div class="w">

        <h1>欢迎注册QQh1>

       <h3>每一天,乐在沟通<div><a href="#">免费靓号a>div>h3> 

       <form class="layui-form">

        <div class="layui-form-item">

            <input type="text" name="username" required lay-verify="required" placeholder="请输入QQ" autocomplete="off" class="layui-input username">    

        div>

        <div class="layui-form-item">

            <input type="text" name="title" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input passworld">    

          div>

       <div class="messages">

           <p>不能包括空格p>

           <p>长度为8-16个字符p>

           <p>必须包含字母、数字、符号中至少两种p>

       div>

      <div class="phone">

        <input type="text" name="title" required lay-verify="required" placeholder="请输入手机号码" autocomplete="off" class="layui-input iphone">    

      div>

      <div class="test">

        <input type="text" name="title" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">    

        <button type="button" class="layui-btn layui-btn-normal" onclick="phonetest()">发送验证码button>div>

      <div class="register">

        <button type="button" class="layui-btn layui-btn-normal" onclick="caonima()">立即注册button>

      div>

     form>

    div>

    <script src="js/jquery-2.0.0.min.js">script>

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

   <script>

       var reg = /^[a-zA-Z0-9_-]{6,12}$/

       var username1 =  /[\u4E00-\u9FA5]/

       var phonenum = /^1(3|4|5|6|7|8|9)\d{9}$/

       var username = document.querySelector('.username')

       var passworld = document.querySelector('.passworld')

       var iphone = document.querySelector('.iphone')

       username.onblur = function nametest() {

           if(username1.test(this.value)){

               layer.msg('yes')

           }else{

            layer.msg('error')

           }

       }

       passworld.onblur = function() {

        if(reg.test(this.value)){

           }else{

            layer.msg('密码错误')

           }

       }

       function phonetest() {

           if(phonenum.test(iphone.value)){

            layer.msg("大吉大利")

           }else {

            layer.msg('手机号码错误')

           }

       }

       function caonima() {

        if(reg.test(username.value) && reg.test(passworld.value)){

               layer.msg('yes')

           }else{

            layer.msg('error')

           }

       }

   script>

body>

html>

hitomo
关注
layui 正则表达式验证使用实例详解
10-15
layui的正则表达式是在form表单中完成的，这篇文章主要介绍了layui 正则表达式验证使用教程，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
html验证座机号码_使用正则layui框架做个QQ验证
weixin_30988079的博客
12-03 223
DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Documenttitle&gt...
layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例）
草巾冒小子的博客
07-31 5375
layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例） 案例 · 截图： 实例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>更改手机-排
在vue中input标签手机号码进行正则验证
weixin_44986077的博客
08-01 1万+
今天遇到一个问题就是在vue中给input进行正则手机号码的验证 下面是今天的代码，用js进行书写，没有用elementUI，代码如下： <!-- 申报手机号 --> <div class="phonea"> <span>申报手机号</span> <input class="pho...
多输入框输入（验证手机号码）
weixin_30765475的博客
08-19 418
在日常工作中，很多时候需要表单验证。在下面这个表单中，需求是：在输入框失去焦点时验证所填入的手机号码。点击输入框后面的⊕可以进行下一个手机号码的输入并验证。 html代码： 1 <table id="addCustomer"> 2 <tr> 3 <td class="w70">客户姓名</td> 4 <td> 5...
layui:输入邮箱号或者手机号验证（同时验证，输入其中之一可校验通过）
最新发布
weixin_51406702的博客
11-30 1181
最近接到一个需求，要求不管输入邮箱号还是电话号都要校验，并且输入其中之一可校验通过。
tikhonov.zip_L曲线正则化_Tikhonov 正则化_Tikhonov正则化_tikhonov_正则化
07-15
这个压缩包“tikhonov.zip”包含的内容显然与这一主题相关，可能包括理论介绍、实现代码、示例分析以及L曲线正则化的应用。 Tikhonov正则化是通过在目标函数中添加一个正则项（通常是模型参数的平方和）来限制模型...
LM.rar_LM BP_bp正则化_正则化 bp_贝叶斯_贝叶斯正则化
09-14
标题中的“LM.rar_LM BP_bp正则化_正则化_bp_贝叶斯_贝叶斯正则化”指的是一个关于使用L-M（Levenberg-Marquardt）优化算法来实现BP（Backpropagation）神经网络的正则化的教程或资料集，其中包含了贝叶斯正则化的...
ADMM-MATLAB.rar_ADMM重建_正则 重建_正则化 matlab_稀疏 正则_稀疏正则
07-14
结合ADMM和TV正则化，我们可以构建一个有效的稀疏重建框架。在MATLAB中，实现这个框架通常包括以下步骤： 1. **问题定义**：设定目标函数，即数据拟合项与TV正则化的组合，形成一个优化问题。 2. **ADMM参数初始化*...
layui 一行多列控件时使用table布局结构清晰，代码简洁
xiaozaq的博客
07-16 5563
当使用多列布局时，使用div+css布局感觉代码不好控制，使用table结构清晰，布局简洁，不用写一堆的css来定位，控制大小的。 例子： html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="widt...
layui问题汇总
什么都干的派森
05-05 3342
问题索引： 1.form表单 1.form表单 html: <form class="layui-form" action="" lay-filter="example"> <!-- ------------------------------------------ --> <div class="layui-form-item"> <la...
input框的限制(仅数字以及电话号码的限制)
weixin_30649641的博客
07-31 1343
电话号码限制 <inputtype="text"id="phone"maxlength="11"onkeyup="this.value=this.value.replace(/\D/g,'')"/> 两位小数点限制的js input 框中写法 <input clas="easyui-validatebox" type="text" name="expe...
layui输入框验证规则
cheers_bin的博客
08-27 1万+
1、验证必填项：lay-verify=”required” 2、数字验证：lay-verify=”int” 3、验证用户名：lay-verify=”username” 4、验证手机号：lay-verify=”phone” 5、验证邮箱：lay-verify=”email” 6、验证身份证：lay-verify=”identity” 7、验证日期：lay-verify=”date” 8、验证链接：lay-verify=”url” 9、自定义密码验证：lay-verify=”pass” ...
“手机号码输入控件“实现
iteye_9998的博客
10-29 378
&lt;! DOCTYPE html&gt; &lt; html&gt; &lt; head&gt; &lt; meta charset= "utf-8" /&gt; &lt; title&gt;手机号码格式化&lt;/title&gt; &lt; script type= "text/javas
layui实现添加
weixin_52994410的博客
05-14 4213
需要使用开启头部标题栏的数据表格 新增数据 1.设置添加按钮 <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-sm" id="add" lay-event="add">添加</button> </div&g
layui的lay-verify 验证使用自带的email phone时候不填不验证，填写了才验证
肖肖肖丽珠的博客
07-15 6445
<input type="tel" name="contacttel" lay-verify="phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input" > 我我没用写required，因为这里希望有电话验证没有就不验证。 但是这么写却在没有填写的时候提示请输入正确的手机号。可能是他觉得手机号是空...
layui表单验证 && 内置自定义规则 - 使用说明
热门推荐
草巾冒小子的博客
01-24 3万+
关于 layui表单的验证规则、调用、自定义规则的使用经验总结： 除了 layui 本身配套的一个验证体系，还支持开发者自定义验证规则（如上表中的【自定义密码验证（代码参考下文）】），并直接嵌入到页面的js代码中。 验证表单对象 · 都有哪些？ 如何调用规则和验证？ 如下表所示： 验证表单对象 / 元素 部分重要验证规则的设定 代码调用实例（参考下文的代码实例） 其他注解说明 ...
layui的form.val中的单选按钮动态赋值无效解决
qq_39187822的博客
04-20 9201
在使用layui的form.val对单选框进行动态赋值时发现单选框赋值无效果，经过多次排查，发现动态赋值为1,在form.val写为固定值 ‘1’ 单选框可用，动态时不行，最后只得判断值然后输出固定值，代码在下面 js代码 $.ajax({ url : "接口名称", data : { ...
LayUi做登录注册
weixin_44389353的博客
03-25 1万+
LayUi登录注册页面附代码登录页面注册页面附加CSS，JS代码 登录页面 下面展示登录页面 代码如下。 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" class="loginHtml"> <head> <meta charset="utf-8"> <titl...
使用Java正则表达式验证邮箱、IP地址、手机号码
手机号码验证是指通过正则表达式来检查一个字符串是否符合手机号码的格式。手机号码的格式通常是十一位数字，前三位是地区码，后八位是号码。下面是一个简单的手机号码验证正则表达式： ```java String mobileRegex...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值