validate验证
刘俊语
概述
作用就是对输入的数据，立即进行校验，查看是否复合要求
validate: jquery的一个插件,依赖jquery使用，Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。
- 内置验证规则
- 简单强大的验证信息提示
- 实时验证
| 属性 | 描述 |
|---|---|
| required:true | 必输字段 |
| remote:“check.php” | 使用ajax方法调用check.php验证输入值 |
| email:true | 必须输入正确格式的电子邮件 |
| url:true | 必须输入正确格式的网址 |
| date:true | 必须输入正确格式的日期 日期校验ie6出错，慎用 |
| dateISO:true | 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 |
| number:true | 必须输入合法的数字(负数，小数) |
| digits:true | 必须输入整数 |
| creditcard: | 必须输入合法的信用卡号 |
| equalTo:"#field" | 输入值必须和#field相同 |
| accept: | 输入拥有合法后缀名的字符串（上传文件的后缀） |
| maxlength:5 | 输入长度最多是5的字符串(汉字算一个字符) |
| minlength:10 | 输入长度最小是10的字符串(汉字算一个字符) |
| rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) |
| range:[5,10] | 输入值必须介于 5 和 10 之间 |
| max:5 | 输入值不能大于5 |
| min:10 | 输入值不能小于10 |
安装
<!--
一定要先引入 jquery
-->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- 引入validate -->
<script src="js/validate.min.js"></script>
<!-- 对应 validate 中文提示 -->
<script src="js/messages_zh.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引入validate 校验库 validate 依赖jquery
-->
<!--
一定要先引入 jquery
-->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- 引入validate -->
<script src="js/validate.min.js"></script>
<!-- 对应 validate 中文提示 -->
<script src="js/messages_zh.js"></script>
</head>
<body>
<form id="form1">
id:<input type="number" id="id" name="id" /><br />
name:<input type="text" id="name" name="name" /><br />
email:<input type="text" id="email" name="email" /><br />
</form>
<script>
$(function(){
$('#form1').validate({
rules:{
id:{ // 对id 限制规则
required:true,
digits:true, // 必须是整数
range:[1,100]
},
name:{
required:true,
minlength:10 // 最小长度
},
email:{
required:true,
email:true // 校验邮箱格式
}
},
messages:{
id:"请输入正确的id格式",
name:"请输入正确name 格式",
email:"请输入正确的邮箱"
}
}
)
})
</script>
</body>
</html>
类似资料：