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 相关文章推荐
最佳JS代码编写的14条技巧
Jan 09 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
JS排序之快速排序详解
Apr 08 Javascript
Angular2自定义分页组件
Apr 19 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
详解Vite的新体验
Feb 22 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/03/25 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
JavaScript Split()方法
2015/12/18 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python反射用法实例简析
2017/12/22 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
师范应届生语文教师求职信
2013/10/29 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
一年级家长会邀请函
2014/01/25 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
师德先进个人材料
2014/12/20 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书