下面是“学习LayUI时自研的表单参数校验框架案例分析”的完整攻略：

学习LayUI时自研的表单参数校验框架案例分析

前言

LayUI是一款基于jQuery的UI库，广泛应用于前端开发中。其提供了丰富的组件和插件，方便快捷地构建Web界面。在使用LayUI过程中，表单参数校验是绕不过去的一个步骤，为此我们研发了一套表单校验框架，下面将详细介绍我们的研发过程和案例分析。

研发过程

在研发表单校验框架时，我们遇到了以下几个问题：

如何自定义校验规则？
如何实现校验结果的提示信息？
如何在多个表单中复用校验规则？

针对这些问题，我们采用了如下的解决方案：

自定义校验规则：可以在LayUI的表单校验函数中加入自定义规则（如reg, check等），也可以扩展表单校验器的方法（如$.validator.addMethod）来实现自定义规则；
校验结果提示信息：可以弹出layer提示框，也可以在表单下方添加提示信息；
复用校验规则：将校验规则放置在单独的JS文件中，供多个表单共用。

案例分析

接下来，我们将通过两个示例，分别演示如何使用我们自研的表单校验框架。

示例一：登录表单校验

<form id="loginForm" class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="login">登录</button>
      </div>
  </div>
</form>

//登录表单校验规则
var loginRules = {
    username: {
        required: true
    },
    password: {
        required: true
    }
};

//登录表单校验
$('#loginForm').validate({
    rules: loginRules,
    submitHandler: function(form){
        console.log('登录成功！');
    }
});

在上面的示例中，loginRules是我们自定义的校验规则，其中设置了用户名和密码字段必填。在表单中，用户名和密码的输入框都加了lay-verify="required"属性，这样可以触发LayUI的表单校验功能。通过$('#loginForm').validate({...})进行表单的校验设置，当提交按钮被点击时，会执行submitHandler回调函数，可以在该函数中实现表单提交的相关业务逻辑。

示例二：注册表单校验

<form id="regForm" class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" id="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">确认密码</label>
    <div class="layui-input-block">
      <input type="password" name="repassword" lay-verify="required" equalTo="#password" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
      <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="reg">注册</button>
    </div>
  </div>
</form>

//注册表单校验规则
var regRules = {
    username: {
        required: true,
        remote: {
            url: 'check_username.php',
            type: 'post',
            data: {
                username: function(){
                    return $('#username').val();
                }
            }
        }
    },
    password: {
        required: true
    },
    repassword: {
        required: true,
        equalTo: '#password'
    },
    email: {
        email: true
    }
};

//注册表单校验
$('#regForm').validate({
    rules: regRules,
    messages: {
        username: {
            remote: '该用户名已被占用，请重新输入！'
        }
    },
    submitHandler: function(form){
        console.log('注册成功！');
    }
});

在上面的示例中，我们新增了一个用户邮箱字段，并设置了相应的校验规则。在用户名字段的校验规则中，我们加入了一个remote属性，用来对服务器端进行校验。在表单提交时，将会将当前输入的用户名进行Ajax校验，验证用户名是否已被占用。当用户名已被占用时，会提示对应的错误信息。而在邮箱字段的校验规则中，我们直接使用LayUI的email验证规则。