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 相关文章推荐
初识JQuery 实例一(first)
Mar 16 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
php 文件上传实例代码
2012/04/19 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
介绍Python的Django框架中的QuerySets
2015/04/20 Python
python 排序算法总结及实例详解
2016/09/28 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
基于pandas中expand的作用详解
2019/12/17 Python
python中关于数据类型的学习笔记
2020/07/19 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
大三在校生电子商务求职信
2013/10/29 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
诚信考试标语
2014/06/24 职场文书
先进班集体事迹材料
2014/12/25 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS