layui在form表单页面通过Validform加入简单验证的方法


Posted in Javascript onSeptember 06, 2019

form简单验证

<input type="text" name="email" datatype="e" ignore="ignore" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
 datatype="e"验证邮箱
 ignore="ignore"忽略,如果填写就验证没有填入邮箱就不验证
 详情参考Validform_v5.3.2.js
 贴出一部分:
 var tipmsg={//默认提示文字;
  tit:"提示信息",
  w:{
   "*":"不能为空!",
   "*6-16":"请填写6到16位任意字符!",
   "n":"请填写数字!",
   "n6-16":"请填写6到16位数字!",
   "s":"不能输入特殊字符!",
   "s6-18":"请填写6到18位字符!",
   "p":"请填写邮政编码!",
   "m":"请填写手机号码!",
   "e":"邮箱地址格式不对!",
   "url":"请填写网址!"
  },
  def:"请填写正确信息!",
  undef:"datatype未定义!",
  reck:"两次输入的内容不一致!",
  r:"通过信息验证!",
  c:"正在检测信息…",
  s:"请{填写|选择}{0|信息}!",
  v:"所填信息没有经过验证,请稍后…",
  p:"正在提交数据…"
 }
Validform.util={
 dataType:{
  "*":/[\w\W]+/,
  "*6-16":/^[\w\W]{6,16}$/,
  "n":/^\d+$/,
  "n6-16":/^\d{6,16}$/,
  "s":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]+$/,
  "s6-18":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{6,18}$/,
  "p":/^[0-9]{6}$/,
  "m":/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/,
  "e":/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
  "url":/^(\w+:\/\/)?\w+(\.\w+)+.*$/
 },

简单的点击图标左右开关

<input type="checkbox" name="loginflag" checked lay-skin="switch" lay-filter="switchTest" lay-text="允许|禁止">

验证的设置

<input type="text" name="password" datatype="s6-18" placeholder="请输入密码" autocomplete="off" class="layui-input">

s6-18可以根据自己的长度进行自定义设置,s代表string字符串

修改layui监听事件 先验证表单

$("#signupForm").Validform({ //根据id触发
 btnSubmit:"#formSubmit", //绑定id根据id触发验证
 tiptype:3,     //第三种方式
 showAllError:true,   //显示所有的错误
 beforeSubmit:function(curform){ //验证过后执行save方法
  save();
 },
});

原layui监听

layui.use(['form'], function(){
   var form = layui.form;
   //监听提交
   form.on('submit(submitForm)', function(data){
    save();
   });
  });

以上这篇layui在form表单页面通过Validform加入简单验证的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中string转date示例代码
Nov 01 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
JavaScript中this详解
Sep 01 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 #Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 #Javascript
vue按需加载实例详解
Sep 06 #Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 #Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 #Javascript
Nuxt使用Vuex的方法示例
Sep 06 #Javascript
vue中input的v-model清空操作
Sep 06 #Javascript
You might like
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
php类
2006/11/27 PHP
如何使用Strace调试工具
2013/06/03 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
考核工作实施方案
2014/03/30 职场文书
班组长竞聘书
2014/03/31 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
1000字打架检讨书
2014/11/03 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
全国助残日活动总结
2015/05/11 职场文书
大学生十八大感想
2015/08/11 职场文书