基本用法包括定义一个descriptor,将其分配给schema,并将要验证的对象和回调函数传递给schema创建出来的validator的validate方法:
该方法将返回Promise对象,如:
传递给validate或asyncvalidate的选项将传递给验证函数,以便您可以在验证函数中临时引用数据(例如模型引用)。但是,某些选项名是保留的;如果使用选项对象的这些属性,它们将被覆盖。保留的属性是消息、异常和错误。
针对单个字段测试多个验证规则通常很有用,这样可以使规则成为对象数组,例如:
要使用的验证程序的类型,识别的类型值如下:
boolean,是否必填
模式规则属性表示正则表达式,该值必须匹配才能通过验证。
使用min和max属性定义范围。对于字符串和数组类型,将根据长度进行比较,对于数字类型,数字不得小于min,也不得大于max。
验证字段的确切长度。对于字符串和数组类型,对length属性执行比较,对于数字类型,此属性指示数字的完全匹配,即,它可能仅严格等于len。如果len属性与最小和最大范围属性组合,则len优先。
枚举,要从可能值列表中验证值,请使用带有枚举属性的枚举类型,列出该字段的有效值。
空白,通常将仅包含空格的必填字段视为错误。要为仅包含空格的字符串添加其他测试,请将空白属性添加到值为true的规则。规则必须是字符串类型。
如果需要验证深层对象属性,则可以通过将嵌套规则分配给规则的fields属性来为对象或数组类型的验证规则执行此操作。
深度规则验证为嵌套规则创建架构,因此还可以指定传递给schema.validate()方法的选项。
父规则也会被验证,因此如果您有一组规则,例如:
并提供 {roles: ["admin", "user"]} 这样的源对象,将会创建两个错误。一个用于数组长度不匹配,另一个用于索引2处缺少的必需数组项。
defaultField属性可与数组或对象类型一起使用,以验证容器的所有值。它可以是包含验证规则的对象或数组。例如:
有时需要在验证之前转换值,可能是为了强制价值或以某种方式对其进行消毒。为此,请将验证规则添加到转换有时需要在验证之前转换一个值,可能是强制值或以某种方式对其进行清理。为此,请向验证规则添加转换函数。该属性在验证之前被转换,并重新分配给源对象,以在适当的位置改变该属性的值。
如果没有转换函数,验证将失败,因为模式不匹配,因为输入包含前导空格和尾随空格,但通过添加转换函数验证传递,同时清理字段值。
消息,根据您的应用程序要求,您可能需要i18n支持,或者您可能更喜欢不同的验证错误消息。实现这一点的最简单方法是将消息分配给规则:
消息可以是任何类型,例如jsx格式。
消息也可以是一个函数,例如,如果使用vue-i18n:
对于不同的语言,可能需要相同的模式验证规则,在这种情况下,为每种语言复制模式规则是没有意义的。在这个场景中,您只需为该语言提供您自己的消息并将其分配给模式:
如果要定义自己的验证函数,最好将消息字符串分配给消息对象,然后通过验证函数内的options.messages属性访问消息。
异步验证器,您可以为指定字段自定义异步验证函数:function(rule, value, callback)
验证器,您可以为指定字段自定义验证函数:function(rule, value, callback)
jquery.validate.js表单验证
官方网站: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
API: http://jquery.bassistance.de/api-browser/plugins.html
当前版本:1.5.5
需要JQuery版本:1.2.6+, 兼容 1.3.2
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept:输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
例子:自定义密码验证的规则
avaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有:
用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法?
用户是否已输入合法的日期?
用户是否在数据域 (numeric field) 中输入了文本?
必填(或必选)项目
下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):
function validate_required(field,alerttxt){
with (field)
{
if (value==null||value=="")
{alert(alerttxt)return false}
else {return true}
}
}
下面是连同 HTML 表单的代码:
<html><head>
<script type="text/javascript">function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt)return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus()return false}
}
}</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:
function validate_email(field,alerttxt){
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt)return false}
else {return true}
}
}
下面是连同 HTML 表单的完整代码:
<html><head>
<script type="text/javascript">function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt)return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus()return false}
}
}</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>