Layui自定义验证规则(Layui自定义固话验证,支持五位数的座机如12306)

0 前言

在开发中,我们经常需要对一些输入数据通过正则表达式进行有效性验证,基于Layui框架开发下,Layui框架本身已经集成了一些基础的验证,这对我们在前端验证输入的有效性非常便捷,如我们需要验证邮箱的话,可以直接在该input域添加 lay-verify=” email”,这样该input域就会验证邮箱的有效性。目前Layui支持的验证规则有:required(必填项);phone(手机号);email(邮箱);url(网址);number(数字);date(日期);identity(身份证),同时他也支持多组合验证,详细见图:

 

(https://www.layui.com/doc/modules/form.html)

此外,我们还会遇到一些自定义的验证需求,如我们验证固定电话号码有效性,上面基础的验证需求满足不了项目的实际需求,需要我们重新自定义验证规则,然后适配到控件中。

Layui是支持我们自己定义并编写正则表达式验证有效性需求的,详细可以查看https://www.layui.com/doc/modules/form.html#verify。本文下面将通过自定义验证固话的规则演示。

1 自定义固定电话验证规则

(1)定义验证规则

如果我们需要自定义验证规则

// 验证规则  form.verify表单验证定义
form.verify({
	//telnumber验证规则的定义
	telnumber: [
		/^((0\d{2,3})-)?(\d{5,8})(-(\d{3,}))?$/       // 这部分为验证正则表达式-固话验证正则表达式
		,'请输入正确的座机号码'                       // 这部分是不符合验证规则提示的错误信息
	]
});

(2)控件应用,当你自定义了类似上面的验证规则后,你只需要把 key(这个key就是定义验证规则名称,如上文的telnumber) 赋值给输入框的 lay-verify 属性即可生效

<input type="text" lay-verify=" telnumber " placeholder="请输入固话">
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章