100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Layui框架form模块的表单验证

Layui框架form模块的表单验证

时间:2020-06-26 10:29:59

相关推荐

Layui框架form模块的表单验证

在layui框架里边针对于表单元素做了比较多的功能,下面将介绍的功能就是form模块里面自00带的表单验证功能,该功能可以在提交表单时自动验证表单。

首先要使用form模块时需要加载模块,这是所有模块都需要干的事情,否则将不能使用模块里的功能,代码如下图

加载完成后,在页面元素里的单个表单中的form元素需要加上layui定义的类‘layui-form’。

添加完后就可以在form元素里添加表单元素了,当添加完表单元素后,在表单元素里添加layui定义的属性‘lay-verify’,其作用就是添加表单验证功能,而该属性的属性值则是验证的规则,如下图。

在layui里边自带的表单验证则有以下required(必填)、phone(电话)、email(邮箱)、url(网址)、mumber(数字)和identity(身份证),除此之外layui还支持自定义验证规则,如下图。

现在验证的方式了解了,那么怎么触发这些验证呢,这就需要到表单提交的监听了,这也是form模块的一部分,当处于表单中的按钮被点击了,这个表单里边的所有带验证的表单元素就会自动验证,并返回数据到监听事件里。代码如下图

现在写完了简单的代码后去页面看看效果如何吧

当验证未通过时,页面会提示并且控制器没有任何输出

当验证通过时,控制器将会输出表单验证成功的值

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。