jquery validate使用

ゝ一纸荒年。 2022-05-04 08:28 193阅读 0赞

# Jquery validator (jquery的数据验证库) #

建议：自己记录的。如果学习请参考：[https://blog.csdn.net/wangxiaoan1234/article/details/77466720][https_blog.csdn.net_wangxiaoan1234_article_details_77466720]

## 引入js库 ##

*  jquery.js
 *  jquery.validate.js 核心库
 *  jquery.validate.method.js 这个js里面封装了很多的校验方法。
 *  jquery.validate.css 校验的样式

## 使用 ##

#### 将规则写到控件中 ####

<!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8"/>
    <title>DEMO</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    
    <script src="./jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="./query.validate.js" type="text/javascript"></script>
    <script src="./jquery.validate.method.js" type="text/javascript"></script>
    
    <link href=./jquery.validate.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
    <form>
    <input type="text" id="field" name="field" requird maxlength=50 minlength=10 />
    <input type="text" id="field" name="field" class="{required:true,minlength:5,equalTo:'#password'}" />
    <input type="submit" value="提交">
    </form>
    </body>
    </html>

#### 将判断规则写到js中 ####

$(document).ready(function () \{  
$("\#inputForm").validate(\{  
debug: true, //debug为true，不提交  
ignore: ‘’, //校验隐藏域  
rules: \{  
function: \{  
required: true,  
maxlength: 10  
\}  
\}  
\});  
\});

#### 修改错误信息的显示位置 ####

<form action="#" id="userForm" method="post">
        用户名：<input type="text" name="name" id="name" autocomplete="off">
        <br>是否必填：<input type="checkbox" name="flag" id="flag">
        <br><input type="submit" value="提交">
        <br>
        错误将在这显示：<span id="errorSpan"></span>
    </form>
    
    <script>
        $(function () {
            var $userForm = $("#userForm");
            $userForm.validate({
                debug: true,
                errorPlacement: function(error, element) {
    //                error.appendTo(element.parent());//这是默认的，就像前几个图显示的，直接追加到该控件的后面
                    error.appendTo($("#errorSpan"))
                },
                rules: {
                    name: {
                        required: true
                    }
                }
            });
        })
    </script>

来自[https://blog.csdn.net/wangxiaoan1234/article/details/77466720][https_blog.csdn.net_wangxiaoan1234_article_details_77466720].

#### API ####

<table> 
 <thead> 
  <tr> 
   <th align="center">参数</th> 
   <th align="center">类型</th> 
   <th align="center">描述</th> 
   <th align="center">默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">errorClass</td> 
   <td align="center">String</td> 
   <td align="center">指定错误提示的 css 类名，可以自定义错误提示的样式。</td> 
   <td align="center">“error”</td> 
  </tr> 
  <tr> 
   <td align="center">errorElement</td> 
   <td align="center">String</td> 
   <td align="center">用什么标签标记错误，默认是 label，可以改成 em。</td> 
   <td align="center">“label”</td> 
  </tr> 
  <tr> 
   <td align="center">errorContainer</td> 
   <td align="center">Selector</td> 
   <td align="center">显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大。 errorContainer: “#messageBox1, #messageBox2”</td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center">errorLabelContainer</td> 
   <td align="center">Selector</td> 
   <td align="center">把错误信息统一放在一个容器里面。</td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center">wrapper</td> 
   <td align="center">String</td> 
   <td align="center">用什么标签再把上边的 errorELement 包起来。</td> 
   <td align="center"></td> 
  </tr> 
 </tbody> 
</table>

--------------------

| 原文：https://blog.csdn.net/wangxiaoan1234/article/details/77466720

#### 使用自定义判断方式 ####

$.validator.addMethod("checkHidden", function (value, ele, param) {
            return !checkEmpty($("#" + param).val());
        }, "字段值不能为空");

## Q$A ##

> 不使用submit方式提交的表单怎么办?

在提交之间使用$("\#SubmitForm").valid(),可以判断校验通没通过.

> 判断隐藏域的值

$('#inputForm').validate({
        ignore: [],
        // any other options and/or rules
    });

原来js中的ignore的默认值是ingore:‘hidden’,这个地方就是把默认值覆盖掉。

### 参考文章 ###

[https://blog.csdn.net/wangxiaoan1234/article/details/77466720][https_blog.csdn.net_wangxiaoan1234_article_details_77466720]

### 日后学习 ###

*  jquery validate的细节。
 *  bootstrap validate验证。

### 最后 ###

如果你觉得写的还不错，就关注下公众号呗，关注后，有点小礼物回赠给你。  
你可以获得5000+电子书，java,springCloud,adroid,python等各种视频教程，IT类经典书籍，各种软件的安装及破解教程。  
希望一块学习，一块进步！  
![在这里插入图片描述][20190901123112370.jpg]

[https_blog.csdn.net_wangxiaoan1234_article_details_77466720]: https://blog.csdn.net/wangxiaoan1234/article/details/77466720
[20190901123112370.jpg]: https://img-blog.csdnimg.cn/20190901123112370.jpg