[JavaScript知识库] layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例） -> 正文阅读

[JavaScript知识库]layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例）

layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例）

案例 · 截图：

在这里插入图片描述

实例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>更改手机-排版演示</title>
  <link rel="stylesheet" href="statics/plugin/layui/css/layui.css">
  <link rel="stylesheet" href="statics/css/laycms_css/common.css">
</head>
<body>
<!-- 让IE8/9兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="layui-container mgt20">
  <div class="site-border-green">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend class="layui-font-green">更改手机</legend>
    </fieldset>
  </div>  
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">已绑定</label>
      <div class="layui-input-inline">
        <input type="text" name="mobilephone" placeholder="177****4530" autocomplete="off" class="layui-input" disabled="">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">账号密码</label>
      <div class="layui-input-inline">
        <input type="password" name="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">请输入当前账号密码</div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">验证码</label>
      <div class="layui-input-inline">
        <input type="text" name="imgcode" lay-verify="required|imgcode" placeholder="请输入图形验证码" autocomplete="off" class="layui-input">
      </div>
      <label class="layui-form-label pdlr0 codelabel">
        <img src="statics/images/laycms_images/msgapi.png" alt="验证码">
      </label>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">新手机号</label>
      <div class="layui-input-inline">
        <input type="text" name="newmobilephone" lay-verify="required|newmobile" placeholder="请输入新手机号码" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid">
        <button type="button" class="layui-btn layui-btn-xs">发送验证码</button>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">短信验证码</label>
      <div class="layui-input-inline">
        <input type="text" name="smscode" lay-verify="required|number" placeholder="请输入短信验证码" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">请输入手机收到的验证码</div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="mobileChangeButton">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
  
</div>
 


 
<script src="statics/plugin/layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');

  //自定义验证规则
  form.verify({
      pass: [
        /^[\S]{6,20}$/
        ,'密码必须6到20位，且不能出现空格'
      ]
      ,imgcode: function(value){
        if(value.length != 5){
          return '图形验证码必须是5个字符啊';
        }
      }
      ,
      newmobile: function(value){
        if(value.length != 11){
          return '新手机号必须为11位合法数字';
        }
        var reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
        if(reg.test(value)){
          // return '手机号码格式正确';
        }else{
          return '非法手机号';
        }
      }
      ,smscode: function(value){
        if(value.length != 6){
          return '短信验证码必须是6个字符啊';
        }
      }
      // ,repass: function(value){
      //   var data = form.val('loginregform');
      //   if((JSON.stringify(value))!=(JSON.stringify(data.password))){
      //     return '两次密码不一致';
      //   }
      // }
      // ,email: function(value){
      //   if(value.length < 7){
      //     return '邮箱至少得7个字符啊';
      //   }
      //   var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      //   if(reg.test(value)){
      //     // return '邮箱格式正确';
      //   }else{
      //     return '邮箱格式不正确';
      //   }
      // }
    });

  //监听提交
  form.on('submit(mobileChangeButton)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script> 
</body>
</html>

代码解析：

上述代码中<input type="text" name="newmobilephone" lay-verify="required|newmobile" placeholder="请输入新手机号码" autocomplete="off" class="layui-input">，我们看到其中代码:

自定义验证规则
<input type="text" name="newmobilephone" lay-verify="required|newmobile" placeholder="请输入新手机号码" autocomplete="off" class="layui-input"> 

等同于
<input type="text" name="newmobilephone" required lay-verify="newmobile" placeholder="请输入新手机号码" autocomplete="off" class="layui-input">

也可以使用layui自带的验证规则，如下：
<input type="text" name="newmobilephone" lay-verify="required|phone" placeholder="请输入新手机号码" autocomplete="off" class="layui-input">