layui表单验证的再次实战以及总结提升

在前面的文章中，已对“layui中使用lay-verify进行条件校验”的流程进行了归纳。今天，在实践中发现还是存在一点问题，在此进行更新，总结前面的经验。

大体来说，有五个步骤：

一、引入layui的js文件（这是之前忽视的问题）

<script src="/lib/layui/layui.js" charset="utf-8"></script>

二、 在form标签内加上class="layui-form"

<form id="form1" runat="server" class="layui-form">

三、在提交按钮上加上lay-submit=""

<asp:Button ID="Button1" runat="server" Text="增加" lay-submit="" class="layui-btn" />

四、JS代码

<script language="javascript" type="text/javascript">
       layui.use(['form', 'layer'],
       function () {
           nbsp;= 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位'],
               Ndouble:[ /^[1-9]\d*$/ ,'只能输入整数哦'],
               repass: function (value) {
                   if ($('#L_pass').val() != $('#L_repass').val()) {
                       return '两次密码不一致';
                  }
              },
               otherReq: function (value, item) {
                   var nbsp;= 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校验

lay-verify：是表单验证的关键字,有以下值供选择：
required (必填项)
phone（手机号）
email（邮箱）
url（网址）
number（数字）
date（日期）
identity(身份证)

如，在asp.net中可以这样使用：

<asp:TextBox ID="wjmctxt" runat="server" placeholder="输入详细名称" autocomplete="off" lay-verify="required"  class="layui-input"></asp:TextBox>
<asp:TextBox ID="wjfstxt" lay-verify="required|Ndouble" runat="server" placeholder="请输入份数"  autocomplete="off" class="layui-input"></asp:TextBox>