validate表单校验

来源：互联网发布：淘宝限额5000怎么修改编辑：程序博客网时间：2024/06/01 09:06

validate的使用

前面我们使用的是js手写表单校验，在实际使用中，这样太麻烦了，我们可以使用validate插件，帮我们做一些繁琐的事情

入门

下载插件

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

简单试用

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><script type="text/javascript" src="js/jquery-1.11.3.min.js"></script><!--validate.js是建立在jquery之上的，先导入jquery的类库--><script type="text/javascript" src="js/jquery.validate.min.js"></script><!--引入国际化js文件--><script type="text/javascript" src="js/messages_zh.js"></script><script>$(function() {$("#form").validate({rules: {username: {required: true,minlength: 3},password: {required: true,minlength: 3,digits:true  //必须数字}},messages: {username: {required: "不能为空",minlength: "3位以上"},password: {required: true,minlength: "3位以上",digits:"密码必须是整数!"}}});});</script><body><form action="#" id="form">用户名：<input type="text" name="username" /><br /> 密码：<input type="password" name="password" /><br /><input type="submit" value="提交" /></form></body></html>

上文的demo就是一个入门实例，我针对我学习它中遇到的坑，做一些描述，帮助初学者少走一些根本没意义的弯路。

0）调用validate方法的是form表单的jq对象

1）rules和message是写在validate（{ }）的{ }中的

2）rules与message中的逗号，两个校验项之间的逗号（不是；）

3）校验项是文本框中的name属性对应的值

以上注意点，虽说简单，但是在没有报错提示的情况下，它是很难找到的，毕竟它是陌生的。

检验项的默认校验规则：

(1)、required:true               必输字段(2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值(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:true             必须输入合法的信用卡号(10)、equalTo:"#password"        输入值必须和#password相同(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

补充：

1）在message后面可以添加下面这句

//用来创建错误提示信息标签,validate插件默认的就是label

errorElement: "label",

（添加的原因如下图所示）

解决

如果加了errorElement: "label", 的话就可以使用上面加红的指定位置展示提示信息。

2）验证成功可以添加自己的类

success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}

success类如下

label.success{
background:url(../img/checked.gif) no-repeat 10px 3px;
padding-left: 30px;
}

以上是笔者的一些学习记录与心得，请不要当成完整的教学文档来使用，比如自定义校验、国际化什么的，我都未提及。

阅读全文

0 0