在layui框架里边针对于表单元素做了比较多的功能,下面将介绍的功能就是form模块里面自00带的表单验证功能,该功能可以在提交表单时自动验证表单。
首先要使用form模块时需要加载模块,这是所有模块都需要干的事情,否则将不能使用模块里的功能,代码如下图
加载完成后,在页面元素里的单个表单中的form元素需要加上layui定义的类‘layui-form’。
添加完后就可以在form元素里添加表单元素了,当添加完表单元素后,在表单元素里添加layui定义的属性‘lay-verify’,其作用就是添加表单验证功能,而该属性的属性值则是验证的规则,如下图。
在layui里边自带的表单验证则有以下required(必填)、phone(电话)、email(邮箱)、url(网址)、mumber(数字)和identity(身份证),除此之外layui还支持自定义验证规则,如下图。
现在验证的方式了解了,那么怎么触发这些验证呢,这就需要到表单提交的监听了,这也是form模块的一部分,当处于表单中的按钮被点击了,这个表单里边的所有带验证的表单元素就会自动验证,并返回数据到监听事件里。代码如下图
现在写完了简单的代码后去页面看看效果如何吧
当验证未通过时,页面会提示并且控制器没有任何输出
当验证通过时,控制器将会输出表单验证成功的值