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:void(0)的真正含义实例分析
Aug 20 Javascript
javascript removeChild 使用注意事项
Apr 11 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
js实现弹窗猜数字游戏
Nov 26 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
apache配置虚拟主机的方法详解
2013/06/17 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
js继承实现方法详解
2016/12/16 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
vuex实现购物车功能
2020/06/28 Javascript
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
中专毕业生个人职业生涯规划
2014/02/19 职场文书
房屋继承公证书
2014/04/10 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
零基础学java之循环语句的使用
2022/04/10 Java/Android