JQuery插件之Validate校验功能

下载地址:
https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0
引入CDN地址:
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> 
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

介绍:
前端校验框架

使用方法:
1.引入js
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> 
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

2.在form上面给一个id的属性
<form action="#" method="post" id="editForm">
</form>

3.在form中的控件上添加校验
<input type="text" id="muname" name="muname"  value=""   required:true>

4.常见的规则有如下这些
注意事项:默认提示是英文的 如果你想要用到中文的提示
如果要使用到中文  请引入一个中文的补丁
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
默认校验规则
 
| 序号 | 规则 |           描述 
| 1 | required:true | 必须输入的字段。 
| 2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 
| 3 | email:true | 必须输入正确格式的电子邮件。 
| 4 | url:true | 必须输入正确格式的网址。 
| 5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错,慎用。 
| 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。 

5.设置好校验后
在js中启用校验
<script type="text/javascript">
    $(function(){
        $("#editForm").validate();  //id要和你的form中的id保持一致 启用校验 
    });
</script>




猜你喜欢

转载自blog.csdn.net/qq_38334528/article/details/80288986