jQuery Validate教程

最新推荐文章于 2024-06-29 14:47:07 发布

.NET跨平台

最新推荐文章于 2024-06-29 14:47:07 发布

阅读量817

点赞数

原文链接：https://blog.csdn.net/WuLex

版权

Jquery validate.js 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

jQuery Validate `errorPlacement()`

此方法可以自定义错误信息显示的位置，它在Validate插件中并没有具体的实现，只是给出了接口规范。

语法结构:

function(error, element)

参数解析:

（1）.error:规定用来放置错误信息的元素，由errorElement属性配置。

（2）.element:规定当前表单元素对象。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#thetable { 
  font-size:12px; 
} 
#thetable td { 
  width:40px; 
  height:30px; 
  line-height:30px; 
  text-align:center; 
}
#thetable tr > td:nth-of-type(3) {
  width:120px;
  text-align:left;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#myform").validate({
    errorPlacement: function(error, element) {
      error.appendTo(element.parent("td").next("td"));
    },
    rules: {
      username: "required",
      pw: "required",
      email: {
        required: true,
        email:true
      }
    },
    messages: {
      name: "用户名是必填项目",
      pw: "密码是必填项目",
      email: {
        required: "邮箱是必填项目",
        email:"邮箱格式不正确"
      }
    }
  });
});
</script>
</head>
<body>
<form id="myform">
<table id="thetable">
  <tr>
    <td>姓名:</td> 
    <td><input type="text" name="username"/></td>
    <td></td>
  </tr>
  <tr>
    <td>密码:</td>
    <td><input type="password" name="pw" /></td>
    <td></td>
  </tr>
  <tr>
    <td>邮箱:</td>
    <td><input type="text" name="email"/></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3">
      <input type="submit" value="提交">
      <input type="reset" value="重置">
    </td>
  </tr>
</table>
</form>
</body>
</html>

可以将错误信息显示与最后一个td中，更多内容参阅jQuery Validate自定义错误信息显示位置一章节。

jQuery Validate `addMethod()`

在阅读本章节内容之前，建议参阅jQuery Validate验证规则的实质一章节。

此方法可以添加自定义验证规则;是validator类的静态方法。

语法结构:

function( name, method, message )

参数解析:

（1）.name:必需，规定规则的名称。

（2）.method:必需，规则名称对应的处理函数；此函数可以接受三个参数:

<1>.value:当前表单元素的value属性值。

<2>.element:当前表单元素对象。

<3>.param:传递的参数。

（3）.message:可选，规定规则验证失败的默认提示信息。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  list-style:none;
  margin-top:5px;
}
label.success {
  color:green;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$.validator.addMethod("mobile", function (value, element) {
  var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  return this.optional(element) || reg.test(value);
},"请输入正确手机号码")
$(document).ready(function () {
  $("#myform").validate({
    rules: {
      username: "required",
      pw: "required",
      email: {
        required: true,
        email: true
      },
      tel: "mobile"
    },
    messages: {
      username: "用户名是必须",
      pw: "密码是必须",
      email: {
        required: "邮箱是必须",
        email:"邮箱格式不正确"
      }
    }
  })
});
</script>
</head>
<body>
<form id="myform">
  <ul>
    <li>姓名:<input type="text" name="username"/></li>
    <li>密码:<input type="password" name="pw"/></li>
    <li>邮箱:<input type="text" name="email"/></li>
    <li>电话:<input type="text" name="tel" /></li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>

上面的代码添加一个自定义验证规则mobile，它实现了验证手机号码格式的功能。

此规则没有传递param参数，这个参数非常好理解，比如下面的代码:

<input type="text" minlength="5" name="username"/>

比如minlength规则，5就是作为param参数传递给规则对应的函数。

jQuery Validate的`format()`用法

此为字符串格式化方法，如果会C#等语言，那么非常好理解，不会关系也不大。

先看一个代码片段:

rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串")

很明显输入字符串的长度被rangelength规范限定在m-n范围，一个规范对应着一个方法，为这个方法传递的参数会和format方法中的{n}依次对应，看如下代码片段：

pw: {
  required: true,
  rangelength: [5, 15]
}

虽然是传递了一个数组，其实在方法内部将其分解为两个参数，分别是5和15。

{0}将会被5替代，{1}将会被15替代，以此类推。

总结：format方法参数字符串中的指定格式字符串片段（如{0}），将会依次被传递的参数替代。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  list-style:none;
  margin-top:5px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#one").validate({
    rules: {
      username: {
        required: true,
        maxlength: 20
      },
      pw: {
        required: true,
        rangelength: [5, 15]
      },
      address: {
        required: true,
        minlength: 15
      }
    },
    messages: {
      username: {
        required: "用户名是必填项目",
        maxlength: $.validator.format("用户名长度不得超过 {0}")
      },
      pw: {
        required: "密码是必填项目",
        rangelength: $.validator.format("密码的长度必须在 {0} - {1} 之间")
      },
      address: {
        required: "地址是必填项目",
        minlength: $.validator.format("地址描述长度不得少于 {0}")
      }
    }
  });
});
</script>
</head>
<body>
<form id="one"action="http://www.softwhy.com/">
  <ul>
    <li>姓名:<input type="text" name="username"/></li>
    <li>密码:<input type="password" name="pw"/></li>
    <li>住址:<input type="text" name="address"/></li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
  <label for="username"></label>
</form>
</body>
</html>

jQuery Validate `highlight()`

此方法可以设置表单元素没有通过规则验证时的样式。

Validate提供了此方法的实现，也可以自己配置，参阅jQuery Validate全局配置和实例配置一章节。

语法结构：

function( element, errorClass, validClass )

参数解析：

（1）.element:当前表单元素对象。

（2）.errorClass:errorClass属性性配置的样式类。

（3）.validClass:validClasss属性配置的样式类。

errorClass和validClasss用法参阅jQuery Validate自定义表单元素验证通过和不通过的样式一章节。

当表单验证不通过时候，此方法会为表单元素移除validClass样式类，添加errorClass样式类。

代码实例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#thetable { 
  font-size:12px; 
} 
#thetable td { 
  width:40px; 
  height:30px; 
  line-height:30px; 
  text-align:center; 
}
#thetable tr > td:nth-of-type(3) {
  width:120px;
  text-align:left;
}
span.error {
  color:red
}
input.error {
  border:1px dotted red;
}
input.success {
  background:#ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#myform").validate({
    errorClass: "error",
    validClass:"success",
    errorElement: "span",
    wrapper: "li",
    errorLabelContainer: $("#ant ul"),
    errorContainer: $("#ant"),
    rules: {
      username: "required",
      pw: "required",
      email: {
        required: true,
        email:true
      }
    },
    messages: {
      name: "用户名是必填项目",
      pw: "密码是必填项目",
      email: {
        required: "邮箱是必填项目",
        email:"邮箱格式不正确"
      }
    }
  });
});
</script>
</head>
<body>
<div id="ant">
  <ul></ul>
</div>
<form id="myform">
<table id="thetable">
  <tr>
    <td>姓名:</td> 
    <td><input type="text" name="username"/></td>
    <td></td>
  </tr>
  <tr>
    <td>密码:</td>
    <td><input type="password" name="pw" /></td>
    <td></td>
  </tr>
  <tr>
    <td>邮箱:</td>
    <td><input type="text" name="email"/></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3">
      <input type="submit" value="提交">
      <input type="reset" value="重置">
    </td>
  </tr>
</table>
</form>
</body>
</html>

上述代码对标题中的方法进行了简单演示，非常简单不多做介绍。

jQuery Validate `unhighlight()`

此方法可以设置表单元素通过规则验证时的样式。

Validate本身提供了此方法的实现，我们也可以自己配置，可以参阅jQuery Validate全局配置和实例配置一章节。

语法结构:

function( element, errorClass, validClass )

参数解析:

（1）.element：当前表单元素对象。

（2）.errorClass：errorClass属性性配置的样式类。

（3）.validClass：validClasss属性配置的样式类。

errorClass和validClasss参阅jQuery Validate自定义表单元素验证通过和不通过的样式一章节。

当表单验证通过时候，此方法会为表单元素添加validClass样式类，删除errorClass样式类。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#thetable { 
  font-size:12px; 
} 
#thetable td { 
  width:40px; 
  height:30px; 
  line-height:30px; 
  text-align:center; 
}
#thetable tr > td:nth-of-type(3) {
  width:120px;
  text-align:left;
}
span.error {
  color:red
}
input.error {
  border:1px dotted red;
}
input.success {
  background:#ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#myform").validate({
    errorClass: "error",
    validClass:"success",
    errorElement: "span",
    wrapper: "li",
    errorLabelContainer: $("#ant ul"),
    errorContainer: $("#ant"),
    rules: {
      username: "required",
      pw: "required",
      email: {
        required: true,
        email:true
      }
    },
    messages: {
      name: "用户名是必填项目",
      pw: "密码是必填项目",
      email: {
        required: "邮箱是必填项目",
        email:"邮箱格式不正确"
      }
    }
  });
});
</script>
</head>
<body>
<div id="ant">
  <ul></ul>
</div>
<form id="myform">
<table id="thetable">
  <tr>
    <td>姓名:</td> 
    <td><input type="text" name="username"/></td>
    <td></td>
  </tr>
  <tr>
    <td>密码:</td>
    <td><input type="password" name="pw" /></td>
    <td></td>
  </tr>
  <tr>
    <td>邮箱:</td>
    <td><input type="text" name="email"/></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3">
      <input type="submit" value="提交">
      <input type="reset" value="重置">
    </td>
  </tr>
</table>
</form>
</body>
</html>

jQuery Validate `invalidHandler()`

invalidHandler是Validate的自定义invalid-form事件的事件处理函数，并没有具体的实现，当然可以自己实现。

当点击提交按钮，如果表单有没有通过验证的元素，就会触发invalid-form事件，如果invalidHandler事件处理函数存在，那么就会执行此函数，下面就介绍一下它的用法。

语法结构：

function(ev, validator)

参数解析:

（1）.ev:事件对象。

（2）.validator:当前Validate实例对象。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  list-style:none;
  margin-top:5px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#myform").validate({
    invalidHandler: function (ev, validator) {
      $(".container").html("表单验证错误数量是" + validator.numberOfInvalids());
    },
    debug:true,
    errorContainer: $("div.container")
  });
});
</script>
</head>
<body>
<div class="container">
    
</div> 
<form id="myform">
  <ul>
    <li>姓名:<input type="text" name="username" required/></li>
    <li>密码:<input type="password" name="pw" required/></li>
    <li>邮箱:<input type="email" name="email" required /></li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>

如果表单验证没有通过，那么就会获取验证错误的数目。

jQuery Validate `optional()`方法

此方法可以判断一个表单元素的value属性值是否为空；不为空则触发验证。

如果返回false，说明value值不为空，返回"dependency-mismatch"则表示为空。

validator类的实例方法。

语法结构:

optional(element)

参数解析:

（1）.element:表单元素对象，此方法就是判断此表单元素的value值是否为空。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  list-style:none;
  margin-top:5px;
}
label.success {
  color:green;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$.validator.addMethod("mobile", function (value, element) {
  var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  return this.optional(element) || reg.test(value);
},"请输入正确手机号码")
$(document).ready(function () {
  $("#myform").validate({
    rules: {
      username: "required",
      pw: "required",
      email: {
        required: true,
        email: true
      },
      tel: "mobile"
    },
    messages: {
      username: "用户名是必须",
      pw: "密码是必须",
      email: {
        required: "邮箱是必须",
        email:"邮箱格式不正确"
      }
    }
  })
});
</script>
</head>
<body>
<form id="myform">
  <ul>
    <li>姓名:<input type="text" name="username"/></li>
    <li>密码:<input type="password" name="pw"/></li>
    <li>邮箱:<input type="text" name="email"/></li>
    <li>电话:<input type="text" name="tel" /></li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>

代码自定义一个验证手机号码的规则，如果电话字段为空则不进行验证，如果不为空则进行验证。

核心代码如下：

return this.optional(element) || reg.test(value);

移除optional方法，即便是空，也进行手机号码格式验证，代码片段如下：

return reg.test(value);

addMethod方法可以参阅jQuery Validate addMethod()一章节。

jQuery Validate `success()`

此方法可以自定义表单元素验证成功的提示信息，具体参阅jQuery Validate自定义验证成功信息一章节。

语法结构:

function (error, element)

参数解析:

（1）.error:必需，存放成功信息的元素（和存放错误信息是同一个元素）。

（2）.element:可选，当前表单元素对象。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  list-style:none;
  margin-top:5px;
}
label.success {
  color:green;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#myform").validate({
    success: function (error, element) {
      if (element.name == "username") {
        error.text("你的名字真好听").addClass("success");
      } else if (element.name == "pw") {
        error.text("你的密码真安全").addClass("success");
      } else {
        error.text("邮箱是正确的").addClass("success");
      }
    },
    rules: {
      username: "required",
      pw: "required",
      email: "required"
    },
    messages: {
      name: "用户名是必填项目",
      pw: "密码是必填项目",
      email: {
        required: "邮箱是必填项目",
        email:"邮箱格式不正确"
      }
    }
  });
});
</script>
</head>
<body>
<form id="myform">
  <ul>
    <li>姓名:<input type="text" name="username"/></li>
    <li>密码:<input type="password" name="pw"/></li>
    <li>邮箱:<input type="text" name="email"/></li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>