layui 表单标签的校验方法


Posted in Javascript onSeptember 04, 2019

layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。

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

同时支持多条规则的验证,格式:lay-verify=”验证A|验证B”

如:lay-verify=”required|phone|number”

另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-verify=”pass”,那么你就需要借助form.verify()方法对pass进行一个校验规则的定义

示例:

<div class="layui-form-item">
  <label for="" class="layui-form-label">请输入邮件</label>
  <div class="layui-input-block">
   <input type="text" placeholder="请输入邮件" lay-verify="email" class="layui-input">
  </div>
 </div>

填入非法邮件时,点击提交会有笑脸图标提示,挺棒的!

自定义校验:

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位,且不能出现空格'
 ] 
});

当你自定义了类似上面的验证规则后,你只需要把key赋值给输入框的 lay-verify 属性即可:

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

以上这篇layui 表单标签的校验方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript demo 基本技巧
Dec 18 Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
javascript实现切换td中的值
Dec 05 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 #Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 #Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 #Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 #Javascript
vue-loader中引入模板预处理器的实现
Sep 04 #Javascript
解决layer图标icon不加载的问题
Sep 04 #Javascript
JSX在render函数中的应用详解
Sep 04 #Javascript
You might like
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
微信支付开发告警通知实例
2016/07/12 PHP
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
详解Python中time()方法的使用的教程
2015/05/22 Python
JSON Web Tokens的实现原理
2017/04/02 Python
神经网络python源码分享
2017/12/15 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
python将字母转化为数字实例方法
2019/10/04 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
企业党员一句话承诺
2014/05/30 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
《风筝》教学反思
2016/02/23 职场文书