一、layui的校验很简单,主要有以下步骤:
1. 在form表单内加上class=”layui-form”
2. 在提交按钮上加上lay-submit 例如:<button type=”submit” name=”submit” id=”submit” lay-submit class=”layui-btn “>
3. 在想要校验的标签,加上lay-verify=””,在这个属性里,加上想要的值,就可以进行校验了。
lay-verify:是表单验证的关键字
有以下值供选择:
required (必填项)
phone(手机号)
email(邮箱)
url(网址)
number(数字)
date(日期)
identity(身份证)
二、除了上面的值之外,还可以自定义校验规则
<script> layui.use([‘form’, ‘layer’],function () { $ = layui.jquery;var form = layui.form, layer = layui.layer;//自定义验证规则 form.verify({nikename: function (value) {if (value.length < 5) {return’昵称至少得5个字符啊’; } },len: function (value) {if (value.length < 5) {return’至少得5个字符啊’; } },pass: [/(.+){6,12}$/, ‘密码必须6到12位’],repass: function (value) {if ($(‘#L_pass’).val() != $(‘#L_repass’).val()) {return’两次密码不一致’; } },otherReq: function (value, item) {var $ = layui.$;var verifyName = $(item).attr(‘name’) , verifyType = $(item).attr(‘type’) , formElem = $(item).parents(‘.layui-form’)//获取当前所在的form元素,如果存在的话 , verifyElem = formElem.find(‘input[name=’ + verifyName + ‘]’)//获取需要校验的元素 , isTrue = verifyElem.is(‘:checked’)//是否命中校验 , focusElem = verifyElem.next().find(‘i.layui-icon’); //焦点元素if (!isTrue || !value) {//定位焦点 focusElem.css(verifyType == ‘radio’ ? { “color”: “#FF5722” } : { “border-color”: “#FF5722” });//对非输入框设置焦点 focusElem.first().attr(“tabIndex”, “1”).css(“outline”, “0”).blur(function () { focusElem.css(verifyType == ‘radio’ ? { “color”: “” } : { “border-color”: “” }); }).focus();return’必填项不能为空’; } } }); });</script>
三、如何做到多条件有层次的校验?
把要校验的规则,用|分割开,就可以依次校验了。
如:lay-verify=“required|number”
先校验是否为空,如果不为空,再校验是否符合数字格式。