Validform+layer实现漂亮的表单验证特效

下面我将详细讲解如何使用Validform和layer实现漂亮的表单验证特效。攻略分为以下几个步骤：

步骤一：引入相关JavaScript文件

首先，在HTML页面中引入Validform和layer的相关JavaScript文件。你可以在官网下载这两个文件，也可以使用CDN加速。以下是引入CDN加速文件的示例代码：

<script type="text/javascript" src="https://unpkg.com/validform@5.3.2/js/Validform_v5.3.2_min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>

步骤二：创建HTML表单并添加验证规则

接下来，我们需要在HTML中创建表单，并为表单元素添加验证规则。Validform的验证规则可以通过data属性来添加。以下是一个示例表单的代码：

<form action="submit.php" method="post" class="layui-form" id="demoform">
  <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|pass" 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="demo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

在上面的代码中，lay-verify属性用于添加验证规则，多个规则可以用|分隔。例如，required表示必填，pass表示必须是密码格式。表单的提交和重置按钮也需要添加相应的属性，lay-submit和lay-filter属性。

步骤三：绑定表单验证事件

在表单验证前，我们需要绑定表单验证事件。以下是示例代码：

$(function(){
  //绑定表单提交事件
  $("#demoform").Validform({
    tiptype: function(msg, o, cssctl) {
      if (o.type == 3) {
        layer.msg(msg, {icon: 2});
      }
    }
  });
});

在代码中，我们使用了jQuery的方式绑定表单验证事件，其中Validform用于绑定表单，tipype用于表示错误提示的样式，这里我们使用了layer的msg方法进行提示。如果你不想使用layer，可以使用其他方式来进行提示。

实例一：验证邮箱和手机号格式

以下是一个验证邮箱和手机号格式的示例代码：

<form action="submit.php" method="post" class="layui-form" id="demoform2">
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
      <input type="text" name="email" lay-verify="required|email" 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="phone" lay-verify="required|phone" 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="demo2">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

在上面的代码中，我们添加了email和phone两个验证规则，可以验证邮箱和手机号格式是否正确。

实例二：自定义错误提示信息

以下是一个自定义错误提示信息的示例代码：

<form action="submit.php" method="post" class="layui-form" id="demoform3">
  <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" id="password" name="password" lay-verify="required|minlength(6)" 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|confirmPwd" 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="demo3">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

在上面的代码中，我们添加了自定义规则confirmPwd，用于验证两次密码是否一致。以下是自定义规则的JavaScript代码：

// 自定义验证规则
$.extend($.Datatype,{
  "confirmPwd": function(gets, obj, curform, regxp){
    var password = $('#password').val();
    if(gets != password){
      return false;   
    }        
  }
});

在代码中，我们使用$.extend方法添加自定义规则，其中confirmPwd为规则名称，“gets”表示获取需要验证的值，”obj“表示当前输入框对象，“curform”表示当前表单对象，“regxp”表示当前规则的正则表达式。这里，我们比较了两次密码是否一致，如果不一致，则返回false，即验证失败。

好了，以上就是关于如何使用Validform和layer实现漂亮的表单验证特效的完整攻略，希望对你有所帮助。