layui常用的表单验证

使用layui表单常见的验证及遇到的坑

一、lay-verify=“required|number|”，如果默认的验证无法使用时，要检查表单属性

<form action="check.jsp" class="layui-form" method="post">layui-form
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>lay-submit

二、layui验证，

userid: [  // 名字在编辑器里面是高亮的，我昨天遇到的一个坑，没有高亮用不了/^[\S]{6,8}$/,'id必须6到8位，且不能出现空格'],

表单

         <form  action="check.jsp"  class="layui-form" method="post"><div class="layui-form-item"><label class="layui-form-label">用户id:</label><div class="layui-input-block"><input type="text" name="userId" lay-verify="required|number|userid" placeholder="6-8位" class="layui-input lef"></div></div><div class="layui-form-item"><label class="layui-form-label">用户名:</label><div class="layui-input-block"><input type="text" lay-verify="required|username"  name="userName" placeholder="2-10位" class="layui-input lef"></div></div><div class="layui-form-item"><label class="layui-form-label">密&emsp;码:</label><div class="layui-input-block"><input type="password" lay-verify="required|password" name="password" placeholder="6-8位，不能与用户名相同" class="layui-input lef"></div></div><div class="layui-form-item"><label class="layui-form-label">确认密码:</label><div class="layui-input-block"><input type="password" lay-verify="required|password|confirm_password" name="confpassword" placeholder="确认密码" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">生&emsp;日:</label><div class="layui-input-block"><input type="date" lay-verify="required|date" name="birthday" placeholder="格式为:1988-1-1" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">学&emsp;历:</label><div class="layui-input-block"><input type="radio" name="xl" value="专科" title="专科"><input type="radio" name="xl" value="本科" title="本科" checked><input type="radio" name="xl" value="硕士研究生" title="硕士研究生"><input type="radio" name="xl" value="博士研究生" title="博士研究生"><input type="radio" name="xl" value="其他" title="其他"></div></div><div class="layui-form-item"><label class="layui-form-label">地&emsp;区:</label><div class="layui-input-block"><select name="interest" lay-filter="aihao"><option value="重庆">重庆</option><option value="长沙">长沙</option><option value="上海">上海</option><option value="广东">广东</option><option value="北京">北京</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">E-mail:</label><div class="layui-input-block"><input type="email" lay-verify="required|email" name="userEmail" placeholder="邮箱" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">地&emsp;址:</label><div class="layui-input-block"><input type="text" required onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" name="userIp" placeholder="地址" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">电&emsp;话:</label><div class="layui-input-block"><input type="tel" lay-verify="required|phone|number"  name="userTel" placeholder="电话" class="layui-input"></div></div><input type="hidden" name="show" value="1"><div class="layui-form-item layui-form-text"><label class="layui-form-label">备&emsp;注:</label><div class="layui-input-block"><textarea placeholder="请输入内容" name="note" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="*">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form>

常用验证

如果正则不满足你的需求更换时注意斜杠

  // 正确演示if (!new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$").test(value)) {return '用户名不能有特殊字符或空格';}// 错误演示if (!new RegExp("/^[A-Za-z0-9\u4e00-\u9fa5]+$/").test(value)) {return '用户名不能有特殊字符或空格';}

<script type="text/javascript">layui.use(['jquery','layer', 'form'], function () {var layer = layui.layer;var form = layui.form;var $ = layui.$;form.verify({userid: [/^[\S]{6,8}$/,'id必须6到8位，且不能出现空格'],username: function (value, item) {if (!new RegExp("^(.+){2,10}$").test(value)) {return '用户名长度必须为2-10位'}if (!new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$").test(value)) {return '用户名不能有特殊字符或空格';}if (/(^\_)|(\__)|(\_+$)/.test(value)) {return '用户名首尾不能出现下划线\'_\'';}if (/^\d+\d+\d$/.test(value)) {return '用户名不能全为数字';}},password:function (value, item) {var re = /^[a-zA-Z0-9]{6,8}$/;if (!value.match(re)) {return '密码必须6到8位，且不能出现空格';}if (value == $('[name="userName"]').val()) {return '不能和用户名不一致';}},confirm_password: function (value) {if (!new RegExp("^[\\S]{6,8}$").test(value)) {return '密码长度必须为6-8位'}if (value !== $('[name="password"]').val()) {return '两次输入的密码不一致';}}});});
</script>

如果有不足的问题请多多指教

layui常用的表单验证相关推荐

JS常用正则表达式表单验证代码大汇总
正则表达式使用详解简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
js 常用正则表达式表单验证代码
正则表达式使用详解简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
JS常用的表单验证（数字、长度,汉字，邮箱，手机号，身份证等）
1.英文字母 >>jsp,html语句 <input type="text" οnblur="checkChart(this.value)" ...
常用的表单验证Js方法，身份证、手机号码、固定电话正则验证建议收藏
平时做项目时,经常会用到很多使用频率很高的代码,一有问题都习惯性问度娘!把自己都养懒了. /* 表单验证*/// 验证手机号码 function PhoneMustBePostiveInt(phone ...
layui常用的表单标签_Layui常用组件：表格（table）
快速使用添加删除编辑查看编辑删除 layui.use(['table'], function () { table.render({ elem: '#demo' ,url: 'url'// ...
layui常用的表单标签_layui框架常用输入框介绍
一.普通输入框 input *字段编号二.自动完成式输入框 1.确保 layui 引入了 autoComplete 插件. 2.确保初始化代码运行于 layui.use 的回调函数里. 3.引入 b ...
layui表单验证方式大全
表单自带校验 lay‐verify:是表单验证的关键字 required (必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity ...
分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
表单验证AngularJs
参考博客: https://www.cnblogs.com/rohelm/p/4033513.html 常用的表单验证指令 1. 必填项验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5 ...

layui常用的表单验证

使用layui表单常见的验证及遇到的坑

一、lay-verify=“required|number|”，如果默认的验证无法使用时，要检查表单属性

二、layui验证，

表单

常用验证

如果有不足的问题请多多指教

layui常用的表单验证相关推荐

最新文章

热门文章