layui之表单验证
这篇文章的表单验证我只是随便记录下,望各位看官理解
1.排序 验证
html代码
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input type="number" name="sort" autocomplete="off" min="0" max="99999" lay-verify="sort" class="layui-input">
</div>
</div>
type="number" 之后文本框的后面就出现如上图那样的效果,并且只能输入数字和小数点
js代码
layui.use([ "form", "layer" ], function() {
var form = layui.form;
var layer = layui.layer;
//表单验证
form.render();//这句一定要加,占坑
form.verify({ sort:[/^$|^[0-9]{0,5}$/, '只能是数字且范围0~99999!']//这个就是上面的排序lay-verify="sort"
,remark: function (value){
if(value.length > 200){
return '长度大于200!请重新输入';
}
}
}); });
2.金额 验证
效果和排序一样
<div class="layui-form-item">
<label class="layui-form-label">余额(元)</label>
<div class="layui-input-block">
<input type="number" name="balance" id="balance" lay-verify="money"
autocomplete="off" placeholder="单位:元"
class="layui-input" >
</div>
</div>
layui.use([ "form", "layer", "laydate" ], function() {
laydate = layui.laydate;
form = layui.form;
layer = layui.layer;// 表单验证
form.render();
form.verify({
lenth50 : function(value) {
if (value.length > 50) {
return '长度大于50!请重新输入';
}
},
lenth400 : function(value) {
if (value.length > 400) {
return '长度大于400!请重新输入';
}
},
money : function(value) {
if (value.length > 0) {
var reg = /(^[0-9]([0-9]+)?(\.[0-9]+)$)|(^(0){1}$)|(^([0-9]+)?$)/;
if (!reg.test(value)) {
return '输入格式有误';
}
}
if (value.length > 50) {
return '长度大于50!请重新输入';
}
} });
//下面这段代码主要是用于强制清除当用户输入0开头的数字,比如0000,02323,匹配到的话就为0
//如果要在layui里面 写js事件之类的代码就一定要放在use组件模块里面,这是其中一个坑!
$('#balance').bind('input propertychange', function() {
var balance = $("#balance").val();
var zero = /^(0){2,}$|^(0)([0-9])?$/;
if (zero.test(balance)) {
$('#balance').val(0);
}
});
});
就酱
layui之表单验证的更多相关文章
- layui 自定义表单验证的几个实例
*注:使用本方法请先引入layui依赖的layu.js和layui.css 1.html <input type="text" name="costbudget&q ...
- layui 自定义表单验证 以及提交表单
订购数量</span> <span style="color: red">*</span>: <input type="text ...
- 使用 layUI做一些简单的表单验证
使用 layUI做一些简单的表单验证 <form method="post" class="layui-form" > <input name ...
- 修改layui的表单手机、邮箱验证可以为空怎么实现?
修改layui的表单手机.邮箱验证可以为空 解决办法: 修改源码: 把表单验证源代码(form.js)的正则表达式改一下,例如手机的正则为:/^1d{10}$/,可以改成/^$|^1d{10} ...
- layui 表单验证汇总
1 表单自带校验 lay-verify:是表单验证的关键字有以下值供选择: required 必填项phone 手机号email 邮箱date 日期url 链接identity 身份证number 数 ...
- jQuery学习之路(8)- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- 玩转spring boot——AOP与表单验证
AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...
- form表单验证-Javascript
Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(33)-MVC 表单验证
系列目录 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可或缺的,微软的东西还是做得比较人性化的,从webform到MVC,都做到了双向验证 单单的用js实现的前端 ...
随机推荐
- GYCTF Flaskapp[SSTI模板注入 ]
题目复现传送门 学习链接: 找了个师傅的blog先学习一下基础的flask知识 https://www.freebuf.com/column/187845.html(从零学flask) 简单记录一下: ...
- 3个N加上各种运算符号结果等于6(纯属娱乐)C#
网上的题目: 题有点难 但都有解 2 2 2 = 6 3 3 3 = 6 4 4 4 = 6 5 5 5 = 6 6 6 ...
- P3759 [TJOI2017]不勤劳的图书管理员 [树套树]
树套树是什么啊我不知道/dk 我只知道卡常数w // by Isaunoya #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC o ...
- json转义处理
php把参数转成json字符串,中文会变成unicode,有部分会自动转义(添加反斜杠\) json_encode() #中文不转义对应的数字 256) json_encode($data,JSON_ ...
- centos系统mongodb安装
使用腾讯云搭服务器时,需要链接数据库,就从头开始重新安装了一遍mongodb,没想到这么麻烦,记得之前没这么麻烦. 1.下载mongodb(一篇博客的) 安装的是3.6版本 `` vim /etc/y ...
- A Simple Problem with Integers POJ - 3468 线段树区间修改+区间查询
//add,懒标记,给以当前节点为根的子树中的每一个点加上add(不包含根节点) // #include <cstdio> #include <cstring> #includ ...
- java中生成任意之间数的随机数
public static int cssjs(int a,int b) { Random rand=new Random(); int zhi; zhi=rand.nextInt(b)%(b-a+1 ...
- spark-sklearn TypeError: 'JavaPackage' object is not callable
from sklearn import svm, datasets from spark_sklearn import GridSearchCV from pyspark import SparkCo ...
- java学习笔记之IO编程—对象序列化
对象序列化就是将内存中保存的对象以二进制数据流的形式进行处理,可以实现对象的保存或网络传输. 并不是所有的对象都可以被序列化,如果要序列化的对象,那么对象所在的类一定要实现java.io.Serial ...
- Angular项目目录
0.模块介绍和基础知识 https://cloud.tencent.com/developer/section/1489514 1.如下图VSCode-- node_modules 第三方依赖包存放目 ...