layui自定义表单验证无效

layui自定义表单验证无效
官方文档链接：https://layui.gitee.io/v2/docs/modules/form.html#verify

自定义表单验证，需要form模块，需要引入layui.all.js文件（注意：该引入要放在自定义js文件前面），如：<script src="./lib/layui/layui.all.js"></script> <script src="./js/login.js"></script>
需验证的input标签，需要在<form></form>标签内，并且，父元素中具有layui-form，如：<form class="layui-form">
需要使用layui中的提交属性，确保提交按钮具有：lay-submit（可直接从官方文档复制）,例：<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="formDemo">注册</button>
注意多个自定义验证时，换行逗号的位置，逗号不能在末尾，会导致：验证无效，并且浏览器不报错
如下代码中：lay-verify="required | pwd"中required与pwd之间是管道符号|，
(1)pwd是自定义验证，
(2)不是空格，如错误代码lay-verify="required pwd，会导致：自定义验证无效，并且浏览器不报错

<input type="text" name="password" required  lay-verify="required|pwd"placeholder="请输入密码" autocomplete="off" class="layui-input">

完整代码参考：
例：注册页面，输入密码自定义验证为6至12个数字
html文件中

    <form class="layui-form" action=""><div class="layui-form-item"><i class="layui-icon layui-icon-username"></i>   <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div><div class="layui-form-item"><i class="layui-icon layui-icon-password"></i>   <input type="text" name="password" required  lay-verify="required|pwd" placeholder="请输入密码" autocomplete="off" class="layui-input"></div><div class="layui-form-item"><i class="layui-icon layui-icon-password"></i>   <input type="text" name="repassword" required  lay-verify=" required pwd" placeholder="再次确认密码" autocomplete="off" class="layui-input"></div><div class="layui-form-item"><button class="layui-btn layui-btn-fluid" lay-submit lay-filter="formDemo">注册</button></div><a href="javascript:;" id="login">去登录</a></form>

js文件中（使用了jqurey）

$(function{
// 自定义表单验证var form =layui.formform.verify({pwd:[/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格']})})

layui自定义表单验证无效相关推荐

Django 表单验证之自定义表单验证器
本文基于Django 表单验证一文,补充完善表单验证器之自定义表单验证器具体步骤总结如下: 第一:在formValidation.py 文件中,添加自定义名称敏感验证器(NameValidatio ...
表单验证与自定义表单验证
/ 验证规则 rules: { // 多个验证用数组单个验证用对象// 验证账号acc: [{ required: true, message: '不能为空', trigger: 'blur' }, ...
记录element-ui自定义表单验证上传身份证正反面
大概是这个样式两个上传组件写在一个form-item里进行自定义表单验证每次验证,通过判断上传组件绑定的值进行判断,callback不同的提示错误 <template><div& ...
iview自定义表单验证
@[TOC] iview自定义表单验证之前总结过iview简单表单验证: https://blog.csdn.net/A_LL_IS_WELL/article/details/111227468ht ...
vue + element 自定义表单验证的时候需要通过请求后端接口验证
vue + element 自定义表单验证的时候需要通过请求后端接口验证做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
【Layui】表单验证
author:咔咔 wechat:fangkangfk layui表单验证的属性 required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date( ...
antd vue表单验证_antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效（其他验证失效）...
## antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效(其他验证失效) ##### antd 的表单校验方法包括 validateFields 和 validateField ...
ant-design-vue 表单验证和 validator 自定义表单验证
在 ant-design-vue 中,提供 FormModel 表单组件,且支持 v-model 数据绑定,同时可以校验和提交功能的表单. 一.表单验证 <a-form-modelref=&qu ...
html怎么校验用户名重复,layui的表单验证支持ajax判断用户名是否重复的实例
如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持.onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证. ht ...
layui处理表单验证时, select非空验证自动处理null或underfined.
很多人都在问, 在layui处理表单验证时, 因为后台取值为null时, select非空验证没有自动处理null或underfined. 这里提供一个在我看来比较好的解决办法: 修改form.js ...

layui自定义表单验证无效

layui自定义表单验证无效相关推荐

最新文章

热门文章