博客

jQuery Validate教程

  • Post author:
  • Post category:其他




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>