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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
javascript实现控制div颜色
Jul 07 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
js 实现在2d平面上画8的方法
Oct 10 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分页函数
2006/07/08 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
《纸船和风筝》教学反思
2014/02/15 职场文书
优乐美广告词
2014/03/14 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript