Validate+layer插件实现好看的表单验证效果

最新推荐文章于 2021-10-11 11:03:25 发布

原创最新推荐文章于 2021-10-11 11:03:25 发布 · 3.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#表单验证 #Validate

本文介绍了一种使用Validate插件进行表单验证的方法，并结合layer插件实现了美观的错误提示。通过具体示例代码展示了如何配置验证规则及自定义错误消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一直没时间总结,今天难得有时间,来总结一下我最近项目中用到的东西.

首先Validate这个插件倒是挺好用的,懒得自己写表单验证,用这个很方便,但Validata的error提示有点丑,用layer结合一下就很不错了,废话不多说,看代码吧

下面是一个非常简单的表单提交

1.引入相应的js文件

2.js处理代码

<script type="text/javascript">

function Djly_form_add(){
  if(validform().form()) {
    // 验证成功
  }else{
    // 验证失败,不用处理,结果已在页面上输出
  }
}

function validform(){
  /*关键在此增加了一个return，返回的是一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/ 
  return $("#form-user-add").validate({
  rules:{
      txtDJLY_BM:{
          required:true,
          minlength:5,
      },
      txtDJLY_MC:{
          required:true,
      }
    },
    messages: {
      txtDJLY_MC: "请输入名称！",
      txtDJLY_BM: {
        required: "请输入编码！",
        minlength: "暂定编码默认为5位！"
      }
    },
    onsubmit:true,
     //重写showErrors
    showErrors: function (errorMap, errorList) {
        var msg = "";
        $.each(errorList, function (i, v) {
            layer.tips(v.message , v.element, {
        tips: [1, '#3595CC'],
        time: 2000
      });
            return false;
      });  
    },
  });
}

</script>

效果就是这样了,是不是很好看,关于Validate 和 layer这两个插件还有很多好用的东西,后面项目中遇到再总结吧

对了,补充一句,我这也是看别人的博客的,有啥不明白的可以去参考原博客哦 (原博客)