layui 正则表达式验证使用实例详解

前言

layui的正则表达式是在form表单中完成的。所以第一步要在你的html中加上指定的form 。

官方参考文档：https://www.layui.com/doc/element/form.html

要保证引用的layui模块中有form.js存在。

快速步骤引用form.js添加form标签，并设置class属性为layui-form，不可改在要验证的属性上加lay-verify 进行验证声明layui.form 并监听提交的按钮事件 。引用js

<script src="../js/layui/layui.js" charset="utf-8"></script>

主要是保证lay.modules中有form.js存在。

也可以直接引用form.js

添加form标签

<form class="layui-form" action="">

设置要验证的属性

给lay-verify赋值

<input type="text" class="input01 border" id="IdentifyId"
name="IdentifyId" lay-verify="required|identity"/>

系统自带的属性如下：

required（必填项）
phone（手机号）
email（邮箱）
url（网址）
number（数字）
date（日期）
identity（身份证）
自定义值

如果没有想要的，可以自己写，比如

自定义验证

html标记验证的属性

<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">

自定义验证的规则

form.verify({
 username: function(value, item){ //value：表单的值、item：表单的DOM对象
 if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
 return '用户名不能有特殊字符';
 }
 if(/(^\_)|(\__)|(\_+$)/.test(value)){
 return '用户名首尾不能出现下划线\'_\'';
 }
 if(/^\d+\d+\d$/.test(value)){
 return '用户名不能全为数字';
 }
 }

 //我们既支持上述函数式的方式，也支持下述数组的形式
 //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
 ,pass: [
 /^[\S]{6,12}$/
 ,'密码必须6到12位，且不能出现空格'
 ]
});

layui -form 使用说明

1.必须要先render以后，select 才可以使用。

layui.use('form', function(){
 var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

 //……

 //但是，如果你的HTML是动态生成的，自动渲染就会失效
 //因此你需要在相应的地方，执行下述方法来进行渲染
 form.render();
});

提交按钮

<button type="button" class="layui-btn layui-btn-norma"
lay-submit lay-filter="submit_button">确定下单</button>

js自定义验证的js和提交时的操作

layui.use('form', function(){
  var form = layui.form ;
  form.render();
  form.verify({
  payTotalAmount:[
   /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
   ,'请输入合适的价格'
  ]

  });
  form.on("submit(submit_button)", function () {
  onclickSearch();
  });

到此这篇关于layui 正则表达式验证使用的文章就介绍到这了,更多相关正则表达式验证内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Javascript正则表达式验证账号、手机号、电话和邮箱的合法性

    正则表达式是用于匹配字符串中字符组合的模式.在 JavaScript中,正则表达式也是对象.这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match.replace.search 和 split 方法.本章介绍 JavaScript正则表达式. 1.验证帐号是否合法 验证规则:字母.数字.下划线组成,字母开头,4-16位. function checkUser(str){ var re = /^[a-zA-z]\w{3,15}$/; if(re.tes

  • Java使用正则表达式验证用户名和密码的方法

    要求: 用户名: 必须是6-10位字母.数字.下划线(这里字母.数字.下划线是指任意组合,没有必须三类均包含) 不能以数字开头 密码: 必须是6-20位的字母.数字.下划线(这里字母.数字.下划线是指任意组合,没有必须三类均包含) 效果展示: package cn.zyq.Aug05; import java.util.Scanner; public class Demo1 { public static void main(String[] args) { Scanner sc = new S

  • 2019手机号码JS正则表达式验证实例代码

    概念 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串的一种过滤逻辑. 简介 正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"))操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串

  • JS中验证整数和小数的正则表达式

    验证整数和小数的正则表达式 网上很多关于验证小数的正则表达式,但是很多都不是百分百正确,所以我结合一些前辈的经验,自己写了一个. 验证非0开头的无限位整数和小数.整数支持无限位,小数点前支持无限位,小数点后最多保留两位. js代码如下: var reg = /^(([^0][0-9]+|0)\.([0-9]{1,2})$)|^([^0][0-9]+|0)$/; 单独拆分: 1. 整数:/^([^0][0-9]+|0)$/ 2. 小数:/^(([^0][0-9]+|0)\.([0-9]{1,2})

  • Java常用正则表达式验证类完整实例【邮箱、URL、IP、电话、身份证等】

    本文实例讲述了Java常用正则表达式验证类.分享给大家供大家参考,具体如下: package com.fsti.icop.util.regexp; import java.util.regex.Matcher; import java.util.regex.Pattern; public final class RegExpValidatorUtils { /** * 验证邮箱 * * @param 待验证的字符串 * @return 如果是符合的字符串,返回 <b>true </b&g

  • Js中使用正则表达式验证输入是否有特殊字符

    Js中使用正则表达式验证输入是否有特殊字符的代码如下所示: //验证是否有特殊字符 function checkval(t) { var re = /^[\u4e00-\u9fa5a-z]+$/gi;//只能输入汉字和英文字母 if (re.test(t)) { return true; } else { return false; } }  js正则表达式,验证同一字符串不同 var num = 888; var reg = /^[1-9]{1}[0-9]*$/g; console.log(r

  • Java使用正则表达式验证手机号和电话号码的方法

    一个朋友需要,所以写了这两个,话不多说,看代码 中国电信号段 133.149.153.173.177.180.181.189.199 中国联通号段 130.131.132.145.155.156.166.175.176.185.186 中国移动号段 134(0-8).135.136.137.138.139.147.150.151.152.157.158.159.178.182.183.184.187.188.198 其他号段 14号段以前为上网卡专属号段,如中国联通的是145,中国移动的是147

  • layui 正则表达式验证使用实例详解

    前言 layui的正则表达式是在form表单中完成的.所以第一步要在你的html中加上指定的form . 官方参考文档:https://www.layui.com/doc/element/form.html 要保证引用的layui模块中有form.js存在. 快速步骤引用form.js添加form标签,并设置class属性为layui-form,不可改在要验证的属性上加lay-verify 进行验证声明layui.form 并监听提交的按钮事件 .引用js <script src="../

  • Mongo复制集同步验证的实例详解

    mongo复制集同步验证的实例详解 第一步:在主节点上插入一条数据 Sql代码 rs0:PRIMARY> use imooc switched to db imooc rs0:PRIMARY> db.imooc.insert({"name":"imooc"}) WriteResult({ "nInserted" : 1 }) 第二步:在从节点查看数据,看是否同步 Sql代码 rs0:SECONDARY> use imooc sw

  • JSP开发中Apache-HTTPClient 用户验证的实例详解

    JSP开发中Apache-HTTPClient 用户验证的实例详解 前言: 在微服务框架之外的系统中,我们经常会遇到使用httpClient进行接口调用的问题,除了进行白名单的设置,很多时候我们需要在接口调用的时候需要身份认证.翻了一下官方文档,解决方法很多,但是都不太符合实际业务场景,这里提供一种简单粗暴的解决方法. 解决方法:利用请求头,将验证信息保存起来. 实现代码: public class HttpClientUtils { protected static final Logger

  • Java身份证验证方法实例详解

    Java身份证验证方法实例详解 身份证号码验证 1.号码的结构 公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成.排列顺序从左至右依次为:六位数字地址码, 八位数字出生日期码,三位数字顺序码和一位数字校验码. 2.地址码(前六位数) 表示编码对象常住户口所在县(市.旗.区)的行政区划代码,按GB/T2260的规定执行. 3.出生日期码(第七位至十四位) 表示编码对象出生的年.月.日,按GB/T7408的规定执行,年.月.日代码之间不用分隔符. 4.顺序码(第十五位至十七位) 表示在同

  • js中自定义react数据验证组件实例详解

    我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题.如果用户提交的数据不合法,例如格式不正确.非数字类型.超过最大长度.是否必填项.最大值和最小值等等,我们需要在相应的地方给出提示信息.如果用户修正了数据,我们还要将提示信息隐藏起来. 有一些现成的插件可以让你非常方便地实现这一功能,如果你使用的是knockout框架,那么你可以借助于Knockout-Validation这一插件.使用起来很简单,例如我下面的这一段代码: ko.validation.locale('zh-CN');

  • python 正则表达式参数替换实例详解

    正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re 模块使 Python 语言拥有全部的正则表达式功能. compile 函数根据一个模式字符串和可选的标志参数生成一个正则表达式对象.该对象拥有一系列方法用于正则表达式匹配和替换. re 模块也提供了与这些方法功能完全一致的函数,这些函数使用一个模式字符串做为它们的第一个参数. 本章节主要介绍python 正则表达式参数替

  • sklearn和keras的数据切分与交叉验证的实例详解

    在训练深度学习模型的时候,通常将数据集切分为训练集和验证集．Keras提供了两种评估模型性能的方法: 使用自动切分的验证集 使用手动切分的验证集 一．自动切分 在Keras中,可以从数据集中切分出一部分作为验证集,并且在每次迭代(epoch)时在验证集中评估模型的性能． 具体地,调用model.fit()训练模型时,可通过validation_split参数来指定从数据集中切分出验证集的比例． # MLP with automatic validation set from keras.mode

  • Golang基于JWT与Casbin身份验证授权实例详解

    Golang基于JWT与Casbin身份验证授权实例详解

    目录 JWT Header Payload Signature JWT的优势 JWT的使用场景 Casbin Casbin可以做什么 Casbin不可以做什么 Casbin的工作原理 实践 登录接口请求 Token实现 使用Redis存储Token信息 用Casbin做授权管理 实现Casbin的策略 创建Todo JWT JSON Web Toekn(JWT)是一个开放标准RFC 7519,以JSON的方式进行通信,是目前最流行的一种身份验证方式之一. eyJhbGciOiJIUzI1NiIs

  • Yii2框架数据验证操作实例详解

    本文实例讲述了Yii2框架数据验证操作.分享给大家供大家参考,具体如下: 一.场景 什么情况下需要使用场景呢?当一个模型需要在不同情境中使用时,若不同情境下需要的数据表字段和数据验证规则有所不同,则需要定义多个场景来区分不同使用情境.例如,用户注册的时候需要填写email,登录的时候则不需要,这时就需要定义两个不同场景加以区分. 默认情况下模型的场景是由rules()方法申明的验证规则中使用到的场景决定的,也可以通过覆盖scenarios()方法来更具体地定义模型的所有场景,例如: public

  • PHP正则表达式笔记与实例详解

    PHP正则表达式笔记与实例详解

    本文实例讲述了PHP正则表达式笔记与实例.分享给大家供大家参考,具体如下: 这里主要介绍如何在PHP使用正则表达式,并附带几个实例. 这两天工作用到了正则表达式,发现自己已经忘记的差不多了,囧啊!找来以前的学习笔记,好好看了一下,又巩固了这些知识,工作算是完成了,不过正则要学的东西还是蛮多的,以下是整理的以前的笔记和一些实例! 笔记: 一.正则表达式的介绍: 正则表达式是用于描述字符排列和匹配模式的一种语法规则.它主要用于字符串的模式分割.匹配.查找及替换操作.     1. 用途:匹配.查找.

随机推荐