*注:使用本方法请先引入layui依赖的layu.js和layui.css

1.html

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

2.js文件

<script type="text/javascript">
  layui.use('form', function () {
  var form = layui.form;
 
  //自定义表单验证(金额)
  form.verify({
    validateMoney: [
      /^[+]{0,1}(\d+)$/ //正则表达式
      ,'金额只能为正整数' //提示信息
    ]
  });   //自定义表单验证(地址链接)
  form.verify({
    address: [
      /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/
      ,'请输入正确的地址链接,如:https://www.baidu.com/'
    ]
  });
</script>

3.自定义函数验证

(1).带请求的函数判断: 比如验证名称是否重复

    form.verify({
'unique' : function(value, item) {
var checkValue = value.trim();
var checkResult='';
$.ajax({
url : '/bomManage/checkBomCode',
type : 'POST',
data : {
"newBomCode" : checkValue
},
datatype : 'json',
async : false,
success : function(result) {
if (!result) {
checkResult='BOM编号重复'
}
},
error : function() {
kok.message("BOM编号验证失败")
}
});
return checkResult
}
})

(2).普通函数验证

form.verify({
validateMoney: function (value) {
var result = validateMoney(value);
if (result != "Y") {
return result;
}
}
}); function validateMoney(money) {
var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
if (reg.test(money)) {
return "Y";
}
return "请输入正确的金额,且最多两位小数!";
}

layui 自定义表单验证的几个实例的更多相关文章

  1. layui 自定义表单验证 以及提交表单

    订购数量</span> <span style="color: red">*</span>: <input type="text ...

  2. Angular5+ 自定义表单验证器

    Angular5+ 自定义表单验证器 Custom Validators 标签(空格分隔): Angular 首先阐述一下遇到的问题: 怎样实现"再次输入密码"的验证(两个cont ...

  3. Angular自定义表单验证

    前端表单验证 为年龄输入框添加了两个验证,并分情况填写了提示语 <form nz-form [formGroup]="validateForm"> <nz-for ...

  4. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

  5. angular4 自定义表单验证Validator

    表单的验证条件有时候满足不了需求就可以自定义验证 唯一要求返回是ValidatorFn export interface ValidatorFn{ (c:AbstractControl):Valida ...

  6. layui之表单验证

    这篇文章的表单验证我只是随便记录下,望各位看官理解 1.排序 验证 html代码 <div class="layui-form-item"> <label cla ...

  7. element自定义表单验证

    element-ui框架下修改密码弹窗进行表单验证. 除了基础校验,密码不为空,长度不小于6字符,需求中还需校验密码由数字和字母组合. 处理代码如下: <el-dialog :visible.s ...

  8. ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证

    一.关于导航怎么设置路由 1.在el-menu这个标签的属性中添加 router ,官方文档的解释是:启用vue-router 这种模式 2.在el-menu-item标签中的index属性直接书写路 ...

  9. 自定义表单验证--jquery validator addMethod的使用

    原文地址:jquery validator addMethod 方法的使用作者:蜡笔小玄 jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目 ...

随机推荐

  1. Python学习笔记【第十篇】:Python面向对象进阶

    保护对象的属性 如果有一个对象,当需要对其进行修改属性时,有2种方法 对象名.属性名 = 数据 ---->直接修改 对象名.方法名() ---->间接修改 为了更好的保存属性安全,即不能随 ...

  2. 《http权威指南》读书笔记11

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  3. Kali学习笔记36:AVWS10的使用

    AVWS是一款商业Web扫描工具 适用于Windows操作系统 功能强大,必须掌握 AVWS11以上是Web形式,AVWS10是桌面应用形式 下载安装破解这些基本操作就不说了,百度即可 从安装好开始: ...

  4. 项目笔记:2018年4月(SpringCloud架构和SpringBoot框架)

    一.启动Euerka服务 1.在启动类里用@propertySource引入全局配置文件noteapp-service.properties: 如上图.左侧为某服务配置文件properties,右侧为 ...

  5. Go语言之Interface(二)

    使用指针接收器和值接收器实现接口 type Describer interface { Describe() } type Person struct { name string age int } ...

  6. SVN密码找回 完美方案

    问题背景 SVN(Subversion)版本管理工具.本文以Windows操作系统下使用SVN的场景. 长时间不使用SVN,可能会出现忘记了SVN密码的尴尬局面.那么,该如何找回SV密码呢? 处理思路 ...

  7. JavaScript几个作用域问题

    1. var a = 0 ; function f(){ a = 1; console.log(a); //全局变量a } console.log(a); //全局变量a f(); 输出结果为:1 1 ...

  8. web.xml配置web中的key points(上)

    一.定义 定义时注意:xml元素是区分大小写的. <web-app></web-app> 这些必须小写 二.url-pattern 1)url-pattern 的值必须以/或者 ...

  9. 【干货】利用MVC5+EF6搭建博客系统(三)添加Nlog日志、缓存机制(MemoryCache、RedisCache)、创建控制器父类BaseController

    PS:如果图片模糊,鼠标右击复制图片网址,然后在浏览器中打开即可. 一.回顾系统进度以及本章概要 目前博客系统已经数据库创建.以及依赖注入Autofac集成,接下来就是日志和缓存集成,这里日志用的是N ...

  10. 解决Linux下Jexus验证码无法显示

    1:安装mono相关字体 yum install -y dejavu-fonts-common dejavu-lgc-sans-mono-fonts 2:重启jexus /usr/jexus/jws ...