Jquery-validate的根本使用
首先下面是一个简单的注册信息表单页面,很简单的HTML代码,也是我们需要录入元素的地方:
<form action="#" method="post" id="regist">
<table cellpadding="0" cellspacing="0" border="0" class="form_table">
<tr>
<td valign="middle" align="right">用户名:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="username" id="username" /> </td>
</tr>
<tr>
<td valign="middle" align="right">真实姓名:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="name" /> </td>
</tr>
<tr>
<td valign="middle" align="right">密码:</td>
<td valign="middle" align="left"> <input type="password" class="inputgri" name="pwd" id="pwd"/> </td>
</tr>
<tr>
<td valign="middle" align="right">重复密码:</td>
<td valign="middle" align="left"> <input type="password" class="inputgri" name="repwd"/> </td>
</tr>
<tr>
<td valign="middle" align="right">年龄:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="age" /> </td>
</tr>
<tr>
<td valign="middle" align="right">电话:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="phone" /> </td>
</tr>
<tr>
<td valign="middle" align="right">电子邮件:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="email" /> </td>
</tr>
<tr>
<td valign="middle" align="right">验证码:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="number" /> </td>
</tr>
</table>
<p> <input type="submit" class="button" value="Submit »" /> <input type ="reset" class = "button" value = "Reset »"> </p>
</form>
接下来我们要对填写的表单进行校验,既然是用了JQuery.Validate来校验我们的表单,那么我们肯定要在HTML的头部引入JQuery和JQuery.Validate的JS库,因为下面的语句会调用函数库:
<head>
<title>欢迎注册</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.validate.messages_cn.js"></script>
</head>
接着我们就在head里面添加我们的校验代码,因为使用了插件,所以校验的方式很简单,每个表单几行代码就可以搞定了:
<script type="text/javascript">
//表单填写情况校验
$(function(){ //代表页面加载以后执行
$("#regist").validate( //此处的#regist是JQuery的选择器,代表了校验id为regist的Form
{
rules: {//此处开始配置校验规则,下面会列出所有的校验规则
username : "required",
name : "required",
pwd : {required:true,rangelength:[6,10]},
repwd : {required:true,equalTo:"#pwd"}, //需要和id=pwd元素对应
age : {required:true,rangelength:[1,2]},
phone:{required:true,rangelength:[5,20]},
number:{required:true,},
email: {required:true,email: true,},
},
messages:{//自定义提示信息
name:{required:"真实姓名不能为空!"},
pwd:{required:"密码不能为空!",rangelength:"密码必须在6-10位!"},
email:{required:"电子邮箱不能为空!"},
}
}
);
});
</script>
完成了代码以后,我们可以打开页面测试校验结果,全部都没有录入,Email字段录入错误的格式,效果如下:
JQuery.Validate支持的校验规则有下面这些:
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
因为这个插件是外国人编写的,所以默认的提示信息是中文的,但是我们可以自定义他的提示语言,比如我就在head里面引入了jquery.validate.messages_cn.js文件,里面是我自定义的汉化版提示,如果某些特殊的需要单独提示的,可以直接在校验代码中以message:{}的形式定义,见上面标亮代码部分
这个插件使用其实是很方便便捷的,而且容易上手,在一些不复杂的系统都可以运用上去,本文写得比较粗糙,JQuery.Validate的功能远远不止我所描述的,感兴趣的同学百度,Google去了解下即可,下次提供一个手写的JQuery校验,功能和这个差不多,不过更加灵活了一些。