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用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php 动态添加记录
2009/03/10 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
php遍历目录方法小结
2015/03/10 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
javascript表单验证大全
2015/08/12 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Django自定义过滤器定义与用法示例
2018/03/22 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Python龙贝格法求积分实例
2020/02/29 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
python中的错误如何查看
2020/07/08 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
学习十八大精神心得体会
2013/12/31 职场文书
事业单位接收函
2014/01/10 职场文书
公积金转移接收函
2014/01/11 职场文书
大学生先进事迹材料
2014/02/16 职场文书
学生吸烟检讨书
2014/09/14 职场文书
离婚协议书范文2014
2014/10/16 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android