菜单

表单标签的校验方法_javascript技巧_脚本之家

2020年4月7日 - 首页

在互连网见到数不胜数validform和layer合营的认证格局,可是认为写的不佳,不清不楚的,于是讨论了须臾间layui原生的证实

layui表单成分的校验只需在要素上步向lay-verify,layui提供了以下值。

1. 在须要验证的item上加 lay-verify=“value” ,在付给按钮上加 lay-submit
lay-filter=“go” 多少个属性

requiredemaildate自定义值

表单标签的校验方法_javascript技巧_脚本之家。value:

再者扶助多条法规的认证,格式:lay-verify=”验证A|验证B”

requiredemaildate自定义值

澳门太阳集团,如:lay-verify=”required|phone|number”

PS :layui要接收form 得用use…那样的事物,作者就不做评释了

此外,除了大家松开的校验法规,你还能给她设定大肆的值,例如lay-verify=”pass”,那么您就需求依据form.verify(卡塔尔(قطر‎方法对pass举办三个校验准绳的定义

layui.use{ var form = layui.form(); //只有执行了这一步,部分表单元素才会修饰成功

示例:

2. 说一下自定义表明

 请输入邮件    

在那写自定义的表明法规,“username”和“pass”是自定义表达准则的名字,就前边面包车型地铁”required”,”phone”…雷同,在那间定义好注脚的名字和认证法规,

填入违规邮件时,点击提交会有笑容Logo提醒,挺棒的!

动用的章程就跟”required”,”phone”…相似同等的

自定义校验:

form.verify({ username: function{ //value:表单的值、item:表单的DOM对象 if(!new RegExp("^[a-zA-Z0-9_u4e00-u9fa5\s·]+$").test{ return '用户名不能有特殊字符'; } if/.test{ return '用户名首尾不能出现下划线'_''; } if(/^d+d+d$/.test{ return '用户名不能全为数字'; } } //我们既支持上述函数式的方式,也支持下述数组的形式 //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字] ,pass: [ /^[S]{6,12}$/,'密码必须6到12位,且不能出现空格' ] });
form.verify({ username: function{ //value:表单的值、item:表单的DOM对象 if(!new RegExp("^[a-zA-Z0-9_u4e00-u9fa5\s·]+$").test{ return '用户名不能有特殊字符'; } if/.test{ return '用户名首尾不能出现下划线'_''; } if(/^d+d+d$/.test{ return '用户名不能全为数字'; } } //我们既支持上述函数式的方式,也支持下述数组的形式 //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字] ,pass: [ /^[S]{6,12}$/ ,'密码必须6到12位,且不能出现空格' ] });

3. 证实通过了就接触提交

当你自定义了近似下面的求证法则后,你只必要把key赋值给输入框的 lay-verify
属性就能够:

‘submit’那么些实际上就是绑定“提交开关”,还记得首先步让您加的多少个属性吧
lay-submit lay-filter=“go” ,懂了吧!go是能够任由写的

以上那篇layui
表单标签的校验方法正是我分享给大家的全体内容了,希望能给大家三个参谋,也可望大家多都赐教脚本之家。

此间指的一提的是data.田野同志那个事物,它会获得全体表单字段,名值对方式:{name: value},

那样我们在发送ajax的时候就没有必要自个儿去采撷表单的字段值了

form.on', function{ //console.log;//被执行事件的元素DOM对象,一般为button对象 //console.log;//被执行提交的form对象,一般在存在form标签时才会返回 //console.log; //当前容器的全部表单字段,名值对形式:{name: value} //发送ajax return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。});});

上述那篇layui原生表单验证的实例正是小编分享给大家的全体内容了,希望能给大家三个参照,也期望我们多多照看脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图