Layui表单验证

最新推荐文章于 2024-08-11 15:42:10 发布

武候邢

最新推荐文章于 2024-08-11 15:42:10 发布

阅读量739

点赞数

文章标签： Layui插件

本文链接：https://blog.csdn.net/weixin_44543131/article/details/96422083

版权

1:引用layui的两个文件：

2：因为是表单验证，所以只有在表单里面才起效果，先来布局：首先，放一个最外层的盒子把所有元素包裹起来，容易布局，引用layui的一个类：‘ayui-form-item’,然后，再在里面放一个form表单，这里需要注意的是，必须在form表单上放一个类：‘layui-form’，不然后面的验证都不会有效果，然后还有一个元素：‘lay-filter="component-form-group"’。接下来来看看第一个验证：‘必填项’：

验证必填项

3：先说明一下：这里所有的验证都是靠：‘lay-verify’这个元素，它的值不同，那么验证的东西也不同，而且单单这一步是不行的，看不出来效果，表格肯定是提交的时候才去验证，所以，需要在尾部写一个提交按钮，并且给上：‘lay-submit="" lay-filter="component-form-demo1"’这两个元素，并且给它一个类：‘layui-btn’，也就是：

浏览器效果截图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/201907180753014.png) 当点击立即提交按钮时，如果必填项为空，它就会提示，必填项不能为空，而且自动把焦点跳到输入框让你输入。 4：再来看看其他的验证：。多规则验证，只能输入数字；。验证用户名。验证手机号。验证邮箱。验证身份证。验证日期。验证链接等等等等。。。使用的方法都跟上面的必填项验证一样的。